Connexion Apple via Supabase - configuration générale

Aperçu

Ce guide vous aidera à intégrer Apple Sign-In avec Supabase Authentication. Apple Sign-In offre une méthode d'authentification sécurisée et axée sur la confidentialité qui fonctionne sur iOS, Android et le web.

Prerequisites

Avant de commencer, assurez-vous d'avoir :

1. Avoir créé un projet Supabase

2. Lire le Configuration générale d'Apple Login guide pour configurer les identifiants Apple OAuth

3. Avoir suivi les guides de chaque plateforme pour configurer les identifiants Apple OAuth de votre plateforme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration web

   Remarque

   Avant de commencer le tutoriel Supabase, vous devez générer les client IDs pour les plateformes que vous comptez utiliser.

   Pour iOS, le client ID est identique à votre app ID. Pour Android et le Web, le client ID est identique à votre service ID. Vous les utiliserez à l'étape 7 de ce guide.

Activer le fournisseur Apple OAuth dans Supabase

1. Allez dans votre dashboard Supabase

2. Cliquez sur votre projet

   

3. Rendez-vous dans le Authentication menu

   

4. Cliquez sur Providers onglet

   

5. Trouvez le Apple fournisseur

   

6. Activer le Apple fournisseur

   

7. Remplissez la configuration du client ID :

   Remarque

   Si vous utilisez la connexion Apple pour iOS, le client ID est identique à votre app ID. Si vous utilisez la connexion Apple pour Android ou le Web, le client ID est identique à votre service ID. Si vous utilisez les deux, vous devez fournir à la fois l'app ID et le service ID.

   

8. Cliquez sur Save bouton

   

   Remarque

   Vous N'A PAS BESOIN DE configurer Secret key (for OAuth). Nous réaliserons une implémentation backend personnalisée pour gérer la connexion Apple.

Et voilà, vous avez activé Apple Sign-In avec Supabase Authentication 🎉

Utilisation de l'Authentication Helper

L'implémentation complète inclut une fonction utilitaire authenticateWithAppleSupabase() qui gère tout le flux Apple Sign-In avec Supabase. Cette fonction :

• Initialise Apple Sign-In avec la configuration spécifique à la plateforme
• Gère le flux d'authentification (natif sur iOS, redirection OAuth sur Android/Web)
• Extrait l'identity token d'Apple
• Connecte à Supabase avec l'identity token

Implémentation complète

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

Usage de base

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

La fonction helper gère automatiquement les différences selon la plateforme :

• iOS: Utilise le Sign-In natif d'Apple (pas d'URL de redirection nécessaire, utilise automatiquement le bundle ID)
• Android: Utilise le flux de redirection OAuth avec une edge function backend (nécessite un Service ID)
• Le Web: Utilise le flux OAuth par popup (nécessite un Service ID et l'URL de la page actuelle comme redirection)

La fonction renvoie un identity token d'Apple, qui est ensuite utilisé pour s'authentifier auprès de Supabase via supabase.auth.signInWithIdToken().

Continuer depuis Supabase Apple Login - Configuration générale

Si vous utilisez Connexion Apple via Supabase - configuration générale 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.