Supabase Google Login - Configuration générale

Introduction

Ce guide vous accompagne dans l'intégration de Google Sign-In avec Supabase Authentication en utilisant le plugin Social Login de Capacitor. Cette configuration vous permet d'utiliser le Google Sign-In natif sur les plateformes mobiles tout en exploitant Supabase Auth pour l'authentification backend.

Prerequisites

Avant de commencer, assurez-vous d'avoir :

1. Créé un projet Supabase

2. Lu le Configuration générale de Google Login guide pour configurer les identifiants Google OAuth

3. Suivi les guides spécifiques à chaque plateforme pour configurer les identifiants Google OAuth pour votre plateforme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration Web

   Note

   Avant de commencer le tutoriel Supabase, vous devez générer les client IDs pour les plateformes que vous comptez utiliser. Vous les utiliserez à l'étape 7 de ce guide.

Activer le fournisseur Google OAuth dans Supabase

1. Allez sur votre dashboard Supabase

2. Cliquez sur votre projet

   

3. Allez dans le Authentication menu

   

4. Cliquez sur le Providers onglet

   

5. Trouvez le Google provider

   

6. Activer le provider

   

7. Ajoutez les client IDs pour les plateformes que vous comptez utiliser

   

   Note

   Cela inclut le client ID web, le client ID iOS et le client ID Android. Vous pouvez en omettre certains selon les plateformes que vous comptez utiliser.

8. Cliquez sur le Save bouton

   

Note

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

Et voilà, vous avez maintenant activé la connexion Google avec Supabase Authentication 🎉

Fonctionnement de Google Sign-In avec le Supabase Authentication Helper

Cette section explique le fonctionnement interne de l'intégration Google Sign-In avec Supabase. Comprendre ce flux vous aidera à implémenter 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 fichier.

1. Génération du nonce

L'implémentation génère une paire de nonce sécurisée en suivant les 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 URL-safe (64 caractères hexadécimaux)
• nonceDigest: hash SHA-256 de rawNonce (hex-encoded)
• nonceDigest est transmis à Google Sign-In → Google inclut l'empreinte du nonce dans l'ID token
• rawNonce est transmis à Supabase → Supabase calcule le hash du nonce brut et le compare au nonce du token

2. Connexion avec Google

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 token à Supabase, l'implémentation valide le token 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 token JWT avant de l'envoyer à Supabase répond à plusieurs objectifs importants :

1. Éviter les requêtes invalides: Si le token possède une audience incorrecte ou un nonce non conforme, Supabase rejettera le token de toute façon. Valider en amont évite des appels API inutiles et fournit des messages d'erreur plus clairs.

2. Problèmes de cache de token: Sur certaines plateformes (notamment iOS), le SDK de Google Sign-In peut mettre les tokens en cache pour améliorer les performances. Lorsqu'un token mis en cache est renvoyé, il peut avoir été généré avec un nonce différent (ou sans nonce du tout), ce qui amène Supabase à rejeter le token avec une erreur de « nonce mismatch ». En validant avant l'envoi à Supabase, nous pouvons détecter ce problème tôt et réessayer automatiquement avec un token frais.

3. Sécurité (iOS) : Sur iOS, la validation garantit que le token a été émis pour vos Google Client IDs spécifiques, évitant ainsi des problèmes de sécurité potentiels liés à l'utilisation de tokens destinés à d'autres applications.

4. Meilleure gestion des erreurs: La détection des problèmes avant Supabase permet d'implémenter une logique de retry automatique, essentielle pour gérer les problèmes de cache iOS de manière transparente.

Si la validation échoue, la fonction effectue automatiquement :

1. Déconnexion de Google (supprime les tokens en cache – critique sur iOS)
2. Nouvelle tentative d'authentification (force la génération d'un nouveau token avec le bon nonce)
3. If retry also fails, returns an error

4. Connexion à Supabase

Enfin, le token validé est envoyé à Supabase :

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

Référence Code complète

L'implémentation complète est disponible dans le fichier de l'application d'exemple. supabaseAuthUtils.ts fichier, qui inclut :

• getUrlSafeNonce() - Génère un nonce aléatoire compatible URL
• sha256Hash() - Hash la chaîne avec SHA-256
• getNonce() - Génère une paire de nonces
• decodeJWT() - Décode le token JWT
• validateJWTToken() - Valide l'audience et le nonce du JWT
• authenticateWithGoogleSupabase() - Fonction d'authentification principale avec retry automatique

Fichiers d'exemple supplémentaires

• SupabasePage.tsx - Composant d'exemple avec gestion de la redirection (Web)
• SupabaseCreateAccountPage.tsx - Exemple de page de création de compte

Étapes suivantes

Veuillez consulter le guide de configuration spécifique à votre plateforme cible :

• Configuration Android
• Configuration iOS
• Configuration Web

Continuer depuis Supabase Google Login - Configuration générale

Si vous utilisez Supabase Google Login - Configuration générale pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.