Supabase Apple Login - Paramètres de configuration générale

Aperçu

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

Prérequis

Avant de commencer, assurez-vous d'avoir :

1. Créé un projet Supabase

2. Lu le Guide de configuration Apple Login guide pour configurer les clés d'authentification Apple OAuth

3. Suivi des guides spécifiques à la plateforme pour configurer les clés d'authentification Apple OAuth pour votre plateforme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration Web

   Remarque

   Avant de commencer le tutoriel Supabase, vous devez générer les identifiants clients pour les plateformes que vous prévoyez utiliser.

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

Activer le fournisseur OAuth Apple dans Supabase

1. Allez à votre Tableau de bord Supabase

2. Cliquez sur votre projet

   

3. Allez-y vers le Authentication menu

   

4. Cliquez sur le Providers onglet

   

5. Trouvez le Apple fournisseur

   

6. Activez le Apple fournisseur

   

7. Remplissez la configuration de l'ID du client :

   Remarque

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

   

8. Cliquez sur le Save bouton

   

   Remarque

   Vous N'OUBLIEZ PAS DE setup Secret key (for OAuth)Nous allons mettre en place une mise en œuvre de backend personnalisée pour gérer l'authentification Apple.

Voilà, vous avez maintenant activé l'authentification Apple avec l'authentification Supabase 🎉

Utilisation de l'assistant d'authentification

La mise en œuvre complète comprend une fonction d'aide authenticateWithAppleSupabase() qui gère l'ensemble de la flotte d'authentification Apple avec Supabase. Cette fonction :

• Initialise l'authentification Apple avec une configuration spécifique au plateforme
• Gère la flotte d'authentification (native sur iOS, redirigeant OAuth sur Android/Web)
• Extrait le jeton d'identité d'Apple
• Se connecte à Supabase avec le jeton d'identité

Implémentation complète

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

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'aide gère automatiquement les différences spécifiques à la plateforme :

• iOS: Utilise l'inscription native Apple (pas de URL de redirection nécessaire, utilise automatiquement l'ID de l'application)
• Android: Utilise la redirection OAuth avec une fonction de bord d'edge (exige l'ID de service)
• Web: Utilise la fenêtre popup OAuth (exige l'ID de service et l'URL de la page actuelle comme redirection)

La fonction retourne un jeton d'identité d'Apple, qui est ensuite utilisé pour s'authentifier avec Supabase en utilisant supabase.auth.signInWithIdToken().