Supabase Apple Login su Android

Prerequisiti

Questa guida ti aiuterà a integrare Apple Sign-In con Supabase Authentication su Android. Si assume che tu abbia già completato:

• la Supabase Apple Login - Configurazione generale.

Importante

Apple Sign-In su Android richiede un server backend poiché Apple non offre supporto nativo per Android. Utilizzeremo una Supabase Edge Function come backend.

Passo 1: Deploy della Backend Edge Function

Per prima cosa, dobbiamo fare il deploy della Supabase Edge Function che gestirà la callback OAuth di Apple.

1. Vai alla directory del tuo progetto Supabase

   cd your-project/supabase

2. Crea l'edge function (se non esiste)

   supabase functions new apple-signin-callback

3. Copia l'edge function code

   L'implementazione completa dell'edge function è disponibile nell' app di esempio.

   Copia i seguenti file nel tuo progetto:

   • supabase/functions/apple-signin-callback/index.ts - Edge function principale code
   • supabase/functions/apple-signin-callback/deno.json - Import map per le dipendenze (include la jose libreria per la firma JWT)

4. Configura la verifica JWT

   L'endpoint di callback OAuth di Apple deve essere pubblico (senza autenticazione) perché Apple vi reindirizzerà. Aggiorna il tuo supabase/config.toml dell'app:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   Importante

   Impostazione verify_jwt = false rende questo endpoint pubblico. È necessario perché il redirect OAuth di Apple non include gli header di autenticazione di Supabase. L'endpoint valida direttamente il flusso OAuth.

5. Deploy della funzione

   supabase functions deploy apple-signin-callback

6. Ottieni l'URL della funzione

   Dopo il deploy, riceverai un URL come:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Se non riesci a trovarlo, puoi procedere così:

   1. Apri https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Clicca sul apple-signin-callback Copia l'URL tramite questa funzione.

   Salva questo URL

   Ti servirà questo URL nel passaggio successivo per configurare l'Apple Developer Portal.

Passaggio 2: Configura l'Apple Developer Portal

Ora dobbiamo configurare l'Apple Developer Portal con l'URL del backend e ottenere tutti i valori necessari.

URL della funzione

Assicurati di avere l'URL della Supabase Edge Function del Passaggio 1 prima di procedere. Ti servirà per configurare la Return URL nell'Apple Developer Portal.

1. Segui la guida alla configurazione di Apple Login per Android

   Completa la guida Apple Login Android Setup a:

   • Crea un Service ID
   • Genera una chiave privata (file .p8)
   • Recupera il tuo Team ID e Key ID
   • Configura la Return URL

2. Imposta la Return URL nell'Apple Developer Portal

   Quando configuri la Return URL nell'Apple Developer Portal (passaggio 6.9 della guida Apple), usa l'URL della tua Supabase Edge Function:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Importante: usa l'URL della Supabase Edge Function

   NON usare l'URL di redirect della guida Apple Login Android Setup. Quella guida usa un URL di server backend custom. Per l'integrazione con Supabase, devi usare invece l'URL della tua Supabase Edge Function.

   Corrispondenza esatta richiesta

   La Return URL deve corrispondere esattamente a quanto configurato qui. Apple è molto rigorosa sul matching della redirect URI.

3. Raccogli tutti i valori necessari

   Dopo aver completato la guida alla configurazione di Apple, dovresti avere:

   • APPLE_TEAM_ID: Il tuo Apple Developer Team ID
   • APPLE_KEY_ID: Il Key ID dal portale Apple Developer
   • APPLE_PRIVATE_KEY: Il tuo file della chiave privata .p8 (deve essere codificato in base64)
   • ANDROID_SERVICE_ID: Il tuo Apple Service ID (es. com.example.app.service)
   • BASE_REDIRECT_URL: Il tuo URL di deep link (es. capgo-demo-app://path)

   URL del Deep Link

   Il BASE_REDIRECT_URL è lo scheme del deep link configurato nel tuo AndroidManifest.xml. Qui il backend effettuerà il redirect dopo l'autenticazione.

   Il valore del tuo deep link dipende dal android:scheme="capgo-demo-app" code. Se hai impostato android:scheme="capgo-demo-app" nel tuo AndroidManifest.xml, il tuo deep link sarà capgo-demo-app://path.

Passaggio 3: Imposta i Secret di Supabase

Ora dobbiamo configurare le variabili d'ambiente (secrets) per la Supabase Edge Function.

1. Codifica la tua chiave privata

   Per prima cosa, codifica la chiave privata Apple (file .p8) in base64:

   base64 -i AuthKey_XXXXX.p8

   Copia l'intero output (è una stringa singola molto lunga).

2. Imposta i secret usando CLI di Supabase

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Sostituisci i placeholder

   Sostituisci tutti i placeholder con i valori reali ottenuti al passaggio 2.

3. Alternativa: Imposta i secret nella Supabase Dashboard

   Se preferisci usare la dashboard:

   1. Vai alla dashboard del tuo progetto Supabase
   2. Naviga in Edge Functions → Impostazioni → Secrets
   3. Aggiungi ogni variabile secret con il suo valore

Configurazione App Android

Il guida Apple Login Android Setup copre già la configurazione della tua app Android:

• Aggiunta del deep link intent filter a AndroidManifest.xml
• Aggiunta del onNewIntent handler a MainActivity.java

Assicurati di aver completato questi passaggi prima di procedere. Lo scheme del deep link configurato sarà il tuo BASE_REDIRECT_URL nello Step 3.

Passaggio 4: Usa l'Authentication Helper

Ora puoi usare l'authentication helper nella tua app code.

Implementazione

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

Utilizzo dell'Authentication Helper

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Aggiorna la funzione Helper

Quando utilizzi la authenticateWithAppleSupabase helper function, devi devi aggiorna i seguenti valori in base alla tua configurazione:

1. Aggiornamento redirectUrl - Imposta questo valore con l'URL della tua Supabase Edge Function:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. Aggiornamento clientId - Imposta questo valore con il tuo Apple Service ID:

   await SocialLogin.initialize({
     apple: {
       clientId: isIOS
         ? undefined // iOS uses bundle ID automatically
         : 'your.service.id.here', // Your Apple Service ID for Android
       redirectUrl: redirectUrl,
     },
   });

   Importante

   Sostituisci 'your.service.id.here' usando il tuo Apple Service ID (lo stesso valore usato ANDROID_SERVICE_ID nello Step 3).

Guarda il implementazione completa come riferimento.

Passaggio 5: Testa l'integrazione

1. Build e avvio dell'app Android

   npx cap sync android
   npx cap run android

2. Test del flusso di autenticazione

   • Tocca il pulsante “Sign in with Apple”
   • Dovresti vedere la pagina OAuth di Apple nel browser
   • Dopo l'autenticazione, verrai reindirizzato alla tua app
   • Controlla i log della console per eventuali errori

3. Verifica il flusso

   Il flusso completo dovrebbe essere:

   1. L'utente tocca “Sign in with Apple”
   2. L'app apre il browser con Apple OAuth
   3. L'utente si autentica con Apple
   4. Apple reindirizza a: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. L'Edge function scambia code con i token
   6. L'Edge function reindirizza a: your-app://path?id_token=...&access_token=...
   7. L'app Android riceve il deep link e processa l'identity token
   8. L'app effettua il login su Supabase con l'identity token

Risoluzione problemi

Se l'autenticazione fallisce:

• Mismatch dell'URI di redirect: Verifica che la Return URL nel portale Apple Developer corrisponda esattamente a APPLE_REDIRECT_URI secret
• Deep link non funzionante: Controlla che AndroidManifest.xml l'intent filter corrisponda al tuo BASE_REDIRECT_URL
• Secret mancanti: Verifica che tutti i secret siano impostati correttamente usando supabase secrets list
• Token exchange fallitoControlla i log delle edge function nel dashboard di Supabase per messaggi di errore dettagliati
• L'app non riceve il callback: Assicurati che onNewIntent sia implementato correttamente in MainActivity
• Consulta l' app di esempio code come riferimento

Come funziona

Su Android, Apple Sign-In utilizza un flusso di redirect OAuth:

1. Inizializzazione: Il plugin viene inizializzato con il tuo Service ID e l'URL di redirect del backend
2. Flusso OAuth: Apre un browser/Chrome Custom Tab sulla pagina OAuth di Apple
3. Callback del Backend: Apple reindirizza alla tua Supabase Edge Function con un code di autorizzazione
4. Scambio del token: l'edge function scambia il code per ottenere i token tramite l'endpoint token di Apple
5. Redirect tramite Deep Link: l'edge function reindirizza alla tua app con l'identity token
6. Autenticazione Supabase: l'app riceve il token ed effettua il login su Supabase

Questo flusso è necessario perché Apple non offre il supporto nativo per Sign in with Apple su Android.

Continua con Supabase Apple Login su Android

Se stai usando Supabase Apple Login su Android 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.