Supabase Google Login 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 Web. Se asume que ya has completado:

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

Implementación

La implementación completa está disponible en el archivo del aplicación de ejemplo. Este manual explica los conceptos clave y cómo utilizarlo. supabaseAuthUtils.ts Usando la Ayuda de Autenticación

Sección titulada “Usando la Ayuda 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);
}

Crítico: Manejo de Redirección

Crítico: Manejo de Redirección

Cuando se utiliza el inicio de sesión de Google en la web, usted DEBE 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 isLoggedIn() O initialize() - ambos desencadenarán el manejo de la 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
}

Consulte 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, 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.

Consulte también:

• SupabasePage.tsx - Ejemplo de componente con manejo de redirección
• SupabaseCreateAccountPage.tsx - Ejemplo de página de registro

Notas importantes

Manejo de redirecciones

Cuando se utiliza el inicio de sesión de Google en web, usted DEBE 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 de popup. Puede llamar a isLoggedIn() O initialize() - ambos desencadenarán el manejo de la redirección.

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

Gestión de nonce

La implementación de nonce sigue el patrón de la documentación de inicio de sesión con Google de React Native va a Supabase’s:

• rawNonce Supabase hace una suma de hash de signInWithIdToken()
• y la compara con el rawNonce que se incluye en el token de ID de inicio de sesión de Google nonceDigest que es una suma de hash SHA-256, codificada en hexadecimal, va al
• nonceDigest parámetro en las API de inicio de sesión de Google nonce Reintentos automáticos

Reintentos automáticos

La implementación incluye lógica de reintentos automáticos:

• Si la validación de JWT falla en el primer intento, se cierra sesión y se vuelve a intentar una vez
• Esto maneja casos donde los tokens en caché pueden tener noches incorrectos
• Si el reintento 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 inválido: Verifica que los identificadores de cliente de Google coincidan en ambos Google Cloud Console y Supabase
• URLs de redireccion autorizadas: Asegúrate de que las URLS de redireccion autorizadas estén configuradas en ambos Google Cloud Console y Supabase
• Diferencia de nonce: Revisa los registros de la consola - la función se repetirá automáticamente, pero puedes cerrar sesión manualmente si es necesario
• Fallo de validación de token: Asegúrate de utilizar mode: 'online' en la llamada de inicialización para obtener un idToken
• Revisa la aplicación de ejemplo __CAPGO_KEEP_0__ example app code Sigue adelante desde Supabase Google Login en Web

Keep going from Supabase Google Login on Web

Si estás utilizando Supabase Google Login en Web 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, @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social, @capgo/capacitor-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada, @capgo/capacitor-autenticación-biometrica-nativa para el detalle de implementación en @capgo/capacitor-autenticación-biometrica-nativa, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.