Introducción de 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 social 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

   • 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 de Capacitor existente
   • El plugin de inicio de sesión social de 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í

El ejemplo de aplicación demuestra:

• Autenticación por correo electrónico/contraseña con Supabase
• Integración de inicio de sesión de Google (Android, iOS y Web)
• Un almacén de valores clave 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 aleatoria segura para URL) rawNonce Nonce
• Hashéalo con SHA-256 para obtener nonceDigest
• Pass nonceDigest a Google Sign-In
• Pass rawNonce a Supabase (Supabase lo hashé internamente para compararlo)

Validación de JWT

La implementación de ejemplo incluye la 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 (especialmente importante para iOS)

Consideraciones específicas de plataforma

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

Pasos siguientes

Supabase Google Login - Configuración general

• Pasos siguientes - 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 Usando @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 de dos factores para los detalles de implementación en Autenticación de dos factores.