Supabase Google Login en Web

Introducción

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

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

Implementación

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

Usando la Ayuda 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

Cuando se utiliza 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 del popup. Puede llamar a cualquiera de archivo. Esta guía explica los conceptos clave y cómo utilizarlo. isLoggedIn() O initialize() - ambas activarán el manejo de redirección.

Esto es fundamental para que el flujo de inicio de sesión con 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 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 Cómo Funciona sección en la Guía de Configuración General.

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

También consulte:

• SupabasePage.tsx - Componente de ejemplo con manejo de redirección
• SupabaseCreateAccountPage.tsx - Página de ejemplo de creación de cuenta

Notas Importantes

Manejo de Redirección

Al utilizar el inicio de sesión de Google en la 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 de OAuth funcione correctamente. Sin esto, la ventana emergente no se cerrará después de la autenticación.

Gestión de Número Aleatorio

va a Supabase’s Section titled “Nonce Handling”:

• rawNonce When using Google login on web, you signInWithIdToken()
• Supabase crea una huella de rawNonce y la compara con el nonceDigest que se incluye en el token de ID de Google Sign-In
• nonceDigest que se envía al nonce parámetro en las API de Google Sign-In

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 reintentan 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ónAsegúrate de que estás llamando isLoggedIn() en el montaje del componente (ver ejemplo anterior)
• Público inválidoVerifica que los identificadores de cliente de Google coincidan en ambos Google Cloud Console y Supabase
• URLs de redirección autorizadasVerifica que las URLs de redirección autorizadas estén configuradas en ambos Google Cloud Console y Supabase
• Diferencia en nonceVerifica los registros del consola - la función se repetirá automáticamente, pero puedes cerrar sesión manualmente si es necesario
• Fallo en la validación del 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 con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login, @capgo/capacitor-iniciación-de-sesión-social para el detalle de implementación en @capgo/capacitor-iniciación-de-sesión-social, @capgo/capacitor-clave-de-llave para el detalle de implementación en @capgo/capacitor-clave-de-llave, @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y autenticación de dos factores para el detalle de implementación en autenticación de dos factores.