Supabase Google Login en Web

Introducción

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

• el Configuración de inicio de sesión de Google Web
• la Supabase Google Login - General Setup.

Implementación

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

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

The authenticateWithGoogleSupabase La función maneja 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: Manejo de redirección

Crítico: Manejo de redirección

When using Google login on web, you DEBE llamar a cualquier función del complemento cuando suceda la redirección para inicializar el complemento 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 OAuth de ventana emergente funcione correctamente.

Ejemplo de implementación

Agregue esto a su componente que maneja la autenticació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 el SupabasePage.tsx para obtener 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 el Sección de cómo funciona en la guía de configuración general.

Para la referencia completa code, consulte Para la referencia completa Code, consulte la.

También consulte:

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

Importantes Notas

Manejo de Redirecciones

When using Google login on web, you MÁS 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. Puede llamar a isLoggedIn() O initialize() - Ambas desencadenarán el manejo de la redirección.

Es necesario para que el flujo de OAuth funcione correctamente. Sin esto, la ventana emergente no se cerrará después de la autenticación.

Manejo de nonce

La implementación de nonce sigue el patrón desde Documentación de inicio de sesión de Google para React Native:

• rawNonce Supabase hace una hash de signInWithIdToken()
• y la compara con el rawNonce y lo compara con el nonceDigest (hash SHA-256, codificado en hexadecimal) va al
• nonceDigest (Hash SHA-256, codificado en hexadecimal) va a la nonce parámetro en las API de inicio de sesión de Google

Reintentos Automáticos

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

• Si la validación de JWT falla en la primera intento, se desloguea y vuelve a intentarlo una vez.
• Maneja casos donde los tokens cacheados pueden tener noches incorrectas
• Si el reintento también falla, se devuelve un error

Solución de Problemas

Sección titulada “Solución de Problemas”

• Si falla la autenticación:Redirección no funciona isLoggedIn() al montar el componente (ver ejemplo anterior)
• Público inválido: Verifique que los identificadores de cliente de Google coincidan en ambos Google Cloud Console y Supabase
• URLs de redirección autorizadas: Verifique que las URLs de redirección autorizadas estén configuradas en ambos Google Cloud Console y Supabase
• Diferencia en nonce: Revisa los registros del console - la función se repetirá automáticamente, pero puedes cerrar sesión manualmente si es necesario
• Fallo en la validación del token: Asegúrate de utilizar mode: 'online' en la llamada de inicialización para obtener un idToken
• Revisa el aplicativo de ejemplo code para obtener referencias

Continúa desde Supabase Google Login en 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-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-social-login @capgo/capacitor-clave de acceso para el detalle de implementación en @capgo/capacitor-passkey @capgo/capacitor-nativo-biometeorico para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación en dos factores para los detalles de implementación en Autenticación en dos factores.