Supabase Google Login en Web

Introducción

Esta guía te ayudará a integrar la autenticación de Google con 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 aplicación de ejemplo’s supabaseAuthUtils.ts archivo. Esta guía explica los conceptos clave y cómo utilizarlo.

Uso del Asistente de Autenticación

El authenticateWithGoogleSupabase 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 Redirecciones

Crítico: Manejo de Redirecciones

Al utilizar el inicio de sesión de Google en web, 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 cualquiera de isLoggedIn() Opción OR initialize() - Ambas activarán el manejo de la redirección.

Este es fundamental 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 con 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 la sección de "Cómo funciona" en la Guía de Configuración General.

Para la referencia completa del code, consulte la sección de "Referencia completa del Code" en la Guía de Configuración General.

También consulte:

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

Sección titulada "Notas Importantes"

Sección titulada "Manejo de Redirección"

Al utilizar el inicio de sesión de Google en web, usted DEBE llamar a cualquier función del complemento cuando ocurra 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 la gestión de redirecciones.

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

Gestión de Número de Sesión

La implementación del número de sesión sigue el patrón de la documentación de inicio de sesión de Google en React Native va a Supabase’s:

• rawNonce __CAPGO_KEEP_0__ signInWithIdToken()
• Supabase crea una huella de este rawNonce y la compara con la nonceDigest que se incluye en el token de ID de Google Sign-In
• nonceDigest (huella SHA-256, codificada en hexadecimal) se envía al nonce parámetro en las API de inicio de sesión de Google

Reintentos automáticos

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

• 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 incorrectas
• Si el reintento también falla, se devuelve un error

Ayuda con problemas

Si falla la autenticación:

• No funciona la redirección: Asegúrate de que estás llamando isLoggedIn() : Asegúrate de que estás llamando en el montaje del componente (ver ejemplo anterior)
• Audencia inválida: Verifica que los identificadores de cliente de Google coincidan en tanto en Google Cloud Console como en Supabase
• URLs de redirección autorizadas: Verifica que las URLs de redirección autorizadas estén configuradas tanto en Google Cloud Console como en Supabase
• Colisión de nonce: Verifica los registros del consola - la función se repetirá automáticamente, pero puedes cerrar sesión manualmente si es necesario
• Fallas de validación de tokenAsegúrate de utilizar mode: 'online' en la llamada de inicialización para obtener un idToken
• Revisa el ejemplo de aplicación code para referencia

Sigue adelante 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 Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-login social para los detalles de implementación en @capgo/capacitor-login social @capgo/capacitor-clave de acceso para los detalles de implementación en @capgo/capacitor-clave de acceso @capgo/capacitor-autenticación biométrica nativa para los detalles de implementación en @capgo/capacitor-autenticación biométrica nativa, y Autenticación en dos factores para los detalles de implementación en Autenticación en dos factores.