Introducción a la integración de Supabase

Resumen

Esta guía te guiará a través del proceso de 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 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 Capacitor con la autenticación de Supabase
• 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 control de Supabase
   • Habilita el proveedor de autenticación de Google
   • Obtén la URL y la clave anónima de tu proyecto de Supabase

2. Supabase JS SDK

   • Instala Supabase en tu proyecto:

     npm install @supabase/supabase-js

3. Un proyecto Capacitor

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

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

4. Configuración específica de 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 de aplicación completo en el repositorio:

Code Repositorio: Puedes encontrar el repositorio code aquí

La aplicación de ejemplo demuestra:

• Autenticación con correo electrónico y contraseñ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 una gestión especial de nonce para seguridad. La implementación sigue la documentación de inicio de sesión de Google de React Native Generar un:

• (cadena alfanumérica aleatoria segura para URL) rawNonce Autenticación con correo electrónico y contraseña con Supabase
• Hashéalo con SHA-256 para obtener nonceDigest
• Pass nonceDigest a Google Sign-In
• Pass rawNonce a Supabase (Supabase lo hashéa internamente para compararlo)

Validación de JWT

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

• La audiencia del token coincide con sus Client IDs de Google configurados
• La nonce coincide con el digest esperado
• Intentar de nuevo automáticamente en caso de falla de validación (especialmente importante para iOS)

Consideraciones específicas de plataforma

• IOS: La caché de tokens puede causar problemas con el nonce - la implementación maneja esto automáticamente
• Web: Debe llamar isLoggedIn() on montar para manejar las redirecciones de OAuth
• Android: Implementación estándar con configuración de huella SHA-1

Pasos siguientes

Continuar con las guías de configuración:

• Supabase Google Login - Configuración general - Resumen y requisitos previos
• Configuración de Android - Configuración específica de Android
• Configuración de iOS - Configuración específica de iOS
• Configuración de Web - Configuración específica de Web

Iniciar sesión con Apple

• Iniciar sesión con Apple de Supabase - Configuración general - Resumen y requisitos previos
• Configuración de iOS - Configuración específica de iOS
• Configuración de Android - Configuración específica de Android

Continúa desde la introducción de la integració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 @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey @capgo/capacitor-native-biometric 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.