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 sociales 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 el plugin de inicio de sesión social con Supabase Auth
• Configuración específica de plataforma para Android, iOS y Web
• Cómo manejar los 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 de Capacitor

   • Una aplicación Capacitor existente
   • Plugin de inicio de sesión social de Capacitor instalado:

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

4. Configuración de Google específica de plataforma

   • 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

Aplicación de ejemplo

Está disponible un ejemplo completo y funcional en el repositorio:

Code Repositorio: Puedes encontrar el repositorio code aquí

La aplicación de ejemplo demuestra:

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

Detalles de implementación de la clave

Manipulación de nonce

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

• (cadena de caracteres aleatoria segura para URL) rawNonce Hasharlo con SHA-256 para obtener
• Enviar nonceDigest
• Generar un __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 la validación de JWT para asegurar:

• El destinatario del token coincide con sus configurados IDs de cliente de Google
• La nonce coincide con el digest esperado
• Retransmisión automática 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 los redireccionamientos de OAuth
• Android: Implementación estándar con configuración de huella de SHA-1

Próximos Pasos

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 de Web específica

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

Sigue 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-passkey para el detalle de implementación en @capgo/capacitor-passkey, @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.