Supabase Google Login sur le Web

Introduction

Cette guide vous aidera à intégrer l'authentification Google Sign-In avec Supabase Authentication sur le Web. Il est supposé que vous avez déjà terminé :

• le l'installation de l'authentification Google Login Web
• le Supabase Google Login - Configuration Générale.

Mise en œuvre

fichier de l'application d'exemple. Ce guide explique les concepts clés et comment l'utiliser. Utilisation de l'Aide à l'Authentification supabaseAuthUtils.ts La

fonction gère l'ensemble du flux d'authentification :

Copier dans le presse-papier authenticateWithGoogleSupabase Copier dans le presse-papier

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Critique : Gestion des Redirections

Critique : Gestion des Redirections

Lorsque vous utilisez Google login sur le web, vous devez DEVEZ appeler toute fonction du plugin lorsque la redirection se produit pour initialiser le plugin afin qu'il puisse gérer la redirection et fermer la fenêtre de popup. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclencheront la gestion de la redirection.

Cela est essentiel pour que le flux de popup OAuth fonctionne correctement.

Exemple d'implémentation

Ajoutez ceci à votre composant qui gère Google Sign-In :

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

Voir le SupabasePage.tsx pour un exemple complet.

Comment ça marche

Pour une explication détaillée de la façon dont le flux d'authentification fonctionne, y compris la génération de nonce, la validation de JWT et l'inscription Supabase, voir le section Comment ça marche du guide de configuration générale.

Pour la référence complète code, voir la Référence complète Code section du guide de configuration générale.

Voir aussi :

• SupabasePage.tsx - Exemple de composant avec gestion de redirection
• SupabaseCreateAccountPage.tsx - Exemple de page de création de compte

Notes importantes

Gestion de redirection

Lorsque vous utilisez Google login sur le web, vous DEVEZ appeler toute fonction du plugin lorsque la redirection se produit pour initialiser le plugin afin qu'il puisse gérer la redirection et fermer la fenêtre de popup. Vous pouvez appeler isLoggedIn() OU initialize() - les deux déclencheront la gestion de la redirection.

Cela est essentiel pour que le flux de popup OAuth fonctionne correctement. Sans cela, la fenêtre popup ne se fermera pas après l'authentification.

Gestion du nonce

La mise en œuvre du nonce suit le modèle de la documentation de React Native Google Sign In va à Supabase's:

• rawNonce Supabase fait une hachage de signInWithIdToken()
• et la compare avec le rawNonce qui est inclus dans le jeton ID de Google Sign-In nonceDigest (hachage SHA-256, encodé en hexadécimal) va à la
• nonceDigest paramètre dans les API de Google Sign-In nonce Réessai automatique

Cela est essentiel pour que le flux de popup OAuth fonctionne correctement. Sans cela, la fenêtre popup ne se fermera pas après l'authentification.

La mise en œuvre comprend une logique de réessai automatique :

• Si la validation de JWT échoue à la première tentative, elle se déconnecte et réessaye une fois
• Cela gère les cas où les jetons stockés dans la cache pourraient avoir des nonces incorrectes
• Si la réessai échoue également, une erreur est renvoyée

Dépannage

Si l'authentification échoue :

• Le redirigeement ne fonctionne pas : Assurez-vous d'appeler isLoggedIn() à la montée du composant (voir exemple ci-dessus)
• Audience non valide: Vérifiez que vos identifiants Client Google correspondent dans les deux Google Cloud Console et Supabase
• URLs de redirection autorisées: Vérifiez que les URLs de redirection autorisées sont configurées dans les deux Google Cloud Console et Supabase
• Mauvais nonce: Vérifiez les journaux de console - la fonction se réessayera automatiquement, mais vous pouvez vous déconnecter manuellement si nécessaire
• Échec de la validation du jeton: Assurez-vous d'utiliser mode: 'online' le dans l'appel d'initialisation pour obtenir un idToken
• Examinez l'application d'exemple __CAPGO_KEEP_0__ example app code Continuez de Supabase Google Login on Web

Supabase Google Login on Web

Si vous utilisez Supabase Google Login sur Web pour planifier l'authentification et les flux de compte, connectez-le avec Utilisez @capgo/capacitor-social-login pour la capacité native dans Utilisez @capgo/capacitor-social-login, Utilisez @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login, Utilisez @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, Utilisez @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs.