Supabase Google Login sur Web

Introduction

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

• le setup de connexion Google Web
• le setup général de connexion Google Supabase.

Implementation

La mise en œuvre complète est disponible dans le fichier de l'application d'exemple. Cette guide explique les concepts clés et comment l'utiliser. supabaseAuthUtils.ts __CAPGO_KEEP_0__

Utiliser l'assistant d'authentification

Le 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 du redirigeement

Important : Gestion du redirigeement

Lors de l'utilisation de la connexion Google sur le web, vous DEVEZ appeler toute fonction du plugin lorsque le redirigeement se produit pour initialiser le plugin afin qu'il puisse gérer le redirigeement et fermer la fenêtre de popup. Vous pouvez appeler soit isLoggedIn() OU initialize() - Les deux déclencheront le traitement de la redirection.

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

Exemple d'implémentation

Ajoutez ceci à votre composant qui gère l'inscription 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'inscription Supabase, voir le La section Fonctionnement dans le guide de configuration générale.

Pour la référence complète code, voir la La section Référence complète Code dans le 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

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

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

Gestion du Nonce

La mise en œuvre du nonce suit le modèle du documentation de l'inscription Google Sign In React Native:

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

Réessayage automatique

La mise en œuvre inclut une logique de réessayage automatique :

• Si la validation du JWT échoue à la première tentative, il 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 le réessayage échoue également, une erreur est renvoyée

Diagnostics

If l'authentification échoue :

• La redirection ne fonctionne pas : Assurez-vous d'appeler isLoggedIn() à la montée du composant (voir l'exemple ci-dessus)
• Audience non valide : Vérifiez que les 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 en premier si nécessaire
• La validation du jeton échoue : Assurez-vous d'utiliser mode: 'online' pour obtenir un idToken lors d'une initialisation
• Vérifiez le exemplaire 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-le avec En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login Détails d'implémentation pour @capgo/capacitor-login-social @capgo/capacitor-passkey Détails d'implémentation pour @capgo/capacitor-passkey @capgo/capacitor-biométrique-natif Détails d'implémentation pour @capgo/capacitor-biométrique-natif, et L'authentification à deux facteurs Détails d'implémentation pour L'authentification à deux facteurs.