Supabase Google Login sur Web

Introduction

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

• le Configuration de l'authentification Google Login Web
• la Configuration générale de l'authentification Google Login Supabase.

Mise en œuvre

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

Utilisation de l'assistant d'authentification

Le authenticateWithGoogleSupabase 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);
}

Critique : Gestion des redirections

Critique : Gestion des redirections

Lorsque vous utilisez la connexion Google sur le web, vous DEVEZ appeler toute fonction du plugin lors 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.

Exemple d'implémentation

Ajoutez cela à 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 la section « Comment ça marche » du guide de configuration générale.

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

Lorsque vous utilisez l'authentification Google sur le web, vous devez 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 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 des nonces

La mise en œuvre de nonce suit le modèle de la documentation de l'authentification Google Sign In React Native se rend à Supabase:

• rawNonce Gestion des nonces suit le modèle de la documentation de l'authentification Google Sign In React Native signInWithIdToken()
• Supabase crée une hachure de rawNonce et la compare avec le nonceDigest qui est inclus dans le jeton ID de Google Sign-In
• nonceDigest (hachage SHA-256, encodé en hexadécimal) se trouve dans le nonce paramètre des API de Google Sign-In

Réessayer automatiquement

La mise en œuvre comprend une logique de réessai 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 peuvent avoir des nonces incorrects
• Si la réessai échoue également, une erreur est renvoyée

Résoudre les problèmes

Si l'authentification échoue :

• Le redirigeement ne fonctionne pasAssurez-vous d'appeler isLoggedIn() à l'initialisation du composant (voir l'exemple ci-dessus)
• Audience non valideVérifiez que vos identifiants Client Google correspondent dans les deux Google Cloud Console et Supabase
• URLs de redirigeement autoriséesVérifiez que les URLs de redirigeement 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 jeton: Assurez-vous d'utiliser mode: 'online' dans l'appel d'initialisation pour obtenir un idToken
• Examinez le l'exemple d'application code en tant que référence

Continuez depuis Supabase Google Login sur Web

Supabase Google Login sur Web pour planifier l'authentification et les flux de compte, connectez-l’avec En utilisant @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login, for the native capability in Using @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 dans Authentification à deux facteurs.