Connexion Apple avec Supabase sur Android

Prerequisites

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

• la Connexion Apple via Supabase - configuration générale.

Important

Apple Sign-In sur Android nécessite un serveur backend car Apple ne propose pas de support natif pour Android. Nous utiliserons une Supabase Edge Function comme backend.

Étape 1 : déployer l'Edge Function backend

Nous devons d'abord déployer la Supabase Edge Function qui gérera le callback OAuth d'Apple.

1. Accédez au répertoire de votre projet Supabase

   cd your-project/supabase

2. Créez l'edge function (si elle n'existe pas)

   supabase functions new apple-signin-callback

3. Copier l'edge function code

   L'implémentation complète de l'edge function est disponible dans l' application exemple.

   Copiez les fichiers suivants dans votre projet :

   • supabase/functions/apple-signin-callback/index.ts - Edge function principale code
   • supabase/functions/apple-signin-callback/deno.json - Import map pour les dépendances (inclut la jose bibliothèque pour la signature JWT)

4. Configurer la vérification JWT

   L'endpoint de callback OAuth d'Apple doit être public (aucune authentification requise) car Apple redirigera vers lui. Mettez à jour votre supabase/config.toml fichier :

   [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"

   Important

   Paramètre verify_jwt = false rend cet endpoint public. C'est nécessaire car la redirection OAuth d'Apple n'inclut pas les headers d'authentification Supabase. L'endpoint valide le flux OAuth lui-même.

5. Déployer la fonction

   supabase functions deploy apple-signin-callback

6. Récupérer l'URL de votre fonction

   Après le déploiement, vous obtiendrez une URL comme :

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

   Si vous ne la trouvez pas, vous pouvez procéder ainsi :

   1. Ouvrez https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Cliquez sur apple-signin-callback URL de la fonction pour la copier.

   Enregistrer cette URL

   Vous aurez besoin de cette URL à l'étape suivante lors de la configuration du portail Apple Developer.

Étape 2 : Configurer le portail Apple Developer

Nous devons maintenant configurer le portail Apple Developer avec l'URL du backend et récupérer toutes les valeurs requises.

URL de la fonction

Assurez-vous d'avoir l'URL de votre Supabase Edge Function de l'étape 1 avant de continuer. Vous en aurez besoin pour configurer l'URL de retour dans le portail Apple Developer.

1. Suivez le guide de configuration Apple Login pour Android

   Terminez la guide de configuration Apple Login pour Android pour :

   • Créer un Service ID
   • Générer une clé privée (fichier .p8)
   • Récupérer votre Team ID et votre Key ID
   • Configurer l'URL de retour

2. Définir l'URL de retour dans le portail Apple Developer

   Lors de la configuration de l'URL de retour dans le portail Apple Developer (étape 6.9 du guide Apple), utilisez l'URL de votre Supabase Edge Function :

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

   Important : utilisez l'URL de la Supabase Edge Function

   N'utilisez PAS l'URL de redirection du guide de configuration Apple Login pour Android. Ce guide utilise l'URL d'un serveur backend personnalisé. Pour l'intégration avec Supabase, vous devez utiliser l'URL de votre Supabase Edge Function à la place.

   Correspondance exacte requise

   L'URL de retour doit correspondre exactement ce que vous configurez ici. Apple est très strict sur la correspondance de l'URI de redirection.

3. Récupérez toutes les valeurs requises

   Après avoir suivi le guide de configuration Apple, vous devriez avoir :

   • APPLE_TEAM_ID: Votre Apple Developer Team ID
   • APPLE_KEY_ID: Le Key ID du portail Apple Developer
   • APPLE_PRIVATE_KEY: Votre fichier de clé privée .p8 (doit être encodé en base64)
   • ANDROID_SERVICE_ID: Votre Apple Service ID (ex : com.example.app.service)
   • BASE_REDIRECT_URL: Votre URL de deep link (ex : capgo-demo-app://path)

   URL de deep link

   Le BASE_REDIRECT_URL est le schéma de deep link configuré dans votre AndroidManifest.xml. C'est ici que le backend redirigera après l'authentification.

   La valeur de votre deep link dépend du android:scheme="capgo-demo-app" code. Si vous avez défini android:scheme="capgo-demo-app" dans votre AndroidManifest.xml, alors votre deep link sera capgo-demo-app://path.

Étape 3 : Définir les secrets Supabase

Nous devons maintenant configurer les variables d'environnement (secrets) pour la Supabase Edge Function.

1. Encoder votre clé privée

   Tout d'abord, encodez votre clé privée Apple (fichier .p8) en base64 :

   base64 -i AuthKey_XXXXX.p8

   Copiez l'intégralité du résultat (il s'agit d'une seule longue chaîne).

2. Configurez les secrets via CLI de 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

   Remplacer les placeholders

   Remplacez toutes les valeurs de placeholder par vos propres valeurs obtenues à l'étape 2.

3. Alternative : Configurer les secrets dans le dashboard Supabase

   Si vous préférez utiliser le dashboard :

   1. Allez sur le dashboard de votre projet Supabase
   2. Accédez à Edge Functions → Paramètres → Secrets
   3. Ajoutez chaque variable secrète avec sa valeur

Configuration de l'application Android

Le guide de configuration Apple Login pour Android couvre déjà la configuration de votre application Android :

• Ajout du filtre d'intent pour le deep link à AndroidManifest.xml
• Ajout du onNewIntent handler à MainActivity.java

Assurez-vous d'avoir terminé ces étapes avant de continuer. Le schéma de deep link que vous configurez ici sera votre BASE_REDIRECT_URL à l'étape 3.

Étape 4 : Utiliser l'Authentication Helper

Vous pouvez maintenant utiliser l'Authentication Helper dans votre app code.

Implémentation

L'implémentation complète est disponible dans le fichier de l'application d'exemple. supabaseAuthUtils.ts fichier.

Utilisation de l'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);
}

Mettre à jour la fonction helper

Lorsque vous utilisez la authenticateWithAppleSupabase fonction helper, vous devez devez mettre à jour les valeurs suivantes selon votre configuration :

1. Mise à jour redirectUrl - Définissez ceci sur l'URL de votre Supabase Edge Function :

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

2. Mise à jour clientId - Définissez ce champ sur 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 Android
       redirectUrl: redirectUrl,
     },
   });

   Important

   Remplacer 'your.service.id.here' avec votre véritable Apple Service ID (la même valeur que celle utilisée ANDROID_SERVICE_ID à l'étape 3).

Consultez le implémentation complète pour référence.

Étape 5 : Tester l'intégration

1. Compiler et lancer votre application Android

   npx cap sync android
   npx cap run android

2. Tester le flux d'authentification

   • Appuyer sur le bouton « Sign in with Apple »
   • La page OAuth d'Apple devrait s'afficher dans un navigateur
   • Après l'authentification, vous devriez être redirigé vers votre application
   • Check the console logs for any errors

3. Vérifier le flux

   Le flux complet devrait être :

   1. L'utilisateur appuie sur « Sign in with Apple »
   2. L'app ouvre le navigateur avec l'OAuth Apple
   3. L'utilisateur s'authentifie auprès d'Apple
   4. Apple redirige vers : https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. L'Edge function échange code contre des tokens
   6. L'Edge function redirige vers : your-app://path?id_token=...&access_token=...
   7. L'app Android reçoit le deep link et traite l'identity token
   8. L'app se connecte à Supabase avec l'identity token

Troubleshooting

Si l'authentification échoue :

• Redirect URI incorrect: Vérifiez que l'URL de retour dans le portail Apple Developer correspond exactement à APPLE_REDIRECT_URI secret
• Le deep link ne fonctionne pas: Vérifiez que AndroidManifest.xml l'intent filter correspond à votre BASE_REDIRECT_URL
• Secrets manquants: Vérifiez que tous les secrets sont correctement configurés avec supabase secrets list
• L'échange de token échoueConsultez les logs des edge functions dans le dashboard Supabase pour des messages d'erreur détaillés
• L'application ne reçoit pas le callback: Ensure onNewIntent est correctement implémenté dans MainActivity
• Consultez l’ exemple d’application code pour référence

Comment ça marche

Sur Android, Apple Sign-In utilise un flux de redirection OAuth :

1. Initialisation: Le plugin est initialisé avec votre Service ID et l'URL de redirection backend
2. Flux OAuth: Ouvre un navigateur/Chrome Custom Tab vers la page OAuth d'Apple
3. Callback backend: Apple redirige vers votre Supabase Edge Function avec un code d'autorisation
4. Échange de token: L'edge function échange le code contre des tokens via l'endpoint de token d'Apple
5. Redirection par deep link: L'edge function redirige vers votre application avec l'identity token
6. Authentification Supabase: L'application reçoit le token et se connecte à Supabase

Ce flux est nécessaire car Apple ne propose pas de support natif Android pour Sign in with Apple.

Continuer depuis Supabase Apple Login sur Android

Si vous utilisez Connexion Apple avec Supabase sur Android 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.