Passer au contenu
Capgo - Live Updates for Capacitor Apps Capgo

Supabase Introduction à l'intégration

Aperçu

Section titled “Aperçu”

Ce didacticiel vous guidera dans la configuration de l’authentification Supabase avec le plugin de connexion sociale Capacitor. 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 de PostgreSQL pour le stockage des données.

Ce que vous apprendrez

Section titled “Ce que vous apprendrez”
  • Comment configurer l’authentification Supabase
  • Comment intégrer le plugin Capacitor Social Login avec Supabase Auth
  • Configuration spécifique à la plate-forme pour Android, iOS et Web
  • Comment gérer les noms occasionnels en toute sécurité 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 Supabase Dashboard
    • Activer le fournisseur Google OAuth
    • Obtenez l’URL de votre projet Supabase et la clé anonyme

  2. Supabase JS SDK

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

  3. Un projet Capacitor

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

  4. Configuration Google spécifique à la plate-forme

Exemple d’application

Section titled “Exemple d’application”

Un exemple de travail complet est disponible dans le référentiel :

Dépôt de code : Vous pouvez trouver le référentiel de code ici

L’exemple d’application montre :

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

Détails clés de la mise en œuvre

Section titled “Détails clés de la mise en œuvre”

Gestion des cas occasionnels

Section titled “Gestion des cas occasionnels”

Supabase nécessite une gestion spéciale des cas occasionnels pour des raisons de sécurité. L’implémentation suit la documentation de connexion React Native Google :

  • Générer un rawNonce (chaîne aléatoire sécurisée pour les URL)
  • Hachez-le avec SHA-256 pour obtenir nonceDigest
  • Passez nonceDigest à Google Connexion
  • Passez rawNonce à Supabase (Supabase le hache en interne pour comparaison)

JWT Validation

Section titled “JWT Validation”

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

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

Considérations spécifiques à la plate-forme

Section titled “Considérations spécifiques à la plate-forme”
  • iOS : la mise en cache des jetons peut provoquer des problèmes occasionnels - l’implémentation gère cela automatiquement
  • Web : doit appeler isLoggedIn() lors du montage pour gérer les redirections OAuth
  • Android : implémentation standard avec configuration d’empreintes digitales SHA-1

Prochaines étapesContinuez avec les guides de configuration :

Section titled “Prochaines étapesContinuez avec les guides de configuration :”

Apple Connexion

Section titled “Apple Connexion”