Introducción a la Integración de Supabase

Resumen

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 social 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 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 empezar, asegúrese de tener:

1. Un proyecto de Supabase

   • Crear un proyecto en Panel de control de Supabase
   • Habilitar proveedor de autenticación de Google
   • Obtener la URL y la clave anónima de su proyecto de Supabase

2. Supabase JS SDK

   • Instalar Supabase en su proyecto:

     npm install @supabase/supabase-js

3. Un proyecto de Capacitor

   • Una aplicación existente de Capacitor
   • Capacitor Inicio de sesión con redes sociales 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

Disponible en el repositorio una aplicación funcional completa:

Code Repositorio: Puede encontrar el repositorio code aquí

La aplicación de ejemplo demuestra:

• Autenticación de correo electrónico/contraseña con Supabase
• Integración de inicio de sesión de Google (Android, iOS y Web)
• Un almacén de claves de valor 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

Manipulación de nonce

Supabase requiere una manipulación especial de nonce para seguridad. La implementación sigue las instrucciones de la documentación de inicio de sesión de Google de React Native La documentación de inicio de sesión de Google de React Native:

• Genera un rawNonce (cadena alfanumérica aleatoria segura para URL)
• Hashéalo con SHA-256 para obtener nonceDigest
• Pasa nonceDigest a Google Sign-In
• Pasa rawNonce a Supabase (Supabase lo hashéa internamente para comparar)

Validación de JWT

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

• El destinatario del token coincida con los IDs de cliente de Google configurados
• La nonce coincida con el digest esperado
• Reintentar automáticamente en caso de falla de validación (sobre todo importante para iOS)

Consideraciones específicas de plataforma

• iOS: El caché de tokens puede causar problemas con nonce - la implementación maneja esto automáticamente
• Web: Debe llamar isLoggedIn() al montar para manejar los redireccionamientos de OAuth
• Android: Implementación estándar con configuración de huella de SHA-1

Pasos siguientes

Continuar con las guías de configuración:

• Supabase Google Login - Configuración general - Visión general 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

Inicio de sesión con Apple

• Supabase Apple Login - 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

Sigue adelante 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-social-login para los detalles de implementación en @capgo/capacitor-social-login @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.