Connexion Supabase Google sur le Web

Introduction

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

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

L'implémentation

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 Utilisation de l'Aideur d'Authentification

Section intitulée « Utilisation de l'Aideur d'Authentification »

fonction gère l'ensemble du flux d'authentification : authenticateWithGoogleSupabase Copier dans le presse-papier

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

Section intitulée « Critique : Gestion des redirigements »

Section intitulée « Critique : Gestion des redirigements »

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

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

Exemple d'implémentation

Ajoutez cela à votre composant qui gère Google Sign-In :

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 section Comment ça marche du guide de configuration générale.

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

Voir aussi :

• SupabasePage.tsx - Composant d'exemple avec gestion de redirection
• SupabaseCreateAccountPage.tsx - Page d'exemple d'inscription

Remarques importantes

Gestion des redirections

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

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 React Native Google Sign In se rend à Supabase’s:

• rawNonce Supabase fait une hache de signInWithIdToken()
• et la compare avec le rawNonce qui est inclus dans le jeton d'ID de Google Sign-In nonceDigest (hachage SHA-256, encodé en hexadécimal) se rend au
• nonceDigest paramètre dans les API de Google Sign-In nonce Réessayer automatiquement

Section intitulée « Réessayer automatiquement »

Si la validation de JWT échoue à la première tentative, il se déconnecte et réessaye une fois

• __CAPGO_KEEP_0__
• Cela gère les cas où les jetons stockés peuvent avoir des nonces incorrectes
• Si la réessayer échoue également, une erreur est renvoyée

Dépannage

Si l'authentification échoue :

• Le redirigeement ne fonctionne pas : Assurez-vous d'appeler isLoggedIn() à la montée du composant (voir l'exemple ci-dessus)
• Audience non valide : Vérifiez que vos identifiants Client Google correspondent dans les deux Google Cloud Console et Supabase
• URLs de redirigeement autorisées : Vérifiez que les URLs de redirigeement autorisées sont configurées dans les deux Google Cloud Console et Supabase
• Mauvaise correspondance de nonce: Vé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
• Vérifiez l'application d'exemple __CAPGO_KEEP_0__ example app code Page d'édition