Passer à la navigation principale

Supabase Google Login sur iOS

GitHub

Cette guide vous aidera à intégrer l'authentification Google avec Supabase Authentication sur iOS. Il est supposé que vous avez déjà terminé :

fichier de l'application d'exemple. Ce guide explique les concepts clés et comment l'utiliser. Utilisation de l'Aide à l'Authentification supabaseAuthUtils.ts Section intitulée “Implémentation”

La mise en œuvre complète est disponible dans le fichier de l'application d'exemple. Ce guide explique les concepts clés et comment l'utiliser.

Titre de la section « Utilisation de l'assistant d'authentification »

Le authenticateWithGoogleSupabase fonction traite l'ensemble du flux d'authentification :

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';
const result = await authenticateWithGoogleSupabase();
if (result.success) {
console.log('Signed in:', result.user);
// Navigate to your authenticated area
} else {
console.error('Error:', result.error);
}

Titre de la section « Comment ça marche » Pour une explication détaillée de la manière dont le flux d'authentification fonctionne, y compris la génération de nonce, la validation de JWT et la connexion Supabase, voir la.

section Comment ça marche du guide de configuration générale

Enjeux importants

Problème de stockage de Nonce iOS

Sur iOS, Google Sign-In peut stocker des jetons, ce qui peut entraîner une échec de la validation de la nonce. Le validateJWTToken La fonction détecte cela et gère automatiquement cela :

  1. Détection automatique: La fonction vérifie si la nonce du jeton correspond à la nonce attendue nonceDigest
  2. Réessai automatique: Si la validation échoue, elle se déconnecte automatiquement de Google et réessaye une fois
  3. Gestion des erreurs: Si le réessai échoue également, une erreur est renvoyée

Pourquoi cela se produit: iOS Google Sign-In SDK caches tokens for performance. When a cached token is returned, it may have been generated with a different nonce (or no nonce), causing a mismatch.

La solution: L'implémentation gère automatiquement cela en se déconnectant et en réessayant, ce qui oblige Google à générer un jeton frais avec le nonce correct.

Travail manuel Si la réessayer automatiquement ne fonctionne pas :

// Logout first to clear cached tokens
await SocialLogin.logout({ provider: 'google' });
// Then authenticate
const result = await authenticateWithGoogleSupabase();

Cela garantit que le jeton frais est obtenu avec le nonce correct.

Pour la référence complète code, voir la section Référence complète Code de la section Configuration générale.

L'implémentation du nonce suit le modèle de la Documentation de connexion Google pour React Native:

  • rawNonce se rend à Supabase’s signInWithIdToken()
  • Supabase fait une hachage de rawNonce et le compare avec le nonceDigest qui est inclus dans le jeton ID de Google Sign-In
  • nonceDigest (hachage SHA-256, encodé en hexadécimal) se rend à la nonce paramètre dans les API de connexion Google

La authenticateWithGoogleSupabase fonction inclut un retry paramètre:

  • Premier appel (retry=falseSi la validation échoue, se déconnecte automatiquement et réessaye une fois
  • Appel de réessai (retry=trueSi la validation échoue à nouveau, renvoie immédiatement une erreur

Cela gère automatiquement le problème de cache de jetons iOS.

Si l'authentification échoue :

  • Erreur de nonce: La fonction réessaye automatiquement - consultez les journaux de console pour plus de détails. Si cela persiste, déconnectez-vous manuellement d'abord
  • Audience non valide: Vérifiez que vos identifiants Client Google correspondent dans les deux Google Cloud Console et Supabase (tous les identifiants clients iOS et Web)
  • La validation du jeton échoue: Assurez-vous d'utiliser mode: 'online' en appel d'initialisation pour obtenir un idToken
  • la configuration de Info.plist: Assurez-vous que Info.plist contient les schémas URL corrects et GIDClientID
  • Vérifiez l' exemple d'application code pour référence

Si vous utilisez Supabase Google Login sur iOS planifier l'authentification et les flux de compte, connectez-l’avec Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et L'authentification à deux facteurs pour le détail d'implémentation dans L'authentification à deux facteurs.