Ir al contenido principal

Conexión con Supabase

Con Supabase, puedes configurar fácilmente un backend para tu sitio web sin necesidad de experiencia en desarrollo.

Rosalia avatar
Escrito por Rosalia
Actualizado esta semana

Descripción General

Supabase es una plataforma de backend de código abierto que permite almacenamiento de datos persistente y funciones similares a un backend. Al conectar MGX con Supabase, solucionas el problema de que tu equipo MGX solo guarda datos en la memoria del navegador, la cual puede perderse al actualizar o cerrar la página. Esta integración convierte tu sitio en una aplicación totalmente funcional con almacenamiento permanente y características avanzadas.

Ventajas Clave

además de no requerir experiencia de desarrollo:

  • Configuración Rápida: Levanta el backend en minutos y acelera el proceso de desarrollo.

  • Alta Escalabilidad: Se adapta al crecimiento de usuarios sin limitaciones.

  • Rentable: Ofrece un plan gratuito ideal para proyectos pequeños y startups.

Cómo Conectar Supabase con MGX

  1. Iniciar la Integración

    • Abre la interfaz de chat de tu proyecto MGX.

    • Haz clic en la pestaña Supabase en la parte superior derecha y selecciona Connect Supabase.

    • Sigue las instrucciones en pantalla para iniciar la conexión.

  2. Autenticar y Configurar el Proyecto

    • Aparecerá una ventana emergente para iniciar sesión en tu cuenta de Supabase.

    • Selecciona tu organización en el menú desplegable.

    • Haz clic en Authorize MGX para autorizar la cuenta (proceso rápido, sin configuración manual).

    • Elige un proyecto existente o haz clic en +Add New One para crear uno nuevo.

  3. Configuración Automática

    • MGX obtendrá automáticamente la estructura de base de datos, tablas y configuraciones de seguridad.

    • Cuando veas la notificación “Supabase Connected”, tu backend estará listo para usarse.

Autenticación de Usuarios

Supabase Auth permite añadir autenticación a tu aplicación. MGX ofrece dos métodos:

  1. Correo Electrónico y Contraseña

  2. Inicio de Sesión Social (Google)

Correo Electrónico y Contraseña

  • Autoriza tu cuenta de Supabase en la interfaz de chat.

  • En el chat, escribe una solicitud como: “Agregar autenticación”.

  • Se generará automáticamente una página de inicio de sesión/registro conectada al sistema de Supabase.

  • Crea un usuario de prueba desde la nueva interfaz o desde Authentication > Users en el panel de Supabase y verifica la persistencia de la sesión.

Inicio de Sesión con Google

  • En el panel de Supabase, ve a Authentication → Sign In/Up y activa la opción de Google.

  • En la Google Cloud Console, crea un proyecto, configura la pantalla de consentimiento y genera las credenciales OAuth (Client ID y Client Secret).

  • En el chat de MGX, solicita: “Agregar autenticación de Google”.

  • Se añadirá el botón Continuar con Google a la página de inicio de sesión.

  • Inicia sesión con Google y verifica que el perfil se actualice correctamente.

Almacenamiento y Sincronización de Datos

  • Indica en el chat qué datos deseas guardar (por ejemplo: “Guardar los registros de viaje en la base de datos”).

  • MGX configurará la base de datos según tu descripción.

  • Crea datos de prueba en la app, actualiza la página y verifica en Supabase que los datos se hayan sincronizado.

  • Las modificaciones realizadas desde el editor de tablas de Supabase se reflejarán en tiempo real en la app MGX.

Edge Functions

Las Supabase Edge Functions son programas backend sin servidor que se ejecutan en nodos cercanos al usuario, reduciendo la latencia y mejorando la velocidad de respuesta.

Ejemplos de uso:

  • Envío automático de correo de bienvenida tras el registro de un usuario.

  • Llamadas a APIs de IA para análisis de contenido después de un envío de formulario.

  • Integración de pasarelas de pago (Stripe) durante el proceso de compra.

  • Programación de recordatorios por correo o notificaciones push.

MGX ofrece un manejo seguro de claves y credenciales. Al pulsar Add API Key, introduces tu clave, que se cifra y almacena en el administrador de secretos de Edge Functions.

Agregar y Desplegar Funciones Backend

  1. En el chat, escribe la solicitud (p. ej.: “Generar una página web que llame a la API de Gemini para estimar calorías de alimentos”).

  2. Tras generar el código, haz clic en Add API Key para ingresar la clave.

  3. Pulsa View in Edge Function para desplegar la función en Supabase.

Preguntas Frecuentes (FAQ)

  • ¿Cómo agregar funciones backend de Supabase a mi app?

    Autoriza tu cuenta, elige el proyecto de Supabase y describe los requisitos en el chat. Los agentes configurarán las funciones.

  • ¿Supabase admite inicios de sesión sociales?

    Sí. Admite correo y contraseña, autenticación sin contraseña (OTP/magic link), Google, Twitter, GitHub, autenticación por teléfono, SAML SSO y login anónimo.

  • ¿Necesito un proyecto separado de Supabase para cada app?

    Puedes usar un proyecto existente o crear uno nuevo. Cada chat se conecta a un solo proyecto a la vez.

  • ¿La conexión persiste después de un Remix?

    No. Tras un Remix, debes reconectar manualmente.

  • ¿Puedo usar una base de datos de Supabase para varios proyectos MGX?

    Sí, pero debes gestionar cuidadosamente las conexiones y configuraciones.

  • ¿Por qué mi proyecto no aparece en la lista de organizaciones de Supabase?

    En el plan gratuito, los proyectos sin actividad durante 7 días se pausan automáticamente. Usa el filtro Inactive para verlos.

  • Error “The organization has been bound by another user”

    Cada organización solo puede vincularse a una cuenta MGX. Elimina el vínculo existente en Settings → API → OAuth Apps en Supabase y vuelve a conectar con tu cuenta MGX.

¿Ha quedado contestada tu pregunta?