Introduction à l'intégration Supabase

Présentation

This tutorial will guide you through setting up Supabase Authentication with the Capacitor Social Login plugin. This integration allows you to use native social login providers (Google, Apple, Facebook, Twitter) on mobile platforms while leveraging Supabase Auth for backend authentication and PostgreSQL for data storage.

Cette rubrique intitulée « Ce que vous apprendrez » explique comment configurer l'authentification Supabase.

• Comment intégrer le plugin de connexion sociale __CAPGO_KEEP_0__ avec l'authentification Supabase
• Comment intégrer le plugin de connexion sociale Capacitor avec l'authentification Supabase
• 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

Avant de commencer, assurez-vous d'avoir :

1. Un projet Supabase

   • Créez un projet sur Supabase Dashboard
   • Activer le fournisseur d'authentification Google OAuth
   • 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 pour les plateformes spécifiques

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

• Authentification par courriel/ mot de passe avec Supabase
• Intégration de l'inscription Google (Android, iOS et Web)
• Un stockage de clés de valeur simple en 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 d'implémentation clés

Gestion des Nonces

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

• (chaîne aléatoire sécurisée pour URL) rawNonce La hacher avec SHA-256 pour obtenir
• Passer nonceDigest
• à Google Sign-In nonceDigest Passer
• à Supabase (Supabase la hache intérieurement pour la comparaison) rawNonce Validation de JWT

Générer un __CAPGO_KEEP_0__

La mise en œuvre d'exemple inclut une validation de JWT pour s'assurer que :

• L'audience du jeton correspond aux identifiants de client Google configurés
• Le nonce correspond au digest attendu
• Réessai automatique en cas d'échec de la validation (surtout important pour iOS)

Considérations spécifiques à la 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 : Il faut appeler isLoggedIn() on montage pour gérer les redirections OAuth
• Android: Implémentation standard avec configuration de l'empreinte de fingerprint 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 spécifique à Android
• Configuration iOS - Configuration spécifique à iOS
• Configuration Web - Configuration web spécifique

Apple Sign-In

• Supabase Apple Login - Paramètres de base - 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 Introduction à l'intégration de Supabase pour planifier l'authentification et les flux de compte, connectez-le 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 le détail d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-biométrique-native pour le détail d'implémentation dans @capgo/capacitor-biométrique-native, et Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs