Introduction à l'intégration Supabase

Aperçu

Ce tutoriel vous guidera dans la configuration de l'authentification Supabase avec le plugin Social Login de Capacitor. Cette intégration vous permet d'utiliser les fournisseurs de social login natifs (Google, Apple, Facebook, Twitter) sur les plateformes mobiles, tout en exploitant Supabase Auth pour l'authentification backend et PostgreSQL pour le stockage des données.

Ce que vous allez apprendre

• Comment configurer l'authentification Supabase
• Comment intégrer le plugin Capacitor Social Login avec Supabase Auth
• Configuration spécifique par plateforme pour Android, iOS et le Web
• Comment gérer les nonces en toute sécurité pour Supabase

Ce dont vous aurez besoin

Avant de commencer, assurez-vous d'avoir :

1. Un projet Supabase

   • Créez un projet sur Dashboard Supabase
   • Activer le fournisseur Google OAuth
   • Récupérer l'URL de votre projet Supabase et la clé anon

2. SDK JS pour Supabase

   • Installez Supabase dans votre projet :

     npm install @supabase/supabase-js

3. Un projet Capacitor

   • Une application Capacitor existante
   • Le plugin Capacitor Social Login installé :

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Configuration Google selon la plateforme

   • Terminez la configuration de Google Sign-In pour vos plateformes cibles :
     • Configuration Google Login pour Android
     • Configuration Google Login pour iOS
     • Configuration Web de Google Login

Application d'exemple

Un exemple complet et fonctionnel est disponible dans le dépôt :

Code Repository: Vous pouvez trouver le dépôt code ici

L'application d'exemple démontre :

• L'authentification e-mail/mot de passe avec Supabase
• L'intégration de Google Sign-In (Android, iOS et Web)
• Un store clé-valeur simple utilisant les tables PostgreSQL de Supabase
• Le stockage de données utilisateur avec la Row Level Security (RLS)

Détails clés de l'implémentation

Gestion du nonce

Supabase nécessite une gestion spécifique du nonce pour la sécurité. L'implémentation suit la documentation React Native Google Sign In:

• Générez un rawNonce (chaîne aléatoire compatible URL)
• Hashez-l’avec SHA-256 pour obtenir nonceDigest
• Utilisez nonceDigest vers Google Sign-In
• Utilisez rawNonce vers Supabase (Supabase le hashe en interne pour la comparaison)

Validation du JWT

L'implémentation d'exemple inclut la validation du JWT pour garantir que :

• L'audience du token correspond à vos Google Client IDs configurés
• Le nonce correspond au digest attendu
• La tentative automatique en cas d'échec de validation (crucial sur iOS)

Considérations spécifiques aux plateformes

• iOS: Le cache du token peut causer des problèmes de nonce — l'implémentation gère cela automatiquement
• Web: Doit appeler isLoggedIn() au montage pour gérer les redirections OAuth
• Android: Implémentation standard avec configuration de l'empreinte SHA-1

Étapes suivantes

Continuez avec les guides de configuration :

• Supabase Google Login - Configuration générale - Aperçu et prérequis
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration web - Configuration spécifique au web

Connexion avec Apple

• Supabase Apple Login - Configuration générale - Aperçu et prérequis
• Configuration iOS - Configuration spécifique à iOS
• Configuration Android - Configuration spécifique à Android

Continuer depuis l'introduction à l'intégration Supabase

Si vous utilisez Introduction à l'intégration Supabase pour planifier l'authentification et les flux de comptes, connectez-l’à Utiliser @capgo/capacitor-social-login pour la capacité native dans « Utiliser @capgo/capacitor-social-login », @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail 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.