Introduzione all'integrazione con Supabase

Panoramica

Questo tutorial ti guiderà nella configurazione dell'autenticazione Supabase con il plugin Capacitor Social Login. Questa integrazione ti consente di utilizzare i provider di social login nativi (Google, Apple, Facebook, Twitter) sulle piattaforme mobili, sfruttando Supabase Auth per l'autenticazione backend e PostgreSQL per l'archiviazione dei dati.

Cosa imparerai

• Come configurare l'autenticazione Supabase
• Come integrare il plugin Capacitor Social Login con Supabase Auth
• Configurazione specifica per Android, iOS e Web
• Come gestire i nonce in modo sicuro per Supabase

Cosa ti serve

Prima di iniziare, assicurati di avere:

1. Un progetto Supabase

   • Crea un progetto su Dashboard di Supabase
   • Abilita il provider Google OAuth
   • Ottieni l'URL del progetto Supabase e la chiave anon

2. Supabase JS SDK

   • Installa Supabase nel tuo progetto:

     npm install @supabase/supabase-js

3. Un progetto Capacitor

   • Un'applicazione Capacitor esistente
   • Plugin Capacitor Social Login installato:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Configurazione Google specifica per piattaforma

   • Completa la configurazione di Google Sign-In per le piattaforme di destinazione:
     • Configurazione Google Login per Android
     • Configurazione Google Login per iOS
     • Configurazione Web di Google Login

Applicazione di esempio

Un esempio completo e funzionante è disponibile nel repository:

Repository Code: Puoi trovare il repository code qui

L'app di esempio mostra:

• Autenticazione email/password con Supabase
• Integrazione Google Sign-In (Android, iOS e Web)
• Un semplice key-value store usando tabelle PostgreSQL di Supabase
• Archiviazione di dati specifici per utente con Row Level Security (RLS)

Dettagli chiave dell'implementazione

Gestione del nonce

Supabase richiede una gestione speciale del nonce per motivi di sicurezza. L'implementazione segue il documentazione di React Native Google Sign In:

• Genera una rawNonce (stringa casuale URL-safe)
• Calcolane l'hash con SHA-256 per ottenere nonceDigest
• Passa nonceDigest a Google Sign-In
• Passa rawNonce a Supabase (Supabase ne calcola l'hash internamente per il confronto)

Validazione JWT

L'implementazione di esempio include la validazione JWT per garantire che:

• l'audience del token corrisponda ai tuoi Google Client ID configurati
• il nonce corrisponda al digest atteso
• Ritenta automatico in caso di errore di validazione (particolarmente importante per iOS)

Considerazioni specifiche per piattaforma

• iOS: la cache dei token può causare problemi con il nonce - l'implementazione gestisce questo automaticamente
• Web: Deve chiamare isLoggedIn() al mount per gestire i redirect OAuth
• Android: Implementazione standard con configurazione SHA-1 fingerprint

Prossimi passi

Continua con le guide di configurazione:

• Supabase Google Login - Configurazione generale - Panoramica e prerequisiti
• Configurazione Android - Configurazione specifica per Android
• Setup iOS - Configurazione specifica per iOS
• Setup Web - Configurazione specifica per Web

Accedi con Apple

• Supabase Apple Login - Configurazione generale - Panoramica e prerequisiti
• Setup iOS - Configurazione specifica per iOS
• Configurazione Android - Configurazione specifica per Android

Continua da Introduzione all'integrazione di Supabase

Se stai usando Introduzione all'integrazione con Supabase 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.