Saltar al contenido
Capgo - Actualizaciones en vivo para aplicaciones Capacitor Capgo

Introducción de Integración de Supabase

Resumen

Sección titulada “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

Sección titulada “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

Sección titulada “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
    • Obtenga la URL y la clave anónima de su proyecto de Supabase

  2. Supabase JS SDK

    • Instale Supabase en su proyecto:
      Ventana de terminal
      npm install @supabase/supabase-js

  3. Un Proyecto de Capacitor

    • Una aplicación existente de Capacitor
    • Capacitor plugin de inicio de sesión social instalado:
      Ventana de terminal
      npm install @capgo/capacitor-social-login
      npx cap sync

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

Aplicación de ejemplo

Sección titulada “Aplicación de ejemplo”

Está disponible una aplicación de ejemplo completa y funcional en el repositorio:

Code Repositorio: Puedes encontrar el repositorio code aquí

La aplicación de ejemplo demuestra:

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

Sección titulada “Detalles de implementación clave”

Gestión de nonce

Sección titulada “Gestión de nonce”

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

  • __CAPGO_KEEP_0__ rawNonce (URL-safe random string)
  • Hashéalo con SHA-256 para obtener nonceDigest
  • Contraseña nonceDigest para Google Sign-In
  • para Supabase (Supabase lo hashéa internamente para compararlo) rawNonce Validación de JWT

Sección titulada “Validación de JWT”

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

El público del token coincida con sus Client IDs de Google configurados

  • La nonce coincida con el digest esperado
  • Reintentar automáticamente en caso de falla de validación (especialmente importante para iOS)
  • Reintentar automáticamente en caso de falla de validación (especialmente importante para iOS)

Consideraciones específicas de plataforma

Sección titulada “Consideraciones específicas de plataforma”
  • iOS: El caché de tokens puede causar problemas de 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 digital SHA-1

Pasos siguientes

Sección titulada “Pasos siguientes”

Continúe con las guías de configuración:

Ingreso con Apple Sign-In

Sección titulada “Ingreso con Apple Sign-In”