Introducción de 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 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
   • Habilita el proveedor de inicio de sesión de Google OAuth
   • Obtén la URL de tu proyecto de Supabase y la clave anonima

2. Supabase JS SDK

   • Instala Supabase en tu 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 de Google para plataformas específicas

   • Completa 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 en el repositorio una aplicación completa y funcional:

Code Repositorio: Puede encontrar el repositorio code aquí

La aplicación de ejemplo demuestra:

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

Gestión de nonce

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

• Generar un rawNonce (cadena aleatoria segura para URL)
• Hasharlo con SHA-256 para obtener nonceDigest
• Enviar nonceDigest a Inicio de sesión de Google
• Passar rawNonce a Supabase (Supabase lo hash interno para comparación)

Validación de JWT

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

• El público del token coincide con sus configurados IDs de cliente de Google
• El nonce coincide con el digest esperado
• Intento automático de validación en caso de fracaso (especialmente 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() on mount para manejar las redirecciones de OAuth
• Android: Implementación estándar con configuración de huella de SHA-1

Pasos siguientes

Supabase Google Login - Configuración general

• - Resumen y requisitos previos Configuración de Android
• - Configuración específica de Android - Overview and prerequisites
• Configuración de iOS - Configuración específica de iOS
• Configuración de Web - Configuración específica de Web

Ingreso 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

Seguir adelante 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-biometría nativa, y Autenticación de dos factores para el detalle de implementación en Autenticación de dos factores.