Supabase Google Login - Paramètres généraux

Copiez un prompt de configuration avec les étapes d'installation et le guide Markdown complet pour ce plugin.

Introduction

Cet guide vous guidera pour intégrer l'authentification Google Sign-In avec Supabase Authentication en utilisant le plugin Capacitor Social Login. Cette configuration vous permet d'utiliser l'authentification native Google Sign-In sur les plateformes mobiles tout en exploitant l'authentification Supabase pour l'authentification backend.

Prérequis

Avant de commencer, assurez-vous d'avoir :

Créé un projet Supabase
Lis le Guide de configuration de l'authentification Google guide pour configurer les clés d'authentification OAuth Google
Suivi des guides spécifiques à la plateforme pour configurer les clés d'authentification OAuth Google pour votre plateforme cible :
Avant de commencer le tutoriel Supabase, vous devez générer les identifiants clients pour les plateformes que vous prévoyez utiliser. Vous les utiliserez à l'étape 7 de ce guide.

Activer le fournisseur OAuth Google dans Supabase

Allez à votre Tableau de bord Supabase
Cliquez sur votre projet
Allez-y vers le Authentication menu
Cliquez sur la Providers onglet
Trouvez le Google fournisseur
Activer le fournisseur
Ajoutez les identifiants de client pour les plateformes que vous prévoyez d'utiliser

Cela incluait l'ID du client web, l'ID du client iOS et l'ID du client Android. Vous pouvez passer outre la fourniture de certains d'entre eux, en fonction des plateformes que vous prévoyez d'utiliser.
Cliquez sur le Save bouton

Voilà, vous avez maintenant activé l'inscription Google avec l'authentification Supabase 🎉

Cette section explique comment l'intégration de l'inscription Google avec Supabase fonctionne sous le capot. Comprendre ce flux vous aidera à mettre en œuvre et à dépanner le processus d'authentification.

1. Génération de Nonce

La mise en œuvre génère un paire de nonce sécurisée en suivant les exigences de nonce de Supabase Exigences de nonce de Supabase:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Flux :

rawNonce: Chaîne aléatoire sécurisée (64 caractères hexadécimaux)
nonceDigest: Hachage SHA-256 de rawNonce (codé en hexadécimal)
nonceDigest est transmis à Google Sign-In → Google inclut le digest de nonce dans le jeton d'ID
rawNonce est transmis à Supabase → Supabase hache le nonce brut et le compare avec la nonce du jeton

La fonction initialise le plugin et se connecte avec Google :

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. Validation du JWT

Avant d'envoyer le jeton à Supabase, la mise en œuvre valide le jeton JWT :

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

Pourquoi valider avant Supabase ?

La validation du jeton JWT avant d'envoyer le jeton à Supabase sert plusieurs objectifs importants :

Prévenir les demandes non valides: Si le jeton a une audience incorrecte ou une erreur de nonce, Supabase rejettait le jeton de toute façon. La validation avant évite les appels API inutiles et fournit des messages d'erreur plus clairs.
Problèmes de cache des jetons: Sur certaines plateformes (notamment iOS), Google Sign-In SDK peut stocker des jetons pour améliorer les performances. Lorsqu'un jeton stocké est retourné, le jeton stocké peut avoir été généré avec un nonce différent (ou aucun nonce du tout), ce qui entraîne une erreur de
de Supabase en raison d'une incompatibilité de nonce. En validant avant d'envoyer à Supabase, nous pouvons détecter ce problème dès le début et réessayer automatiquement avec un jeton frais. Security
(iOS) : Sur iOS, la validation s'assure que le jeton a été émis pour vos identifiants de client Google spécifiques, prévenant ainsi les problèmes de sécurité potentiels liés à l'utilisation de jetons destinés à d'autres applications.Meilleure Gestion des Erreurs

: La détection des problèmes avant Supabase permet une logique de réessai automatique, essentielle pour gérer les problèmes de stockage iOS de manière transparente.

Si la validation échoue, la fonction se déconnecte automatiquement de Google (efface les jetons stockés - critique sur iOS) et réessaye l'authentification une fois (oblige la génération d'un jeton frais avec un nonce correct). Si la réessai échoue également, elle retourne une erreur.
4. Sign-In Supabase
Enfin, le jeton validé est envoyé à Supabase :

Si la validation échoue, la fonction se déconnecte automatiquement de Google (efface les jetons stockés - critique sur iOS) et réessaye l'authentification une fois (oblige la génération d'un jeton frais avec un nonce correct). Si la réessai échoue également, elle retourne une erreur.

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Référence complète de Code

La mise en œuvre complète est disponible dans le exemplaire d'application supabaseAuthUtils.ts fichier, qui comprend :

getUrlSafeNonce() - Génère un nonce sécurisé pour URL
sha256Hash() - Hache une chaîne avec SHA-256
getNonce() - Génère un pair de nonce
decodeJWT() - Décode le jeton JWT
validateJWTToken() - Valide l'audience et le nonce JWT
authenticateWithGoogleSupabase() - Fonction d'authentification principale avec redémarrage automatique

Fichiers d'exemple supplémentaires

SupabasePage.tsx - Exemple de composant avec gestion de redirection (Web)
SupabaseCreateAccountPage.tsx - Exemple de page de création de compte

Étapes suivantes

Veuillez procéder au guide de configuration spécifique à la plateforme pour votre plateforme cible :

Si vous utilisez Supabase Google Login - Paramètres Généraux pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-connexion sociale pour la capacité native dans En utilisant @capgo/capacitor-connexion sociale, En utilisant @capgo/capacitor-connexion sociale pour le détail d'implémentation dans @capgo/capacitor-connexion sociale, En utilisant @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, En utilisant @capgo/capacitor-authentification biométrique native pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.