Introduction à l'intégration Supabase

Présentation

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

Ce que vous apprendrez

• Comment configurer l'authentification Supabase
• Comment intégrer le plugin de connexion sociale Capacitor 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 sur Tableau de bord 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
   • Capacitor plugin de connexion sociale installé :

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

4. Configuration de Google spécifique à la plateforme

   • Completez 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 :

• L'authentification par courriel/ mot de passe avec Supabase
• L'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 spécifiques à l'utilisateur avec la sécurité de niveau de ligne (RLS)

Détails de mise en œuvre clés

Gestion de nonce

Supabase nécessite une gestion spéciale de nonce pour la sécurité. La mise en œuvre suit les instructions de la documentation de Google Sign In React Native Générer un:

• (chaîne aléatoire sécurisée pour URL) rawNonce La hasher avec SHA-256 pour obtenir
• La passer nonceDigest
• Supabase nécessite une gestion spéciale de nonce pour la sécurité. nonceDigest à Google Sign-In
• Pass rawNonce à Supabase (Supabase le hache intérieurement pour la comparaison)

Validation de JWT

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

• L'audience du jeton correspond à vos identifiants de client Google configurés
• Le nonce correspond à la valeur attendue de la fonction de hachage
• Réessayez automatiquement en cas d'échec de la validation (surtout important pour iOS)

Considérations spécifiques au plateforme

• iOS: La mise en cache de jetons peut entraîner des problèmes de nonce - la mise en œuvre gère cela automatiquement
• Web: Doit appeler isLoggedIn() à monter pour gérer les redirections OAuth
• Android: Implémentation standard avec configuration deempreinte 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 Android spécifique
• Configuration iOS - Configuration iOS spécifique
• Configuration Web - Configuration Web spécifique

Signe d'Apple

• Supabase Signe d'Apple - Configuration générale - Vue d'ensemble et prérequis
• Configuration iOS - Configuration iOS spécifique
• Configuration 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-le avec En utilisant @capgo/capacitor-connexion-social pour la capacité native dans En utilisant @capgo/capacitor-connexion-social, @capgo/capacitor-connexion-social pour le détail d'implémentation dans @capgo/capacitor-connexion-social, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometrique pour les détails d'implémentation dans @capgo/capacitor-native-biometrique, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.