Inicio de Sesión de Google con Supabase en Web

Introducción

Esta guía te ayudará a integrar el inicio de sesión de Google con Supabase Authentication en Web. Se asume que ya has completado:

• la configuración de inicio de sesión de Google en Web
• la Configuración General de inicio de sesión de Google con Supabase.

Implementación

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

Uso del Helper de Autenticación

La función authenticateWithGoogleSupabase maneja todo el flujo de autenticación:

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navega a tu área autenticada
} else {
  console.error('Error:', result.error);
}

Crítico: Manejo de Redirección

Crítico: Manejo de Redirección

Cuando uses el inicio de sesión de Google en web, DEBES llamar cualquier función del plugin cuando ocurra la redirección para inicializar el plugin y así pueda manejar la redirección y cerrar la ventana emergente. Puedes llamar ya sea isLoggedIn() O initialize() - ambas activarán el manejo de redirección.

Esto es esencial para que el flujo de OAuth con ventana emergente funcione correctamente.

Ejemplo de Implementación

Agrega esto a tu componente que maneja el inicio de sesión de Google:

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

function SupabasePage() {
  // Verifica el estado de inicio de sesión de Google al montar para invocar el manejo de redirección
  // Esto no sirve ningún propósito funcional en la UI pero asegura
  // que cualquier redirección OAuth pendiente sea procesada apropiadamente
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // No usamos el resultado, esto es solo para activar el manejo de redirección
      } catch (error) {
        // Ignora errores - esto es solo para el manejo de redirección
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... resto de tu componente
}

Consulta el SupabasePage.tsx para un ejemplo completo.

Cómo Funciona

Para una explicación detallada de cómo funciona el 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 Cómo Funciona en la guía de Configuración General.

Para la referencia completa del código, consulta la sección Referencia Completa del Código en la guía de Configuración General.

También consulta:

• 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

Cuando uses el inicio de sesión de Google en web, DEBES llamar cualquier función del plugin cuando ocurra la redirección para inicializar el plugin y así pueda manejar la redirección y cerrar la ventana emergente. Puedes llamar ya sea isLoggedIn() O initialize() - ambas activarán el manejo de redirección.

Esto es esencial para que el flujo de OAuth con ventana emergente funcione correctamente. Sin esto, la ventana emergente no se cerrará después de 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 va al signInWithIdToken() de Supabase
• Supabase crea un hash del rawNonce y lo compara con el nonceDigest que está incluido en el token ID de Google Sign-In
• nonceDigest (hash SHA-256, codificado en hexadecimal) va al parámetro nonce en las APIs de Google Sign-In

Reintento Automático

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

• Si la validación de JWT falla en el primer intento, cierra sesión y reintenta una vez
• Esto maneja casos donde los tokens en caché pueden 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 estar llamando isLoggedIn() al montar el componente (ver ejemplo arriba)
• Audiencia inválida: Verifica que tus IDs de cliente de Google coincidan tanto en la consola de Google Cloud como en Supabase
• URLs de redirección autorizadas: Verifica que las URLs de redirección autorizadas estén configuradas tanto en la consola de Google Cloud como en Supabase
• Discrepancia de nonce: Revisa los logs de la consola - la función reintentará automáticamente, pero puedes cerrar sesión manualmente primero si es necesario
• La validación del token falla: Asegúrate de estar usando mode: 'online' en la llamada de inicialización para obtener un idToken
• Revisa el código de la aplicación de ejemplo como referencia