Saltar al contenido
Capgo

Introducción a la Integración con Supabase

Resumen

Section titled “Resumen”

Este Tutorial te guiará a través de la configuración de Supabase Authentication con el Plugin Capacitor Inicio de sesión social. Esta integración te permite usar proveedores de inicio de sesión social nativos (Google, Apple, Facebook, Twitter) en plataformas móviles mientras aprovechas Supabase Auth para autenticación backend y PostgreSQL para almacenamiento de datos.

Lo Que Aprenderás

Section titled “Lo Que Aprenderás”
  • Cómo configurar Supabase Authentication
  • Cómo integrar el Plugin Capacitor Inicio de sesión social con Supabase Auth
  • Configuración específica de plataforma para Android, iOS y Web
  • Cómo manejar nonces de forma segura para Supabase

Lo Que Necesitarás

Section titled “Lo Que Necesitarás”

Antes de comenzar, 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 de tu proyecto Supabase y la clave anon

  2. SDK JS de Supabase

    • Instala Supabase en tu proyecto:
      Terminal window
      npm install @supabase/supabase-js

  3. Un Proyecto Capacitor

    • Una aplicación Capacitor existente
    • Plugin Capacitor Inicio de sesión social instalado:
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. Configuración de Google Específica de Plataforma

Aplicación de Ejemplo

Section titled “Aplicación de Ejemplo”

Un ejemplo completo y funcional está disponible en el repositorio:

Repositorio de Código: Puedes encontrar el repositorio de código aquí

La aplicación de ejemplo demuestra:

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

Detalles Clave de Implementación

Section titled “Detalles Clave de Implementación”

Manejo de Nonce

Section titled “Manejo de Nonce”

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

  • Generar un rawNonce (cadena aleatoria segura para URL)
  • Hashearlo con SHA-256 para obtener nonceDigest
  • Pasar nonceDigest a Google Sign-In
  • Pasar rawNonce a Supabase (Supabase lo hashea internamente para comparación)

Validación de JWT

Section titled “Validación de JWT”

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

  • La audiencia del token coincide con tus IDs de Cliente de Google configurados
  • El nonce coincide con el digest esperado
  • Reintento automático en caso de fallo de validación (especialmente importante para iOS)

Consideraciones Específicas de Plataforma

Section titled “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 isLoggedIn() al montar para manejar redirecciones OAuth
  • Android: Implementación estándar con configuración de huella SHA-1

Siguientes Pasos

Section titled “Siguientes Pasos”

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