Supabase Google Login sur Web

Introduction

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

• le Configuration de connexion Google Web
• the Connexion Google Supabase - Configuration Générale.

Mise en œuvre

La mise en œuvre complète est disponible dans le l'application d'exemple supabaseAuthUtils.ts Ce guide explique les principaux concepts et comment l'utiliser.

Sous-section intitulée « Utilisation de l'Aide à l'authentification »

The authenticateWithGoogleSupabase La fonction gère l'ensemble 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);
}

Important : Gestion de la redirection

Important : Gestion de la redirection

When using Google login on web, you 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 cela à votre composant qui gère l'authentification 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 de la façon dont le flux d'authentification fonctionne, y compris la génération de nonce, la validation de JWT et l'authentification Supabase, voir la section « Comment ça marche » du guide de configuration générale.

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

Voir également :

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

Notes importantes

Gestion de redirection

When using Google login on web, you DEVEZ appeler toute fonction du plugin lors de l'arrivée de la redirection 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éclenchent 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 de Nonce

La mise en œuvre de la nonce suit le modèle du Documentation de connexion Google pour React Native:

• rawNonce Supabase fait une hachage de signInWithIdToken()
• et le compare avec le rawNonce et le compare avec le nonceDigest (hachage SHA-256, encodé en hexadécimal) va à la
• nonceDigest paramètre dans les API d'inscription Google Sign-In nonce paramètre dans les API d'authentification Google

Réessai Automatique

La mise en œuvre inclut une logique de relecture 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 stockés dans la cache ont des nonces incorrectes
• Si le réessai échoue également, une erreur est renvoyée

Troubleshooting

Si l'authentification échoue :

• Redirection non fonctionnelle : Assurez-vous d'appeler isLoggedIn() à l'initialisation du composant (voir exemple ci-dessus)
• Audience non valideVérifiez que vos identifiants Client Google correspondent dans les deux Google Cloud Console et Supabase
• URLs de redirection autoriséesVérifiez que les URLs de redirection autorisées sont configurées dans les deux Google Cloud Console et Supabase
• Mauvais nonceVé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 jetonAssurez-vous d'utiliser mode: 'online' l'initialisation de l'appel pour obtenir un idToken
• Examinez l' exemple d'application code en référence

Continuez de Supabase Google Login sur Web

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