Supabase Google Login - Configuración general

Introducción

Esta guía te enseñará a integrar Google Sign-In con Supabase Authentication usando el plugin Social Login de Capacitor. Esta configuración te permite usar el Google Sign-In nativo en plataformas móviles mientras aprovechas Supabase Auth para la autenticación del backend.

Requisitos

Antes de empezar, asegúrate de:

1. Haber creado un proyecto en Supabase

2. Lee la Configuración general de Google Login guía para configurar las credenciales de Google OAuth

3. Sigue las guías específicas de cada plataforma para configurar las credenciales de Google OAuth en tu plataforma de destino:

   • Configuración de Android
   • iOS Setup
   • Configuración Web

   Nota

   Antes de empezar el tutorial de Supabase, debes generar los client IDs para las plataformas que vayas a usar. Los necesitarás en el paso 7 de esta guía.

Habilitar el proveedor de Google OAuth en Supabase

1. Ve a tu Dashboard de Supabase

2. Haz clic en tu proyecto

   

3. Dirígete al Authentication menú

   

4. Haz clic en el Providers pestaña

   

5. Busca el Google provider

   

6. Habilita el provider

   

7. Añade los client IDs de las plataformas que vayas a usar

   

   Nota

   Esto incluye el web client ID, el iOS client ID y el Android client ID. Puedes omitir algunos según las plataformas que planees usar.

8. Haz clic en el Save botón

   

Nota

Usted NO SE DEBE configurar Client Secret (for OAuth) o Callback URL (for OAuth). Algunas fuentes también podrían sugerir configurar Skip nonce checks para Google en iOS, pero con esta guía no hace falta.

¡Listo! Ya has habilitado Google Sign-In con Supabase Authentication 🎉

Cómo funciona Google Sign-In con Supabase Authentication Helper

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

Implementación completa

La implementación completa está disponible en la app de ejemplo supabaseAuthUtils.ts archivo.

1. Generación de nonce

La implementación genera un par de nonce seguro siguiendo los requisitos 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 };
}

Flujo:

• rawNonce: Cadena aleatoria segura (64 caracteres hex)
• nonceDigest: Hash SHA-256 de rawNonce (codificado en hex)
• nonceDigest se envía a Google Sign-In → Google incluye el digest del nonce en el ID token
• rawNonce se envía a Supabase → Supabase hace el hash del nonce original y lo compara con el nonce del token

2. Inicio de sesión con Google

La función inicializa el plugin e inicia sesión con 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 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 enviarlo a Supabase cumple varios propósitos importantes:

1. Prevenir peticiones inválidas: Si el token tiene un audience incorrecto o un error de nonce, Supabase lo rechazará de todos modos. Validar primero evita llamadas innecesarias a API y ofrece mensajes de error más claros.

2. Problemas de caché de tokens: En algunas plataformas (especialmente iOS), el SDK de Google Sign-In puede cachear tokens para mejorar el rendimiento. Si se devuelve un token en caché, este podría haber sido generado con un nonce distinto (o sin nonce), causando que Supabase lo rechace con un error de “nonce mismatch”. Al validar antes de enviar a Supabase, detectamos este problema pronto y podemos reintentar automáticamente con un token nuevo.

3. Seguridad (iOS): En iOS, la validación asegura que el token fue emitido para tus Google Client IDs específicos, evitando riesgos de seguridad al usar tokens destinados a otras aplicaciones.

4. Mejor manejo de errores: Detectar problemas antes de Supabase permite implementar lógica de reintento automático, algo esencial para gestionar los problemas de caché en iOS de forma transparente.

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

1. Cierra la sesión en Google (limpia los tokens en caché; crítico en iOS)
2. Reintenta la autenticación una vez (fuerza la generación de un nuevo token con el nonce correcto)
3. Si el reintento también falla, devuelve un error

4. Inicio de sesión en Supabase

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 la de la app de ejemplo supabaseAuthUtils.ts archivo, que incluye:

• getUrlSafeNonce() - Genera un nonce aleatorio seguro para URL
• sha256Hash() - Hashea el string con SHA-256
• getNonce() - Genera el par de nonces
• decodeJWT() - Decodifica el token JWT
• validateJWTToken() - Valida el audience y el nonce del JWT
• authenticateWithGoogleSupabase() - Función de autenticación principal con reintento automático

Archivos de ejemplo adicionales

• SupabasePage.tsx - Componente de ejemplo con manejo de redirección (Web)
• SupabaseCreateAccountPage.tsx - Ejemplo de página de registro

Próximos pasos

Consulta la guía de configuración específica para tu plataforma:

• Configuración de Android
• iOS Setup
• Configuración Web

Continuar desde Supabase Google Login - Configuración general

Si estás usando Supabase Google Login - Configuración general para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa al usar @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.