Supabase Google Connexion sur le Web

##Présentation

Ce guide vous aidera à intégrer la connexion Google avec l’authentification Supabase sur le Web. On suppose que vous avez déjà complété :

• la Google Configuration Web de connexion
• le Supabase Google Connexion - Configuration générale.

Implémentation

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

Utilisation de l’assistant d’authentification

La fonction authenticateWithGoogleSupabase 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 des redirections

Critique : gestion des redirections

Lorsque vous utilisez la connexion Google sur le Web, vous ** DEVEZ ** appeler n’importe quelle 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 contextuelle. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclencheront la gestion de la redirection.

Ceci est essentiel pour que le flux contextuel 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
}

Voir le SupabasePage.tsx pour un exemple complet.

Comment ça marche

Pour une explication détaillée du fonctionnement du flux d’authentification, y compris la génération de noms occasionnels, la validation JWT et la connexion Supabase, consultez la section Comment ça marche dans le guide de configuration générale.

Pour la référence complète du code, consultez la [section Référence complète du code dans le guide de configuration générale] (/docs/plugins/social-login/supabase/google/general/#complete-code-reference).

Voir aussi :

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

Remarques importantes

Gestion des redirections

Lorsque vous utilisez la connexion Google sur le Web, vous ** DEVEZ ** appeler n’importe quelle 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 contextuelle. Vous pouvez appeler soit isLoggedIn() OU initialize() - les deux déclencheront la gestion de la redirection.

Ceci est essentiel pour que le flux contextuel OAuth fonctionne correctement. Sans cela, la fenêtre contextuelle ne se fermera pas après l’authentification.

Gestion des cas occasionnels

L’implémentation du nonce suit le modèle de la documentation de connexion React Native Google :

• rawNonce va au signInWithIdToken() de Supabase
• Supabase crée un hachage de rawNonce et le compare avec le nonceDigest qui est inclus dans le jeton d’identification de Google Connexion
• nonceDigest (hachage SHA-256, encodé en hexadécimal) va au paramètre nonce dans les API de connexion Google

Nouvelle tentative automatique

L’implémentation inclut une logique de nouvelle tentative automatique :

• Si la validation JWT échoue à la première tentative, elle se déconnecte et réessaye une fois
• Cela gère les cas où les jetons mis en cache peuvent avoir des noms occasionnels incorrects
• Si la nouvelle tentative échoue également, une erreur est renvoyée

Dépannage

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 non valide : vérifiez que vos ID client Google correspondent à la fois dans Google Cloud Console et dans Supabase.
• URL de redirection autorisées : vérifiez que les URL de redirection autorisées sont configurées à la fois dans Google Cloud Console et Supabase.
• Incompatibilité occasionnelle : vérifiez les journaux de la console - la fonction réessayera automatiquement, mais vous pouvez d’abord vous déconnecter manuellement si nécessaire
• La validation du jeton échoue : assurez-vous d’utiliser mode: 'online' dans l’appel d’initialisation pour obtenir un idToken
• Consultez l’exemple de code d’application pour référence.