Supabase Apple Connexion - Configuration générale

Aperçu

Ce guide vous aidera à intégrer la connexion Apple avec l’authentification Supabase. Apple Sign-In fournit une méthode d’authentification sécurisée et axée sur la confidentialité qui fonctionne sur iOS, Android et les plateformes Web.

Prérequis

Avant de commencer, assurez-vous d’avoir :

1. Créé un projet Supabase

2. Lisez le guide Apple Configuration générale de la connexion pour configurer les informations d’identification Apple OAuth.

3. Suivez les guides spécifiques à la plate-forme respective pour configurer les informations d’identification Apple OAuth pour votre plate-forme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration Web

   Avant de démarrer le didacticiel Supabase, vous devez générer les ID client pour les plates-formes que vous prévoyez d’utiliser.

   Pour iOS, l’ID client est le même que l’ID de votre application. Pour Android et Web, l’ID client est le même que votre ID de service. Vous les utiliserez à l’étape 7 de ce guide.

Activation du fournisseur Apple OAuth dans Supabase

1. Accédez à votre Supabase tableau de bord

2. Cliquez sur votre projet

   

3. Allez dans le menu Authentication

   

4. Cliquez sur l’onglet Providers

   

5. Recherchez le fournisseur Apple

   

6. Activez le fournisseur Apple

   

7. Remplissez la configuration de l’ID client :

   Si vous utilisez la connexion Apple pour iOS, l’ID client est le même que l’ID de votre application. Si vous utilisez la connexion Apple pour Android ou Web, l’ID client est le même que votre ID de service. Si vous utilisez les deux, vous devez fournir à la fois l’ID de l’application et l’ID du service.

   

8. Cliquez sur le bouton Save

   

   Vous N’AVEZ PAS À configurer Secret key (for OAuth). Nous effectuerons une implémentation backend personnalisée pour gérer la connexion Apple.

Voilà, vous avez maintenant activé la connexion Apple avec l’authentification Supabase 🎉

Utilisation de l’assistant d’authentification

L’implémentation complète comprend une fonction d’assistance authenticateWithAppleSupabase() qui gère l’intégralité du flux de connexion Apple avec Supabase. Cette fonction :

• Initialise la connexion Apple avec une configuration spécifique à la plate-forme
• Gère le flux d’authentification (natif sur iOS, redirection OAuth sur Android/Web)
• Extrait le jeton d’identité de Apple
• Se connecte à Supabase avec le jeton d’identité

Mise en œuvre complète

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

Utilisation 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 d’assistance gère automatiquement les différences spécifiques à la plate-forme :- iOS : utilise la connexion native Apple (aucune URL de redirection n’est nécessaire, utilise automatiquement l’ID du bundle)

• Android : utilise le flux de redirection OAuth avec la fonction backend edge (nécessite l’ID de service)
• Web : utilise le flux contextuel OAuth (nécessite l’ID de service et l’URL de la page actuelle comme redirection)

La fonction renvoie un jeton d’identité de Apple, qui est ensuite utilisé pour s’authentifier auprès de Supabase à l’aide de supabase.auth.signInWithIdToken().