Configuración general de inicio de sesión de Google de Supabase

Copie una solicitud de configuración con los pasos de instalación y la guía de markdown completa para este complemento.

Introducción

Esta guía te guiará a través de la integración de Google Sign-In con Supabase Authentication utilizando el plugin de inicio de sesión social Capacitor. Esta configuración te permite utilizar el inicio de sesión nativo de Google en plataformas móviles mientras aprovechas la autenticación de Supabase para la autenticación de backend.

Requisitos previos

Antes de empezar, asegúrate de tener:

Crear un proyecto de Supabase
Leído el Configuración general de inicio de sesión de Google guía para configurar las credenciales de OAuth de Google
Seguido las guías específicas de la plataforma para configurar las credenciales de OAuth de Google para tu plataforma objetivo:
Antes de comenzar el tutorial de Supabase, debes generar los identificadores de cliente para las plataformas que planeas utilizar. Los utilizarás en el paso 7 de esta guía.

Habilitar proveedor de autenticación de Google en Supabase

Vaya a su Panel de control de Supabase
Haga clic en su proyecto
No vaya a Authentication menú
Haz clic en el Providers pestaña
Encuentra el Google proveedor
Habilita el proveedor
Agrega los identificadores de cliente para las plataformas que planeas utilizar

Este incluyó el ID del cliente web, el ID del cliente de iOS y el ID del cliente de Android. Puede omitir proporcionar algunos de ellos, dependiendo de las plataformas que planea utilizar.
Haz clic en el Save botón

Voilà, ahora has habilitado Google Sign-In con Supabase Authentication 🎉

Esta sección explica cómo funciona la integración de Google Sign-In con Supabase bajo la superficie. Comprender este flujo te ayudará a implementar y depurar el proceso de autenticación.

__CAPGO_KEEP_0__

La implementación genera un pair de nonce seguro siguiendo los requisitos de Supabase para nonce Copiar a portapapeles:

// 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 };
}

: Cadena aleatoria segura para URL (64 caracteres hex)

rawNonce: Hash SHA-256 de
nonceDigest(codificado en hexadecimal) rawNonce se pasa a Google Sign-In → Google incluye el nonce digest en el token de ID
nonceDigest se pasa a Supabase → Supabase hash la nonce bruta y compara con el nonce del token
rawNonce 2. Inicio de sesión con Google

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. Validación de JWT

Antes de enviar el token a Supabase, la implementación valida el 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 };
}

¿Por qué validar antes de Supabase?

Validar el token JWT antes de enviar el token a Supabase cumple varios propósitos importantes:

Prevenir solicitudes inválidas: Si el token tiene una audiencia o nonce incorrectos, Supabase rechazará el token de todos modos. Validar primero evita llamadas innecesarias API y proporciona mensajes de error más claros.
Problemas de caché de tokens: En algunas plataformas (especialmente iOS), Google Sign-In SDK puede cachear tokens para mejorar el rendimiento. Cuando se devuelve un token caché, el token caché puede haber sido generado con un nonce diferente (o sin nonce en absoluto), lo que causa que Supabase rechace el token con un error de “nonce no coincidente”. Al validar antes de enviar a Supabase, podemos detectar este problema temprano y reintentar automáticamente con un token fresco.
Seguridad (iOS): En iOS, la validación asegura que el token se emitió para tus identificadores de cliente de Google específicos, evitando posibles problemas de seguridad al utilizar tokens destinados a otras aplicaciones.
Mejor Manejo de Errores: Detectar problemas antes de que Supabase permita la lógica de retry automática, lo cual es esencial para manejar problemas de caché de iOS de manera transparente.

Si la validación falla, la función hace automáticamente:

Cierra sesión en Google (elimina tokens caché - crítico en iOS)
Intenta la autenticación una vez (obliga la generación de token fresco con nonce correcto)
Si el retry también falla, devuelve un error

Finalmente, el token validado se envía a Supabase:

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

Referencia completa de Code

La implementación completa está disponible en el archivo del supabaseAuthUtils.ts archivo, que incluye:

getUrlSafeNonce() - Genera un valor aleatorio seguro para URL
sha256Hash() - Hashea una cadena con SHA-256
getNonce() - Genera pareja de nonce
decodeJWT() - Descodifica token JWT
validateJWTToken() - Valida audiencia y nonce de JWT
authenticateWithGoogleSupabase() - Función principal de autenticación con reintentos automáticos

Archivos de ejemplo adicionales

SupabasePage.tsx - Ejemplo de componente con manejo de redirección (Web)
SupabaseCreateAccountPage.tsx - Página de registro de cuenta de ejemplo

Pasos siguientes

Por favor, proceda al guía de configuración específica de la plataforma para tu plataforma objetivo:

Si estás utilizando Supabase Google Login - Configuración general para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social Usando @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social Usando @capgo/capacitor-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada Usando @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.