Connexion Google via Supabase sur le web

Introduction

Ce guide vous aidera à intégrer Google Sign-In avec Supabase Authentication sur le Web. Nous partons du principe que vous avez déjà terminé :

• l' Configuration de Google Login pour le web
• le Supabase Google Login - Configuration générale.

Implémentation

L'implémentation complète est disponible dans le de l'application d'exemple, supabaseAuthUtils.ts fichier. Ce guide explique les concepts clés et comment l'utiliser.

Utilisation de l'Authentication Helper

Le authenticateWithGoogleSupabase la fonction gère l'intégralité du flux d'authentification :

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 de la redirection

Critique : gestion de la redirection

When using Google login on web, you DEVEZ appeler une fonction du plugin lors de la redirection pour l'initialiser, afin qu'il puisse gérer la redirection et fermer la fenêtre popup. Vous pouvez appeler soit isLoggedIn() SOIT initialize() - les deux déclencheront la gestion de la redirection.

C'est essentiel pour que le flux de la popup OAuth fonctionne correctement.

Exemple d'implémentation

Ajoutez ceci à votre composant qui gère la connexion Google :

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
}

Consultez le SupabasePage.tsx pour un exemple complet.

Comment ça marche

Pour une explication détaillée du flux d'authentification, incluant la génération de nonce, la validation JWT et la connexion Supabase, consultez la section « Comment ça marche » du guide de configuration générale.

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

Voir aussi :

• SupabasePage.tsx - Composant d'exemple avec gestion de la redirection
• SupabaseCreateAccountPage.tsx - Page de création de compte d'exemple

Notes importantes

Gestion de la redirection

When using Google login on web, you DEVEZ appeler n'importe quelle fonction du plugin lors de la redirection pour l'initialiser, afin qu'il puisse gérer la redirection et fermer la fenêtre popup. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclencheront la gestion de la redirection.

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

Gestion du nonce

L'implémentation du nonce suit le modèle de la documentation React Native Google Sign In:

• rawNonce est envoyé à celui de Supabase signInWithIdToken()
• Supabase génère un hash de rawNonce et le compare avec le nonceDigest qui est inclus dans l'ID token de Google Sign-In
• nonceDigest (hash SHA-256, encodé en hex) est envoyé au nonce paramètre des API Google Sign-In

Réessai automatique

L'implémentation inclut une logique de réessai automatique :

• If JWT validation fails on first attempt, it logs out and retries once
• Ceci gère les cas où les tokens mis en cache pourraient avoir des nonces incorrects
• Si le réessai échoue également, une erreur est renvoyée

Troubleshooting

Si l'authentification échoue :

• La redirection ne fonctionne pas: Assurez-vous d'appeler isLoggedIn() lors du montage du composant (voir l'exemple ci-dessus)
• Audience invalide: Vérifiez que vos Google Client IDs correspondent dans la Google Cloud Console et dans Supabase
• URL de redirection autorisées: Vérifiez que les URL de redirection autorisées sont configurées dans la Google Cloud Console et dans Supabase
• Incohérence du nonce: Consultez les logs de la console — la fonction tentera automatiquement de nouveau, mais vous pouvez vous déconnecter manuellement si besoin
• Échec de la validation du token: Assurez-vous d'utiliser mode: 'online' dans l'appel initialize pour obtenir un idToken
• Examinez le exemple code pour référence

Poursuivez avec la connexion Google de Supabase sur le Web

Si vous utilisez Connexion Google via Supabase sur le web pour planifier l'authentification et les flux de compte, et le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.