Introduction à l'intégration Supabase

Vue d'ensemble

Cet tutoriel vous guidera à travers la mise en place de l'authentification Supabase avec le plugin de connexion sociale Capacitor. Cette intégration vous permet d'utiliser les fournisseurs de connexion sociale natifs (Google, Apple, Facebook, Twitter) sur les plateformes mobiles tout en exploitant l'authentification Supabase pour l'authentification backend et PostgreSQL pour le stockage de données.

Ce que vous apprendrez

• Comment configurer l'authentification Supabase
• Comment intégrer le plugin de connexion sociale Capacitor avec Supabase Auth
• Paramètres spécifiques au plateforme pour Android, iOS et Web
• Comment gérer les nonces de manière sécurisée pour Supabase

Ce dont vous aurez besoin

Avant de commencer, assurez-vous d'avoir :

1. Un projet Supabase

   • Créez un projet sur Tableau de bord Supabase
   • Activez le fournisseur OAuth Google
   • Obtenez l'URL et la clé anonyme de votre projet Supabase

2. Supabase JS SDK

   • Installez Supabase dans votre projet :

     npm install @supabase/supabase-js

3. Un projet Capacitor

   • Une application Capacitor existante
   • Capacitor plugin de connexion sociale installé :

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

4. Configuration de la plateforme Google

   • Terminez la configuration de connexion Google pour vos plateformes cibles :
     • Configuration de la connexion Google pour Android
     • Configuration de la connexion Google pour iOS
     • Configuration de connexion Google Web

Application d'exemple

Un exemple de mise en œuvre complète 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 par e-mail/ mot de passe avec Supabase
• Intégration de connexion Google (Android, iOS et Web)
• Un stockage de clés-valeurs simple utilisant les tables PostgreSQL de Supabase
• Stockage de données utilisateur avec sécurité de niveau de ligne (RLS)

Détails d'implémentation clés

Gestion de Nonces

Supabase nécessite un traitement spécial des nonces pour des raisons de sécurité. La mise en œuvre suit les Documentation de connexion Google pour React Native:

• Générer un rawNonce La hacher avec SHA-256 pour obtenir
• Hasher avec SHA-256 pour obtenir nonceDigest
• Pass nonceDigest se connecter à Google
• Pass rawNonce à Supabase (Supabase le hache intérieurement pour la comparaison)

Validation JWT

L'implémentation d'exemple inclut une validation JWT pour s'assurer :

• Le public du jeton correspond aux identifiants de client Google configurés
• Le nonce correspond au digest attendu
• Réessai automatique en cas d'échec de la validation (surtout important pour iOS)

Considérations spécifiques au plateforme

• iOSLa mise en cache des jetons peut entraîner des problèmes de nonce - la mise en œuvre gère automatiquement cela.
• Web: Doit appeler isLoggedIn() On montage pour gérer les redirections OAuth
• Android: Implémentation standard avec configuration de l'empreinte de fingerprint SHA-1

Étapes suivantes

Continuez avec les guides de configuration :

• Supabase Google Login - Configuration générale - Vue d'ensemble et prérequis
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Web Setup - Configuration web spécifique

Apple Sign-In

• Configuration générale de Supabase Apple Login - Vue d'ensemble et prérequis
• Configuration iOS - Configuration iOS spécifique
• Configuration de la plateforme Android - Configuration spécifique à Android

Continuez de l'introduction à l'intégration de Supabase

Si vous utilisez Introduction à l'intégration de Supabase pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisation de @capgo/capacitor-login social pour le détail d'implémentation dans Utilisation de @capgo/capacitor-social-login, @capgo/capacitor-connexion-social pour le détail d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et @capgo/capacitor-native-biometrique pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Utilisation de @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login pour les détails d'implémentation dans l'authentification à deux facteurs.