Introduction à l'intégration Supabase

Présentation

Cette étape vous guidera dans la configuration 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 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 de connexion sociale Capacitor avec l'authentification Supabase
• Paramètres de configuration spécifiques aux plateformes 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 protégé

   • 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

   • Configurez le setup de connexion Google pour vos plateformes cibles :
     • Setup de connexion Google pour Android
     • Setup de connexion Google pour iOS
     • Setup de connexion Google pour le Web

Application d'exemple

Un exemple de travail complet 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 de valeur simple en utilisant les tables PostgreSQL de Supabase
• Le 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 un traitement spécial des nonces pour des raisons de sécurité. La mise en œuvre suit les instructions de la documentation de Google Sign In pour React Native. Suivez la documentation de Google Sign In pour React Native:

• Générez un rawNonce (chaîne aléatoire sécurisée pour URL)
• 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 :

• Les identifiants d'audience correspondent à vos identifiants de client Google configurés
• Le nonce correspond au digest attendu
• Réessai automatique en cas d'échec de validation (surtout important pour iOS)

Considérations spécifiques à la plateforme

• iOSLe stockage de jetons peut entraîner des problèmes de nonce - la mise en œuvre gère cela automatiquement
• WebIl faut appeler isLoggedIn() à la montée pour gérer les redirections OAuth
• AndroidImplémentation standard avec configuration de l'empreinte de 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

Apple Sign-In

• Configuration de connexion Apple Supabase - Paramètres généraux - Présentation et prérequis
• Configuration iOS - Configuration spécifique à iOS
• Configuration Android - Configuration spécifique à Android