Configuración general de Supabase Google Login

Introducción

Esta guía te guiará a través de la integración de la autenticación de Google con Supabase utilizando el plugin de inicio de sesión social Capacitor.

Requisitos previos

Antes de empezar, asegúrate de que tienes:

1. Crear un proyecto de Supabase

2. Leído el contexto: fragmento de texto HTML de una guía de estilo más larga de Capgo (clave de página `read_the_style_guide`). Área de la página: sitio web de marketing de Capgo. Rol: oración de copia de sitio web. Visto en: página contributing.astro. Clave de mensaje `read_the_style_guide` (Lee La Guía de Estilo). Configuración general de inicio de sesión de Google

3. guía para configurar las credenciales de OAuth de Google para tu plataforma objetivo. Configuración de credenciales de OAuth de Google para tu plataforma objetivo: siguiendo las guías específicas de la plataforma para configurar las credenciales de OAuth de Google para tu plataforma objetivo:

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

   Nota

   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 el proveedor de autenticación de Google en Supabase

1. Ir a tu Panel de control de Supabase

2. Hacer clic en tu proyecto

   

3. Vaya a la Authentication menú

   

4. Haga clic en la Providers pestaña

   

5. Encuentre el Google proveedor

   

6. Habilite el proveedor

   

7. Agregue las IDs de cliente para las plataformas que planea utilizar

   

   Nota

   Este incluye el ID de cliente de la web, el ID de cliente de iOS y el ID de cliente de Android. Puede omitir proporcionar algunos de ellos, dependiendo de las plataformas que planea utilizar.

8. Haga clic en el Save botón

   

Nota

Usted NO DEBE configurar Client Secret (for OAuth) o Callback URL (for OAuth)o algunas fuentes también pueden sugerir configurar Skip nonce checks ¡Listo! Ahora has habilitado el inicio de sesión con Google con autenticación de Supabase

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

Sección titulada “Cómo funciona el asistente de inicio de sesión con Google y autenticación de Supabase”

Implementación completa

La implementación completa está disponible en el

archivo del ejemplo de aplicación archivo del ejemplo de aplicación supabaseAuthUtils.ts archivo del ejemplo de aplicación

1. Generación de nonce

La implementación genera un pair de nonce seguro siguiendo los requisitos de nonce de Supabase 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 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 nonce digest en el token de ID
• rawNonce se pasa a Supabase → Supabase hashifica el nonce bruto y compara con el nonce del token

2. Inicio de sesión de 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 cumple varios propósitos importantes:

1. 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.

2. Problemas de caché de tokensOn 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 'mismatch de nonce'. Al validar antes de enviar a Supabase, podemos detectar este problema temprano y reintentar automáticamente con un token fresco.

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

4. Mejor Manejo de Errores: Detectar problemas antes de enviar a Supabase permite la lógica de reintentos automática, lo cual es esencial para manejar problemas de caché de iOS de manera transparente.

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

1. Se desconecta de Google (elimina tokens caché - crítico en iOS)
2. Se vuelve a autenticar una vez (obliga la generación de un token fresco con nonce correcto)
3. Si el reintentar también falla, devuelve un error

4. Inicio de sesión con 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
});

Complete la referencia de Code

La implementación completa está disponible en el archivo del ejemplo de aplicación’s 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() - Desencripta el token JWT
• validateJWTToken() - Valida el público y nonce del token JWT
• authenticateWithGoogleSupabase() - Función principal de autenticación 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 a la 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

Continúa 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, 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-native-biometric, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.