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

Introduction

Ce guide vous guidera dans l'intégration de l'authentification Google avec Supabase Authentication en utilisant le plugin Capacitor d'authentification sociale. Cette configuration vous permet d'utiliser l'authentification native Google sur les plateformes mobiles tout en exploitant l'authentification Supabase pour l'authentification backend.

Prerequisites

Avant de commencer, assurez-vous d'avoir :

1. Créé un projet Supabase

2. Lu le Guide de configuration de l'authentification Google Guide de configuration de l'authentification Google pour votre plateforme cible :

3. Configuration Android

   • Suivi les guides spécifiques à la plateforme pour configurer les jetons OAuth Google pour votre plateforme cible :
   • Configuration iOS
   • Configuration Web

   Note

   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

1. Allez à votre Tableau de bord Supabase

2. Cliquez sur votre projet

   

3. N'allez pas à la Authentication menu

   

4. Cliquez sur le Providers onglet

   

5. Trouvez le Google fournisseur

   

6. Activer le fournisseur

   

7. Ajoutez les identifiants de client pour les plateformes que vous prévoyez utiliser

   

   Note

   Ce faisait partie de l'ID du client web, de l'ID du client iOS et de 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.

8. Cliquez sur le Save bouton

   

Note

Vous NE DEVEZ PAS configurer Client Secret (for OAuth) ou Callback URL (for OAuth). Certaines sources pourraient également suggérer de configurer Skip nonce checks pour Google sur iOS, mais avec ce guide, cela n'est pas nécessaire.

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

Fonctionnement de l'assistant d'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.

Implémentation complète

L'implémentation complète est disponible dans le fichier de l'application d'exemple. supabaseAuthUtils.ts 1. Génération de nonce

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 alphanumérique 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 le nonce du jeton

2. Google Sign-In

The function initializes the plugin and signs in with 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 ?

Valider le jeton JWT avant d'envoyer le jeton à Supabase sert plusieurs objectifs importants :

1. Prévenir les demandes non valides : Si le jeton a une audience incorrecte ou une erreur de nonce, Supabase rejette le jeton de toute façon. Valider d'abord évite les appels API inutiles et fournit des messages d'erreur plus clairs.

2. Problèmes de cache de 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 une nonce différente (ou aucune nonce du tout), ce qui entraîne une erreur de « nonce mismatch » de la part de Supabase. En validant avant d'envoyer à Supabase, nous pouvons détecter ce problème en amont et réessayer automatiquement avec un jeton frais.

3. 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.

4. Meilleures Gestion d'Erreurs: Déceler les problèmes avant que Supabase n'autorise la logique de réessai automatique, ce qui est essentiel pour gérer les problèmes de cache iOS de manière transparente.

Si la validation échoue, la fonction s'exécute automatiquement :

1. Se déconnecte de Google (efface les jetons cachés - critique sur iOS)
2. Réessaye l'authentification une fois (force la génération de jetons frais avec un nonce correct)
3. Si la réessai échoue également, retourne une erreur

4. Supabase Sign-In

Copier dans le presse-papier

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

Référence complète Code

La mise en œuvre complète est disponible dans le fichier de l'application d'exemple, qui comprend : supabaseAuthUtils.ts - Génère un nonce aléatoire sécurisé pour URL

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

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 poursuivre la guide de configuration spécifique à la plateforme pour votre plateforme cible :

• Configuration Android
• Configuration iOS
• Configuration Web

Continuez de Supabase Google Login - Configuration générale

Si vous utilisez Supabase Google Login - Configuration Générale pour planifier l'authentification et les flux de compte, connectez-le avec Utilisez @capgo/capacitor-connexion sociale pour la capacité native dans Utilisez @capgo/capacitor-connexion sociale, @capgo/capacitor-connexion sociale pour le détail d'implémentation dans @capgo/capacitor-connexion sociale, @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-biométrie native pour le détail d'implémentation dans @capgo/capacitor-biométrie native, et Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs.