Supabase Google Login en Web

Introducción

Esta guía te ayudará a integrar Google Sign-In con Supabase Authentication en la Web. Se asume que ya has completado:

• el Configuración de Google Login para Web
• el Supabase Google Login - Configuración general.

Implementación

La implementación completa está disponible en la de la app de ejemplo supabaseAuthUtils.ts archivo. Esta guía explica los conceptos clave y cómo usarlo.

Uso del Authentication Helper

El authenticateWithGoogleSupabase función gestiona todo el flujo de autenticación:

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

Crítico: Gestión de redirecciones

Crítico: Gestión de redirecciones

Al usar el login de Google en la web, DEBES llamar a cualquier función del plugin cuando se produzca la redirección para inicializarlo; así podrá gestionar la redirección y cerrar la ventana emergente. Puedes llamar a isLoggedIn() O BIEN initialize() - ambos activarán la gestión de redirecciones.

Esto es esencial para que el flujo de popups de OAuth funcione correctamente.

Ejemplo de implementación

Añade esto al componente que gestiona el Google Sign-In:

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

Consulta la SupabasePage.tsx para un ejemplo completo.

Cómo funciona

Para una explicación detallada del flujo de autenticación, incluyendo la generación de nonce, la validación de JWT y el inicio de sesión en Supabase, consulta la sección How It Works en la guía de General Setup.

Para la referencia completa de code, consulta la sección Complete Code Reference en la guía de General Setup.

Also see:

• SupabasePage.tsx - Componente de ejemplo con manejo de redirección
• SupabaseCreateAccountPage.tsx - Página de ejemplo para crear cuenta

Notas importantes

Manejo de redirección

Al usar el login de Google en la web, DEBES llamar a cualquier función del plugin cuando se produzca la redirección para inicializarlo; así podrá gestionar la redirección y cerrar la ventana emergente. Puedes llamar a isLoggedIn() O BIEN initialize() - ambos activarán el manejo de la redirección.

Esto es esencial para que el flujo de OAuth con popup funcione correctamente. Sin esto, la ventana emergente no se cerrará tras la autenticación.

Manejo de Nonce

La implementación del nonce sigue el patrón de la documentación de React Native Google Sign In:

• rawNonce se envía a la de Supabase signInWithIdToken()
• Supabase genera un hash de rawNonce y lo compara con el nonceDigest que se incluye en el ID token de Google Sign-In
• nonceDigest (hash SHA-256, codificado en hex) se envía al nonce parámetro en las APIs de Google Sign-In

Reintento automático

La implementación incluye lógica de reintento automático:

• Si la validación del JWT falla al primer intento, cierra la sesión e intenta una vez más
• Esto cubre casos en que los tokens en caché podrían tener nonces incorrectos
• Si el reintento también falla, se devuelve un error

Solución de problemas

Si la autenticación falla:

• La redirección no funciona: Asegúrate de llamar a isLoggedIn() al montar el componente (ver ejemplo anterior)
• Audience inválida: Verifica que tus Google Client IDs coincidan en Google Cloud Console y Supabase
• URLs de redirección autorizadas: Comprueba que las URLs de redirección autorizadas estén configuradas en Google Cloud Console y Supabase
• Error de nonce: Revisa los logs de la consola; la función reintentará automáticamente, pero puedes cerrar sesión manualmente si es necesario
• Fallo en la validación del token: Asegúrate de estar usando mode: 'online' en la llamada a initialize para obtener un idToken
• Revisa la app de ejemplo code como referencia

Continúa con el login de Google en Supabase para Web

Si estás usando Supabase Google Login en Web 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.