Introducción de la integración de Supabase

Listo para pegar

Esta guía te guiará a través de la configuración de la autenticación de Supabase con el plugin de inicio de sesión social Capacitor. Esta integración te permite utilizar proveedores de inicio de sesión sociales nativos (Google, Apple, Facebook, Twitter) en plataformas móviles mientras aprovechas la autenticación de Supabase para la autenticación en el backend y PostgreSQL para el almacenamiento de datos.

Lo que aprenderás

• Cómo configurar la autenticación de Supabase
• Cómo integrar el plugin de inicio de sesión social de Capacitor con Supabase Auth
• Configuración específica de plataforma para Android, iOS y Web
• Cómo manejar noches de manera segura para Supabase

Lo que necesitarás

Antes de comenzar, asegúrate de tener:

1. Un proyecto de Supabase

   • Crea un proyecto en Panel de Supabase
   • Habilitar proveedor de autenticación de Google OAuth
   • Obtén la URL de tu proyecto de Supabase y la clave anon

2. Supabase JS SDK

   • Instale Supabase en su proyecto:

     npm install @supabase/supabase-js

3. Un proyecto Capacitor

   • Una aplicación Capacitor existente
   • Plugin de inicio de sesión social instalado: Capacitor

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Configuración específica de la plataforma de Google

   • Complete la configuración de inicio de sesión de Google para tus plataformas objetivo:
     • Configuración de inicio de sesión de Google para Android
     • Configuración de inicio de sesión de Google para iOS
     • Configuración de inicio de sesión de Google para Web

Ejemplo de aplicación

Está disponible un ejemplo completo y funcional en el repositorio:

Code Repositorio: Puedes encontrar el repositorio code aquí

El ejemplo de aplicación demuestra:

• Autenticación por correo electrónico/contraaseña con Supabase
• Integración de inicio de sesión de Google (Android, iOS y Web)
• Un almacén de valores simple utilizando tablas PostgreSQL de Supabase
• Almacenamiento de datos específicos del usuario con seguridad de nivel de fila (RLS)

Detalles de implementación clave

Gestión de nonce

Supabase requiere un manejo especial de nonce para seguridad. La implementación sigue el Documentación de inicio de sesión de Google para React Native:

• Genera un rawNonce Hasharlo con SHA-256 para obtener
• Hashéalo con SHA-256 para obtener nonceDigest
• Pasa nonceDigest a Google Sign-In
• Pasa rawNonce a Supabase (Supabase lo almacena internamente para compararlo)

Validación de JWT

La implementación de ejemplo incluye validación de JWT para asegurar:

• El destinatario del token coincide con sus Client IDs de Google configurados
• El nonce coincide con el digest esperado
• Reintentos automáticos en caso de falla de validación (sobre todo importante para iOS)

Consideraciones específicas de plataforma

• iOS: La implementación maneja automáticamente este problema de nonce.
• Web: Debe llamar isLoggedIn() on mount para manejar las redirecciones de OAuth
• Android: Implementación estándar con configuración de huella SHA-1

Próximos Pasos

Continúa con las guías de configuración:

• Continuar con las guías de configuración: Supabase Google Login - Configuración general
• Configuración de Android - Configuración específica de Android
• iOS Setup - Configuración específica de iOS
• Web Setup - Configuración específica de Web

Inicio de sesión con Apple

• Supabase Apple Login - General Setup - Resumen y requisitos previos
• iOS Setup - Configuración específica de iOS
• Configuración de Android - Configuración específica de Android

Continúa desde la introducción de Supabase

Si estás utilizando Introducción de la integración de Supabase 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 Usando @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social Usando @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey, @capgo/capacitor-nativo-biometria 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.