Supabase Google Connexion - Configuration générale

##Présentation

Ce guide vous guidera dans l’intégration de la connexion Google avec l’authentification Supabase à l’aide du plugin de connexion sociale Capacitor. Cette configuration vous permet d’utiliser la connexion native Google sur les plates-formes mobiles tout en tirant parti de Supabase Auth pour l’authentification backend.

Prérequis

Avant de commencer, assurez-vous d’avoir :

1. Créé un projet Supabase

2. Lisez le guide Google Configuration générale de la connexion pour configurer les informations d’identification Google OAuth.

3. Suivez les guides spécifiques à la plate-forme respective pour configurer les informations d’identification Google OAuth pour votre plate-forme cible :

   • Configuration Android
   • Configuration iOS
   • Configuration Web

   Avant de démarrer le didacticiel Supabase, vous devez générer les ID client pour les plates-formes que vous prévoyez d’utiliser. Vous les utiliserez à l’étape 7 de ce guide.

Activation du fournisseur Google OAuth dans Supabase

1. Accédez à votre Supabase Tableau de bord

2. Cliquez sur votre projet

   

3. Allez dans le menu Authentication

   

4. Cliquez sur l’onglet Providers

   

5. Recherchez le fournisseur Google

   

6. Activer le fournisseur

   

7. Ajoutez les identifiants client des plates-formes que vous prévoyez d’utiliser

   

   Cela comprenait l’ID client Web, l’ID client iOS et l’ID client Android. Vous pouvez ignorer certains d’entre eux, en fonction des plates-formes que vous envisagez d’utiliser.

8. Cliquez sur le bouton Save

   

Note

Vous NE DEVEZ PAS configurer Client Secret (for OAuth) ou Callback URL (for OAuth). Certaines sources peuvent également suggérer de définir « Ignorer les vérifications occasionnelles » pour Google sur iOS, mais avec ce guide, cela n’est pas nécessaire.

Voilà, vous avez maintenant activé la connexion Google avec l’authentification Supabase 🎉

Comment fonctionne Google Connectez-vous avec Supabase Authentication Helper

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

Mise en œuvre complète

L’implémentation complète est disponible dans le fichier supabaseAuthUtils.ts de l’application exemple.

1. Génération de noms occasionnels

L’implémentation génère une paire de noms occasionnels sécurisée suivant les Supabase exigences occasionnelles :

// 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 pour les URL (64 caractères hexadécimaux)
• nonceDigest : hachage SHA-256 de rawNonce (codé en hexadécimal)
• nonceDigest est transmis à Google Connexion → Google inclut le résumé occasionnel dans le jeton d’identification
• rawNonce est transmis à Supabase → Supabase hache le nom occasionnel brut et le compare avec le nom occasionnel du jeton

2. Google ConnexionLa 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. JWT Validation

Avant d’envoyer le jeton à Supabase, l’implémentation 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 le Supabase ?

La validation du jeton JWT avant de l’envoyer à Supabase répond à plusieurs objectifs importants :

1. Empêcher les demandes invalides : si le jeton a une audience incorrecte ou une non-concordance occasionnelle, Supabase rejettera le jeton de toute façon. La validation en premier évite les appels API inutiles et fournit des messages d’erreur plus clairs.

2. Problèmes de mise en cache des jetons : sur certaines plates-formes (en particulier iOS), Google Connexion SDK peut mettre en cache les jetons pour améliorer les performances. Lorsqu’un jeton mis en cache est renvoyé, le jeton mis en cache peut avoir été généré avec un nom occasionnel différent (ou aucun cas occasionnel), ce qui a amené Supabase à rejeter le jeton avec une erreur « non-concordance de nonce ». En validant avant d’envoyer à Supabase, nous pouvons détecter ce problème plus tôt et réessayer automatiquement avec un nouveau jeton.

3. Sécurité (iOS) : sur iOS, la validation garantit que le jeton a été émis pour vos ID client Google spécifiques, empêchant ainsi les problèmes de sécurité potentiels liés à l’utilisation de jetons destinés à d’autres applications.

4. Meilleure gestion des erreurs : la détection des problèmes avant Supabase permet une logique de nouvelle tentative automatique, ce qui est essentiel pour gérer de manière transparente les problèmes de mise en cache iOS.

Si la validation échoue, la fonction automatiquement :

1. Se déconnecte de Google (efface les jetons mis en cache - critique sur iOS)
2. Réessaye l’authentification une fois (force la nouvelle génération de jeton avec le nom occasionnel correct)
3. Si la nouvelle tentative échoue également, renvoie une erreur

4. Supabase Connexion

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 complète du code

L’implémentation complète est disponible dans le fichier exemple d’application supabaseAuthUtils.ts, qui comprend :

• getUrlSafeNonce() - Génère un nom occasionnel aléatoire sécurisé pour les URL
• sha256Hash() - Chaîne de hachage avec SHA-256
• getNonce() - Génère une paire de noms occasionnels
• decodeJWT() - Décode le jeton JWT
• validateJWTToken() - Valide l’audience JWT et le nom occasionnel
• authenticateWithGoogleSupabase() - Fonction d’authentification principale avec nouvelle tentative automatique

Exemples de fichiers supplémentaires

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

Prochaines étapes

Veuillez passer au guide de configuration spécifique à votre plateforme cible :

• Configuration Android
• Configuration iOS
• Configuration Web