Supabase Google Login su Web

Introduzione

Questa guida ti aiuterà a integrare Google Sign-In con Supabase Authentication sul Web. Si assume che tu abbia già completato:

• la Configurazione Google Login Web
• la Supabase Google Login - Configurazione generale.

Implementazione

L'implementazione completa è disponibile in dell'app di esempio supabaseAuthUtils.ts file. Questa guida spiega i concetti chiave e come usarlo.

Utilizzo dell'Authentication Helper

La authenticateWithGoogleSupabase function gestisce l'intero flusso di autenticazione:

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

Critico: Gestione del Redirect

Critico: Gestione del Redirect

Quando usi il login di Google sul web, devi CHIAMARE qualsiasi funzione del plugin al momento del redirect per inizializzarlo, permettendogli di gestire il redirect e chiudere la finestra popup. Puoi chiamare isLoggedIn() OPPURE initialize() - entrambi attiveranno la gestione del redirect.

Questo è essenziale per il corretto funzionamento del flusso popup OAuth.

Esempio di Implementazione

Aggiungi questo al componente che gestisce il 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
}

Vedi SupabasePage.tsx per un esempio completo.

Come funziona

Per una spiegazione dettagliata del flusso di autenticazione, inclusa la generazione del nonce, la validazione JWT e il sign-in con Supabase, consulta la sezione Come funziona nella guida alla configurazione generale.

Per il riferimento completo a code, consulta la sezione Riferimento completo Code nella guida alla configurazione generale.

Vedi anche:

• SupabasePage.tsx - Componente di esempio con gestione redirect
• SupabaseCreateAccountPage.tsx - Pagina di esempio per la creazione dell'account

Note Importanti

Gestione del Redirect

Quando usi il login con Google sul web, devi CHIAMARE qualsiasi funzione del plugin al momento del redirect per inizializzarlo, permettendogli di gestire il redirect e chiudere la finestra popup. Puoi chiamare isLoggedIn() OPPURE initialize() - entrambi attiveranno la gestione del redirect.

Questo è fondamentale per il corretto funzionamento del popup OAuth. Senza questo, la finestra popup non si chiuderà dopo l'autenticazione.

Gestione del Nonce

L'implementazione del nonce segue il pattern della documentazione di React Native Google Sign In:

• rawNonce viene inviato a Supabase signInWithIdToken()
• Supabase crea un hash di rawNonce e lo confronta con il nonceDigest che è incluso nell'ID token di Google Sign-In
• nonceDigest (hash SHA-256, hex-encoded) viene inviato al nonce parametro nelle API di Google Sign-In

Riprova automatica

L'implementazione include una logica di retry automatico:

• Se la validazione del JWT fallisce al primo tentativo, effettua il logout e riprova una volta
• Gestisce i casi in cui i token in cache potrebbero avere nonce errati
• Se anche il retry fallisce, viene restituito un errore

Risoluzione problemi

Se l'autenticazione fallisce:

• Il redirect non funziona: Assicurati di chiamare isLoggedIn() al montaggio del componente (vedi l'esempio sopra)
• Audience non valida: Verifica che i Google Client ID corrispondano in Google Cloud Console e Supabase
• URL di redirect autorizzati: Controlla che gli URL di redirect autorizzati siano configurati sia in Google Cloud Console che in Supabase
• Errore di mismatch del nonce: Controlla i log della console - la funzione riproverà automaticamente, ma puoi fare logout manualmente se necessario
• Validazione del token fallita: Assicurati di usare mode: 'online' nella chiamata initialize per ottenere un idToken
• Consulta l' app di esempio code come riferimento

Continua con il login di Supabase Google su Web

Se stai usando Supabase Google Login su Web per pianificare i flussi di autenticazione e account, connetterlo con Usando @capgo/capacitor-social-login per la funzionalità nativa in Usando @capgo/capacitor-social-login, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.