Introducción a la integración con Supabase

Resumen

Este tutorial te guiará en la configuración de la autenticación de Supabase con el plugin Capacitor Social Login. Esta integración te permite usar proveedores de inicio de sesión social nativos (Google, Apple, Facebook, Twitter) en plataformas móviles, aprovechando Supabase Auth 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 Social Login de Capacitor con Supabase Auth
• Configuración específica para Android, iOS y Web
• Cómo manejar nonces de forma segura para Supabase

Lo que necesitarás

Antes de empezar, asegúrate de tener:

1. Un proyecto de Supabase

   • Crea un proyecto en Panel de Supabase
   • Habilita el proveedor OAuth de Google
   • Obtén la URL y la clave anon 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
   • Plugin Capacitor Social Login instalado:

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

4. Configuración de Google por plataforma

   • Completa la configuración de Google Sign-In para tus plataformas:
     • Configuración de Google Login en Android
     • Configuración de Google Login en iOS
     • Configuración web de Google Login

Aplicación de ejemplo

Tienes un ejemplo completo y funcional en el repositorio:

Repositorio Code: Puedes encontrar el repositorio code aquí

La app de ejemplo muestra:

• Autenticación por correo electrónico/contraseña con Supabase
• Integración de Google Sign-In (Android, iOS y Web)
• Un almacén de clave-valor simple usando tablas PostgreSQL de Supabase
• Almacenamiento de datos específicos del usuario con Row Level Security (RLS)

Detalles clave de la implementación

Gestión del nonce

Supabase requiere un manejo especial de nonce por seguridad. La implementación sigue el documentación de React Native Google Sign In:

• Genera un rawNonce (cadena aleatoria segura para URL)
• Hashealo con SHA-256 para obtener nonceDigest
• Pasa nonceDigest a Google Sign-In
• Pasa rawNonce a Supabase (Supabase lo hashea internamente para la comparación)

Validación de JWT

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

• El audience del token coincida con tus Google Client IDs configurados
• El nonce coincida con el digest esperado
• Reintento automático ante fallos de validación (crucial en iOS)

Consideraciones por plataforma

• iOS: El caché de tokens puede causar problemas con el nonce; la implementación lo gestiona automáticamente
• Web: Se debe llamar a isLoggedIn() al montar para manejar redirecciones OAuth
• Android: Implementación estándar con configuración del fingerprint SHA-1

Próximos pasos

Continúa 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 para Android
• iOS Setup - Configuración específica para iOS
• Configuración web - Configuración específica para Web

Iniciar sesión con Apple

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

Continuar desde la introducción a la integración con Supabase

Si estás usando Introducción a la integración con Supabase para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.