Accesso Apple Supabase - Configurazione Generale

Panoramica

Questa guida ti aiuterà a integrare Apple Sign-In con l’autenticazione Supabase. Apple Sign-In fornisce un metodo di autenticazione sicuro e incentrato sulla privacy che funziona su piattaforme iOS, Android e Web.

Prerequisiti

Prima di iniziare, assicurati di avere:

1. Creato un progetto Supabase

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

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

   • Configurazione Android
   • Configurazione iOS
   • Configurazione Web

   Note

   Prima di iniziare il tutorial Supabase, è necessario generare gli ID client per le piattaforme che intendi utilizzare.

   Per iOS, l’ID client è lo stesso dell’ID app. Per Android e Web, l’ID client è lo stesso dell’ID servizio. Li utilizzerai al passaggio 7 di questa guida.

Abilitazione del provider OAuth di Apple in Supabase

1. Vai al tuo Dashboard Supabase

2. Fai clic sul tuo progetto

   

3. Vai al menu Autenticazione

   

4. Fai clic sulla scheda Provider

   

5. Trova il provider Apple

   

6. Abilita il provider Apple

   

7. Compila la configurazione dell’ID client:

   Note

   Se stai utilizzando Apple login per iOS, l’ID client è lo stesso dell’ID app. Se stai utilizzando Apple login per Android o Web, l’ID client è lo stesso dell’ID servizio. Se stai utilizzando entrambi, devi fornire sia l’ID app che l’ID servizio.

   

8. Fai clic sul pulsante Salva

   

   Note

   NON È NECESSARIO configurare Chiave segreta (per OAuth). Faremo un’implementazione backend personalizzata per gestire l’accesso Apple.

Voilà, ora hai abilitato Apple Sign-In con l’autenticazione Supabase!

Utilizzo dell’helper di autenticazione

L’implementazione completa include una funzione helper authenticateWithAppleSupabase() che gestisce l’intero flusso di Apple Sign-In con Supabase. Questa funzione:

• Inizializza Apple Sign-In con configurazione specifica della piattaforma
• Gestisce il flusso di autenticazione (nativo su iOS, reindirizzamento OAuth su Android/Web)
• Estrae il token di identità da Apple
• Accede a Supabase con il token di identità

Implementazione completa

L’implementazione completa è disponibile nel file supabaseAuthUtils.ts dell’app di esempio.

Utilizzo di base

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Accesso effettuato:', result.user);
  // Naviga verso la tua area autenticata
} else {
  console.error('Errore:', result.error);
}

Come funziona

La funzione helper gestisce automaticamente le differenze specifiche della piattaforma:

• iOS: Utilizza Apple Sign-In nativo (non è necessario l’URL di reindirizzamento, utilizza automaticamente l’ID del bundle)
• Android: Utilizza il flusso di reindirizzamento OAuth con funzione edge backend (richiede l’ID servizio)
• Web: Utilizza il flusso popup OAuth (richiede l’ID servizio e l’URL della pagina corrente come reindirizzamento)

La funzione restituisce un token di identità da Apple, che viene quindi utilizzato per autenticarsi con Supabase utilizzando supabase.auth.signInWithIdToken().