Iniciar sesión con Supabase y Google en Web

Introducción

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

• el Configuración de inicio de sesión de Google en la web
• la Configuración general de inicio de sesión de Google de Supabase.

Implementación

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

Sección titulada “Usando el Ayudante de Autenticación”

función maneja todo el flujo de autenticación: authenticateWithGoogleSupabase Copiar a portapapeles

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

Sección titulada “Crítico: Manejo de Redirecciones”

Crítico: Manejo de Redirección

Al utilizar inicio de sesión de Google en la web, usted DEBE llamar a cualquier función del plugin cuando ocurra la redirección para inicializar el plugin para que pueda manejar la redirección y cerrar la ventana emergente de popup. Puede llamar a isLoggedIn() O initialize() - ambos desencadenarán el manejo de redirección.

Esto es esencial para que el flujo de inicio de sesión de OAuth funcione correctamente.

Ejemplo de Implementación

Agregue esto a su componente que maneja el inicio de sesión de Google:

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
}

Ver en Página de Supabase.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, consulte la sección Cómo Funciona en la guía de configuración general.

Para la referencia completa code, consulte la sección de referencia completa Code en la guía de configuración general.

También consulte:

• Página de Supabase.tsx - Componente de ejemplo con manejo de redirección
• Página de Creación de Cuenta de Supabase.tsx - Página de ejemplo de creación de cuenta

Notas importantes

Gestión de redirecciones

Cuando se utiliza el inicio de sesión de Google en la web, usted __CAPGO_KEEP_0__ debe isLoggedIn() llamar a cualquier función del plugin cuando suceda la redirección para inicializar el plugin para que pueda manejar la redirección y cerrar la ventana emergente. Puede llamar a initialize() o

- tanto funcionarán para manejar la redirección.

Esto es fundamental para que el flujo de inicio de sesión de OAuth funcione correctamente. Sin esto, la ventana emergente no se cerrará después de la autenticación.

La implementación de nonce sigue el patrón del documento de React Native Google Sign In va a Supabase’s:

• rawNonce Supabase hace una hash de signInWithIdToken()
• y la compara con el rawNonce que se incluye en el token de ID de Google Sign-In nonceDigest (hash SHA-256, codificado en hexadecimal) va al
• nonceDigest parámetro en las API de Google Sign-In nonce Reintentos Automáticos

Sección titulada “Reintentos Automáticos”

Automatic Retry

• Si la validación de JWT falla en el primer intento, se desloguea y se vuelve a intentar una vez
• Esto maneja casos donde los tokens almacenados en caché pueden tener noches incorrectas
• Si el intento de repetición también falla, se devuelve un error

Solución de problemas

Si falla la autenticación:

• No funciona la redirección: Asegúrate de que estés llamando isLoggedIn() en el montaje del componente (ver ejemplo anterior)
• Público no válido: Verifica que tus IDs de cliente de Google coincidan en ambos Google Cloud Console y Supabase
• URLs de redirección autorizadas: Verifique que las URLs de redireccion autorizadas estén configuradas tanto en Google Cloud Console como en Supabase
• No coincidencia de nonce: Verifique los registros del console - la función se repetirá automáticamente, pero puede cerrar sesión manualmente primero si es necesario
• Fallo de validación de token: Asegúrese de utilizar mode: 'online' en la llamada de inicialización para obtener un idToken
• Revisar el aplicación de ejemplo code para referencia