Introduction à l'intégration Supabase

Vue d'ensemble

Cet tutoriel vous guidera dans la configuration de l'authentification Supabase avec le plugin de connexion sociale Capacitor.

Cet 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.

• Section intitulée “Ce que vous apprendrez”
• How to integrate Capacitor Social Login plugin with Supabase Auth
• Comment intégrer le plugin de connexion sociale __CAPGO_KEEP_0__ avec l'authentification Supabase
• Paramètres spécifiques par plateforme pour Android, iOS et Web

Comment gérer les nonces de manière sécurisée pour Supabase

Section intitulée “Ce dont vous aurez besoin”

1. Avant de commencer, assurez-vous d'avoir :

   • Créez un projet à Tableau de bord de Supabase
   • Activer le fournisseur d'authentification OAuth Google
   • Obtenez l'URL de votre projet Supabase et la clé anonyme

2. Supabase JS SDK

   • Installer Supabase dans votre projet :

     npm install @supabase/supabase-js

3. Un projet Capacitor

   • Une application Capacitor existante
   • Capacitor Plugin d'authentification sociale installé :

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

4. Configuration plateforme spécifique de Google

   • Terminez 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 le 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 courriel/mot de passe avec Supabase
• Intégration de l'authentification 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 clés de mise en œuvre

Gestion de nonce

Supabase nécessite une gestion de nonce spéciale pour des raisons de sécurité. La mise en œuvre suit les instructions de la documentation de l'authentification Google React Native Générez un:

• (chaîne aléatoire sécurisée pour URL) rawNonce Authentification par courriel/mot de passe avec Supabase
• Hasher 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

La mise en œuvre d'exemple 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éessayer automatiquement en cas d'échec de validation (surtout important pour iOS)

Considérations spécifiques à la plateforme

• iOS: La 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() : 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 Android spécifique
• Configuration iOS - Configuration iOS spécifique
• Configuration Web - Configuration Web spécifique

Apple Sign-In

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

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

Si vous utilisez L'introduction à l'intégration Supabase pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisation de @capgo/capacitor-login-social pour la capacité native dans Utilisation de @capgo/capacitor-login-social capgo/capacitor-login-social pour le détail d'implémentation dans capgo/capacitor-login-social @capgo/capacitor-passkey pour les détails 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 dans Authentification à deux facteurs.