Connexion Apple avec Supabase sur le web

Prerequisites

Ce guide vous aidera à intégrer Apple Sign-In avec Supabase Authentication sur le Web. Nous supposons que vous avez déjà terminé :

• la La configuration d'Apple Login pour le Web
• la Connexion Apple via Supabase - configuration générale.

Implémentation

L'implémentation complète est disponible dans le fichier de l'application d'exemple. supabaseAuthUtils.ts Ce guide explique les concepts clés et comment l'utiliser.

Utilisation de l'Authentication Helper

Le authenticateWithAppleSupabase la fonction gère l'intégralité du flux d'authentification :

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

Comment ça marche

Sur le Web, Apple Sign-In utilise un flux OAuth via une popup :

1. Initialisation: Le plugin est initialisé avec votre Service ID et l'URL de la page actuelle comme URL de redirection
2. Popup OAuth: Ouvre une fenêtre popup avec la page OAuth d'Apple
3. Authentification utilisateur: L'utilisateur s'authentifie auprès d'Apple dans la popup
4. Token d'identité: Apple renvoie un token d'identité (JWT) contenant les informations utilisateur
5. Authentification Supabase: Le token d'identité est envoyé à Supabase via signInWithIdToken()

La fonction helper détecte automatiquement la plateforme web et configure tout correctement.

Notes importantes

Configuration du Service ID

• Le web nécessite votre Apple Service ID (identique à Android)
• Le Service ID doit être configuré dans l'Apple Developer Portal avec les bonnes URL de retour
• Assurez-vous que votre domaine est ajouté aux domaines autorisés dans l'Apple Developer Portal

URL de redirection

• Sur le web, l'URL de redirection est automatiquement définie sur window.location.href (l'URL de la page actuelle)
• Cette URL doit correspondre à l'une des Return URLs configurées dans l'Apple Developer Portal
• Assurez-vous que l'URL est configurée avec et sans slash final dans l'Apple Developer Portal

Client ID Supabase

Dans Supabase, configurez votre fournisseur Apple avec :

• ID client: Votre Apple Service ID (ex : com.example.app.service)

Si vous utilisez également iOS, vous devrez renseigner l'App ID et le Service ID dans le champ Client ID de Supabase (séparés par une virgule).

Mettre à jour la fonction helper

Lorsque vous utilisez la authenticateWithAppleSupabase fonction helper, vous devez mettre à jour le clientId pour correspondre à votre 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,
  },
});

Important

Remplacer 'your.service.id.here' avec votre Apple Service ID réel (la même valeur que celle configurée dans le portail Apple Developer).

Troubleshooting

Si l'authentification échoue :

• Incohérence de l'ID de service: Vérifiez que votre Service ID correspond dans le portail Apple Developer et dans votre code
• URL de retour non configurée: Assurez-vous que l'URL de votre page actuelle (avec et sans slash final) est configurée dans le portail Apple Developer
• Popup bloqué: Vérifiez les paramètres du navigateur - certains bloquent les popups par défaut
• Domaine non autorisé: Vérifiez que votre domaine est ajouté aux domaines autorisés dans le portail Apple Developer
• Configuration SupabaseVérifiez que votre Service ID est correctement configuré dans les paramètres du fournisseur Apple de Supabase
• Consultez l’ exemple d’application code pour référence

Continuer avec Supabase Apple Login sur le Web

Si vous utilisez Connexion Apple avec Supabase sur le web pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.