Supabase Apple Login sul Web

Prerequisiti

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

• la Configurazione di Apple Login Web
• la Supabase Apple 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

Il authenticateWithAppleSupabase gestisce l'intero flusso di autenticazione:

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

Come funziona

Sul web, Apple Sign-In utilizza un flusso OAuth tramite popup:

1. Inizializzazione: Il plugin viene inizializzato con il tuo Service ID e l'URL della pagina corrente come redirect URL
2. Popup OAuth: Apre una finestra popup con la pagina OAuth di Apple
3. Autenticazione utente: L'utente si autentica con Apple nel popup
4. Identity token: Apple restituisce un identity token (JWT) contenente le informazioni dell'utente
5. Autenticazione Supabase: L'identity token viene inviato a Supabase tramite signInWithIdToken()

La funzione helper rileva automaticamente la piattaforma web e configura tutto correttamente.

Note importanti

Configurazione Service ID

• Il web richiede il tuo Apple Service ID (uguale ad Android)
• Il Service ID deve essere configurato nell'Apple Developer Portal con i corretti Return URLs
• Assicurati che il tuo dominio sia aggiunto tra i domini consentiti nell'Apple Developer Portal

URL di redirect

• Sul web, la redirect URL viene impostata automaticamente su window.location.href (URL della pagina corrente)
• Deve corrispondere a uno dei Return URL configurati nell'Apple Developer Portal
• Assicurati che nell'Apple Developer Portal siano configurati sia l'URL con che senza slash finale

ID Client Supabase

In Supabase, configura il provider Apple con:

• ID Client: Il tuo Apple Service ID (es. com.example.app.service)

Se usi anche iOS, dovrai inserire sia l'App ID che il Service ID nel campo Client ID di Supabase (separati da virgola).

Aggiorna la funzione Helper

Quando utilizzi la authenticateWithAppleSupabase helper function, devi devi aggiorna il clientId 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 Web and Android
    redirectUrl: redirectUrl,
  },
});

Importante

Sostituisci 'your.service.id.here' con il tuo Apple Service ID effettivo (lo stesso valore configurato nel portale Apple Developer).

Risoluzione problemi

Se l'autenticazione fallisce:

• Service ID non corrispondente: Verifica che il Service ID corrisponda sia nell'Apple Developer Portal che nel tuo code
• URL di ritorno non configurato: Assicurati che l'URL della pagina corrente (con e senza slash finale) sia configurato nell'Apple Developer Portal
• Popup bloccato: Controlla le impostazioni del browser: alcuni browser bloccano i popup di default
• Dominio non consentito: Verifica che il tuo dominio sia stato aggiunto ai domini consentiti nell'Apple Developer Portal
• Configurazione Supabase: Verifica che il Service ID sia configurato correttamente nelle impostazioni del provider Apple di Supabase
• Consulta l' app di esempio code come riferimento

Continua da Supabase Apple Login sul Web

Se stai usando Supabase Apple Login sul Web 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.