Introduction à l'intégration Supabase

Vue d'ensemble

Cet article vous guidera dans la configuration de l'authentification Supabase avec le plugin Capacitor de connexion sociale. 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 côté serveur et PostgreSQL pour le stockage de données.

Ce que vous apprendrez

• Comment configurer l'authentification Supabase
• Comment intégrer le plugin Capacitor de connexion sociale avec l'authentification Supabase
• Paramètres spécifiques à la 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 à Tableau de bord de Supabase
   • Activer le fournisseur OAuth Google
   • Obtenez l'URL de votre projet Supabase et la clé anonyme

2. Supabase JS SDK

   • Installez Supabase dans votre projet :

     npm install @supabase/supabase-js

3. Un projet Capacitor

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

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

4. Configuration de la plateforme spécifique Google

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

Application d'exemple

Un exemple de mise en œuvre complète est disponible dans le dépôt :

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

L'application d'exemple démontre :

• Authentification par e-mail/ mot de passe avec Supabase
• Intégration de connexion Google (Android, iOS et Web)
• Un stockage de clés de valeurs simple utilisant les tables PostgreSQL de Supabase
• Stockage de données spécifiques à l'utilisateur avec la sécurité de niveau de ligne (RLS)

Détails d'implémentation clés

Gestion de nonce

Supabase nécessite une gestion de nonce spéciale pour la sécurité. La mise en œuvre suit les Documentation de connexion Google de React Native:

• Générer un rawNonce (chaîne aléatoire sécurisée pour URL)
• Hachez-le avec SHA-256 pour obtenir nonceDigest
• Passer nonceDigest à Google Sign-In
• Passer rawNonce à Supabase (Supabase le hache intérieurement pour la comparaison)

Validation de JWT

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

• 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 plateau

• iOS: Le cache de jeton peut entraîner des problèmes de nonce - la mise en œuvre gère cela automatiquement
• Web: Il faut appeler isLoggedIn() à la montée pour gérer les redirections OAuth
• Android: Mise en œuvre standard avec configuration de l'empreinte SHA-1

Étapes suivantes

Continuez avec les guides de configuration :

• Supabase Google Login - Configuration générale - Présentation et prérequis
• Configuration Android - Configuration spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration Web - Configuration spécifique à Web

Connexion Apple Sign-In

• Supabase Apple Login - Configuration générale - Présentation et prérequis
• Configuration iOS - Configuration iOS spécifique
• Configuration Android - Configuration Android spécifique

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

Si vous utilisez Introduction à l'intégration Supabase pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-connexion sociale pour la capacité native dans En utilisant @capgo/capacitor-connexion sociale, @capgo/capacitor-connexion sociale pour le détail d'implémentation dans @capgo/capacitor-connexion sociale, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.