Passer au contenu
Capgo

Introduction à l'intégration Supabase

Vue d’ensemble

Section titled “Vue d’ensemble”

Ce tutoriel vous guidera dans la configuration de l’authentification Supabase avec le plugin Capacitor Social Login. Cette intégration vous permet d’utiliser des fournisseurs de connexion sociale natifs (Google, Apple, Facebook, Twitter) sur les plateformes mobiles tout en tirant parti de Supabase Auth pour l’authentification backend et PostgreSQL pour le stockage de données.

Ce que vous allez apprendre

Section titled “Ce que vous allez apprendre”
  • Comment configurer l’authentification Supabase
  • Comment intégrer le plugin Capacitor Social Login avec Supabase Auth
  • Configuration spécifique à 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

Section titled “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 de votre projet Supabase et la clé anon

  2. Supabase JS SDK

    • Installez Supabase dans votre projet :
      Terminal window
      npm install @supabase/supabase-js

  3. Un projet Capacitor

    • Une application Capacitor existante
    • Plugin Capacitor Social Login installé :
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. Configuration Google spécifique à la plateforme

Application exemple

Section titled “Application exemple”

Une application fonctionnelle complète est disponible dans le dépôt :

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

L’application exemple démontre :

  • Authentification par email/mot de passe avec Supabase
  • Intégration Google Sign-In (Android, iOS et Web)
  • Un simple magasin clé-valeur utilisant les tables PostgreSQL Supabase
  • Stockage de données spécifiques à l’utilisateur avec Row Level Security (RLS)

Détails d’implémentation clés

Section titled “Détails d’implémentation clés”

Gestion du nonce

Section titled “Gestion du nonce”

Supabase nécessite une gestion spéciale du nonce pour la sécurité. L’implémentation suit la documentation React Native Google Sign In :

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

Validation JWT

Section titled “Validation JWT”

L’implémentation exemple inclut la validation JWT pour garantir :

  • L’audience du jeton correspond à vos ID client Google configurés
  • Le nonce correspond au digest attendu
  • Nouvelle tentative automatique en cas d’échec de validation (particulièrement important pour iOS)

Considérations spécifiques à la plateforme

Section titled “Considérations spécifiques à la plateforme”
  • iOS : La mise en cache de jetons peut causer des problèmes de nonce - l’implémentation gère cela automatiquement
  • Web : Doit appeler isLoggedIn() au montage pour gérer les redirections OAuth
  • Android : Implémentation standard avec configuration d’empreinte SHA-1

Prochaines étapes

Section titled “Prochaines étapes”

Continuez avec les guides de configuration :