backend
supabase
base de datos
autenticación
almacenamiento

Integración con Supabase

Guía completa para integrar Supabase como backend en tu aplicación 10xDev

9 min de lectura
Por Equipo 10xDev

Supabase es una alternativa de código abierto a Firebase que proporciona todos los servicios backend que necesitas para tu aplicación: base de datos PostgreSQL, autenticación, almacenamiento de archivos, funciones edge y más.

10xDev incluye integración nativa con Supabase para que puedas construir aplicaciones con backend completo en tiempo récord.

Configuración Inicial#

1 Crear un proyecto en Supabase#

Lo primero que necesitas es un proyecto en Supabase:

  1. Regístrate o inicia sesión en Supabase
  2. Crea un nuevo proyecto
  3. Toma nota de tu URL y la llave anónima (anon key)

2 Configurar variables de entorno#

En tu proyecto 10xDev, crea o modifica el archivo .env.local para añadir las credenciales de Supabase:

La SUPABASE_SERVICE_KEY es opcional y sólo se recomienda para operaciones del lado del servidor que requieran permisos elevados.

Autenticación con Supabase#

10xDev integra perfectamente el sistema de autenticación de Supabase.

Configuración básica#

El bloque Auth de 10xDev se encarga de toda la lógica de inicio de sesión, registro, verificación de email y recuperación de contraseña.

Uso manual del servicio de autenticación#

Si necesitas más control, puedes usar directamente el servicio de autenticación:

Protección de rutas#

Puedes proteger fácilmente tus rutas con el middleware incluido:

Base de Datos PostgreSQL#

Supabase te proporciona una base de datos PostgreSQL completamente gestionada. 10xDev incluye servicios para interactuar con ella.

Configuración de tablas#

Recomendamos crear las tablas desde el panel de Supabase o usando migraciones SQL. Ejemplo de una tabla de products:

Consultas desde el cliente#

Para realizar consultas desde el cliente, utiliza el servicio supabaseQueries:

Consultas desde el servidor#

Para operaciones del lado del servidor con mayor seguridad:

Almacenamiento de Archivos#

Supabase ofrece almacenamiento de archivos con control de acceso y transformaciones de imágenes.

Configuración de buckets#

Desde el panel de Supabase, crea buckets según tus necesidades:

  • public: para archivos accesibles públicamente
  • private: para archivos que requieren autenticación
  • protected: para archivos con políticas personalizadas

Subida de archivos#

Acceder a archivos privados#

Suscripciones en Tiempo Real#

Supabase admite suscripciones en tiempo real basadas en PostgreSQL.

Edge Functions#

Supabase permite crear funciones serverless que se ejecutan en el edge.

Crear una Edge Function#

Desde la interfaz de Supabase, puedes crear una Edge Function. Ejemplo de función para procesar pagos:

Llamar a la Edge Function#

Desde tu aplicación:

Webhooks#

Supabase también proporciona webhooks para integrarse con servicios externos.

Ejemplo: Webhook de Stripe#

  1. Configura un webhook en Stripe para enviar eventos a tu endpoint de Supabase
  2. Crea una Edge Function que procese esos eventos

Migraciones y Gestión de Esquema#

Para proyectos más grandes, recomendamos usar la CLI de Supabase para gestionar migraciones:

En el archivo de migración generado:

Para aplicar las migraciones:

Consideraciones de Producción#

Al llevar tu aplicación a producción, considera:

1 Restricciones RLS: Asegúrate de que todas las tablas tengan políticas de seguridad adecuadas 2 Claves API: Nunca expongas la clave de servicio en el cliente 3 Rendimiento: Usa índices para consultas frecuentes 4 Costos: Monitorea el uso de almacenamiento y funciones edge para evitar sorpresas

Recursos Adicionales#

Con esta integración, tienes todo lo que necesitas para crear aplicaciones web completas con autenticación, base de datos y almacenamiento en tiempo récord.

#backend#supabase#base de datos#autenticación#almacenamiento