Supabase Google Login - Configurazione generale

Introduzione

Questa guida ti accompagnerà nell'integrazione di Google Sign-In con Supabase Authentication tramite il plugin Social Login di Capacitor. Questa configurazione ti permette di usare il Google Sign-In nativo sulle piattaforme mobile, sfruttando Supabase Auth per l'autenticazione backend.

Prerequisiti

Prima di iniziare, assicurati di aver:

1. Creato un progetto Supabase

2. Letto la Configurazione generale di Google Login guida per configurare le credenziali Google OAuth

3. Seguito le guide specifiche per la piattaforma per configurare le credenziali Google OAuth sulla tua piattaforma di destinazione:

   • Configurazione Android
   • iOS Setup
   • Web Setup

   Nota

   Prima di iniziare il tutorial di Supabase, devi generare i client ID per le piattaforme che intendi utilizzare. Ti serviranno al passaggio 7 di questa guida.

Abilitare il provider Google OAuth in Supabase

1. Vai alla tua Dashboard di Supabase

2. Clicca sul tuo progetto

   

3. Do go to the Authentication menu

   

4. Clicca sul Providers scheda

   

5. Trova il Google provider

   

6. Abilita il provider

   

7. Aggiungi i client ID per le piattaforme che intendi usare

   

   Nota

   Includi il client ID web, quello iOS e quello Android. Puoi saltarne alcuni, a seconda delle piattaforme che intendi usare.

8. Clicca sul Save pulsante

   

Nota

Tu NON SI DEVE configurare Client Secret (for OAuth) o Callback URL (for OAuth). Alcune fonti potrebbero suggerire di impostare Skip nonce checks per Google su iOS, ma con questa guida non è necessario.

Fatto! Hai abilitato il Google Sign-In con Supabase Authentication 🎉

Come funziona Google Sign-In con Supabase Authentication Helper

Questa sezione spiega come funziona internamente l'integrazione di Google Sign-In con Supabase. Comprendere questo flusso ti aiuterà a implementare e risolvere eventuali problemi nel processo di autenticazione.

Implementazione completa

L'implementazione completa è disponibile in dell'app di esempio supabaseAuthUtils.ts file.

1. Generazione del nonce

L'implementazione genera una coppia di nonce sicura seguendo i requisiti del nonce di Supabase:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Flusso:

• rawNonce: Stringa casuale URL-safe (64 caratteri hex)
• nonceDigest: Hash SHA-256 di rawNonce (codificato in hex)
• nonceDigest viene passata a Google Sign-In → Google include il digest del nonce nell'ID token
• rawNonce viene passata a Supabase → Supabase esegue l'hash del nonce grezzo e lo confronta con il nonce del token

2. Google Sign-In

La funzione inizializza il plugin e effettua il login con Google:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. Validazione JWT

Prima di inviare il token a Supabase, l'implementazione valida il token JWT:

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Perché validare prima di Supabase?

Validare il token JWT prima di inviarlo a Supabase serve a diversi scopi importanti:

1. Prevenire richieste non valide: Se il token ha un audience errato o un nonce mismatch, Supabase lo rifiuterà comunque. Validare prima evita chiamate API inutili e fornisce messaggi di errore più chiari.

2. Problemi di caching del token: Su alcune piattaforme (specialmente iOS), il SDK di Google Sign-In può mettere in cache i token per migliorare le performance. Se viene restituito un token in cache, questo potrebbe essere stato generato con un nonce diverso (o senza alcun nonce), causando il rifiuto del token da parte di Supabase con un errore di “nonce mismatch”. Validando prima dell'invio a Supabase, possiamo rilevare il problema precocemente e riprovare automaticamente con un token nuovo.

3. Sicurezza (iOS): Su iOS, la validazione assicura che il token sia stato emesso per i tuoi specifici Google Client ID, prevenendo potenziali problemi di sicurezza derivanti dall'uso di token destinati ad altre applicazioni.

4. Gestione degli errori miglioreRilevare i problemi prima che Supabase permetta la logica di retry automatico è essenziale per gestire in modo trasparente i problemi di caching su iOS.

Se la validazione fallisce, la funzione:

1. Effettua il logout da Google (pulisce i token in cache - critico su iOS)
2. Riprova l'autenticazione una volta (forza la generazione di un nuovo token con nonce corretto)
3. Se anche il retry fallisce, restituisce un errore

4. Sign-In su Supabase

Infine, il token validato viene inviato a Supabase:

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Riferimento completo Code

L'implementazione completa è disponibile in dell'app di esempio supabaseAuthUtils.ts file, che include:

• getUrlSafeNonce() - Genera un nonce casuale URL-safe
• sha256Hash() - Esegue l'hash della stringa con SHA-256
• getNonce() - Genera una coppia di nonce
• decodeJWT() - Decodifica il token JWT
• validateJWTToken() - Valida l'audience e il nonce del JWT
• authenticateWithGoogleSupabase() - Funzione di autenticazione principale con retry automatico

File di esempio aggiuntivi

• SupabasePage.tsx - Componente di esempio con gestione redirect (Web)
• SupabaseCreateAccountPage.tsx - Esempio pagina di creazione account

Prossimi passi

Consulta la guida alla configurazione specifica per la tua piattaforma:

• Configurazione Android
• iOS Setup
• Web Setup

Continua da Supabase Google Login - Configurazione generale

Se stai usando Supabase Google Login - Configurazione generale per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-social-login per la funzionalità nativa in Utilizzo di @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.