Supabase Google Login - Configuración general

Introducción

Esta guía te guiará a través de la integración de Google Sign-In con Supabase Authentication utilizando el Capacitor plugin de inicio de sesión social. 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úrese de tener:

1. Creado un proyecto de Supabase

2. Leído el Configuración general de inicio de sesión de Google guía para configurar las credenciales de OAuth de Google

3. Siga las guías específicas de la plataforma para configurar las credenciales de OAuth de Google para su plataforma objetivo:

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

   Nota

   Antes de empezar el tutorial de Supabase, necesita generar los identificadores de cliente para las plataformas que planea utilizar. Los utilizará en el paso 7 de esta guía.

Habilitar proveedor de autenticación de Google en Supabase

1. Ir a tu Panel de control de Supabase

2. Hacer clic en tu proyecto

   

3. Ir al Authentication menú

   

4. Hacer clic en la Providers pestaña

   

5. Encuentra el Google proveedor

   

6. Habilitar el proveedor

   

7. Agregar los identificadores de cliente para las plataformas que planeas usar

   

   Nota

   Este incluye el identificador de cliente web, el identificador de cliente de iOS y el identificador de cliente de Android. Puedes omitir proporcionar algunos de ellos, dependiendo de las plataformas que planeas usar.

8. Haz clic en el Save botón

   

Nota

Tú NO DEBERÍAS configurar Client Secret (for OAuth) o Callback URL (for OAuth)Algunas fuentes también pueden sugerir configurar Skip nonce checks para Google en iOS, pero con esta guía esto no es necesario.

¡Eso es todo, has habilitado ahora el inicio de sesión con Google con autenticación de Supabase!

Cómo funciona el Asistente de inicio de sesión con Google con autenticación de Supabase

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

Implementación completa

La implementación completa está disponible en el archivo del supabaseAuthUtils.ts ejemplo.

1. Generación de nonce

La implementación genera un pair de nonce seguro según los requisitos de nonce de Supabase 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 };
}

__CAPGO_KEEP_0__

• rawNonce: cadena alfanumérica segura para URL (64 caracteres hexadecimales)
• nonceDigest: hash SHA-256 de rawNonce (codificado en hexadecimal)
• nonceDigest se pasa a Google Sign-In → Google incluye el digest de nonce en el token de ID
• rawNonce se pasa a Supabase → Supabase hash la nonce bruta y compara con el nonce del token

2. Inicio de sesión con Google

La función inicia el plugin y se 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 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 tiene varios propósitos importantes:

1. Prevenir solicitudes inválidasSi el token tiene una audiencia o un nonce incorrectos, Supabase rechazará el token de todos modos. Validar primero evita llamadas innecesarias API y proporciona mensajes de error más claros.

2. Problemas de caché de tokensSi en algunas plataformas (especialmente iOS), Google Sign-In SDK almacena tokens para mejorar el rendimiento. Cuando se devuelve un token almacenado, el token almacenado puede haber sido generado con un diferente nonce (o sin nonce en absoluto), lo que provoca que Supabase rechace el token con un error de 'nonce mismatch'. Al validar antes de enviar a Supabase, podemos detectar este problema temprano y reintentar automáticamente con un token fresco.

3. Seguridad (iOS): La validación asegura que el token se emitió para sus Client IDs de Google específicos, evitando posibles problemas de seguridad al utilizar tokens destinados a otras aplicaciones.

4. Mejor manejo de erroresSi la validación falla, la función realiza automáticamente:

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

1. Cierra sesión en Google (elimina tokens caché - crítico en iOS)
2. Repite la autenticación una vez (obliga la generación de un token fresco con el nonce correcto)
3. Si el retry 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
});

Completa la referencia de Code

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

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

Archivos de ejemplo adicionales

• SupabasePage.tsx - Componente de ejemplo 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:

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

Siga adelante desde Supabase Google Login - Configuración general

Si estás utilizando Supabase Google Login - Configuración general para planificar la autenticación y los flujos de cuenta, conectéalo con Usando @capgo/capacitor-login social para la capacidad nativa en Usando @capgo/capacitor-login-social, @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-biométrica-nativa para el detalle de implementación en @capgo/capacitor-biométrica-nativa, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.