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 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 Capacitor plugin de inicio de sesión social 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 control de Supabase
   • Habilitar proveedor de autenticación de Google OAuth
   • Obtenga la URL de su proyecto de Supabase y la clave anonima

2. Supabase JS SDK

   • Instale Supabase en su 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 de Google específica de plataforma

   • Complete the Google Sign-In setup for your target platforms:
     • Configuración de inicio de sesión de Google para tus plataformas objetivo:
     • 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

Un ejemplo de aplicación completo está disponible en el repositorio:

Code Repositorio: Puedes encontrar el repositorio code aquí

El ejemplo de aplicación demuestra:

• Autenticación de correo electrónico/contrasena con Supabase
• Integración de inicio de sesión de Google (Android, iOS y Web)
• A un simple almacén de valores usando tablas PostgreSQL de Supabase
• Almacenamiento de datos específicos del usuario con seguridad de nivel de fila (RLS)

Detalles de implementación de la clave

Manejo de nonce

Supabase requiere un manejo especial de nonce para la seguridad. La implementación sigue la documentación de Generar un:

• (cadena aleatoria segura para URL) rawNonce Hasharlo con SHA-256 para obtener
• Enviar nonceDigest
• __CAPGO_KEEP_0__ nonceDigest a Google Sign-In
• Pass rawNonce a Supabase (Supabase lo almacena internamente para comparar)

Validación de JWT

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

• El destinatario del token coincida con sus Client IDs de Google configurados
• El 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: La caché de tokens puede causar problemas de nonce - la implementación maneja esto automáticamente
• Web: Debe llamar isLoggedIn() en montaje para manejar las redirecciones de OAuth
• Android: Implementación estándar con configuración de huella digital 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 general de Web

Inicio de sesión con Apple

• Configuración general de Supabase Apple Login - 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 a la Integración de Supabase

Si estás utilizando Introducción a 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-clave-privada para el detalle de implementación en @capgo/capacitor-clave-privada, @capgo/capacitor-autenticación-nativa para el detalle de implementación en @capgo/capacitor-autenticación-nativa, y Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.