Contenido del curso
Cómo conectar Supabase a Lovable
Supabase convierte tus apps de Lovable en aplicaciones reales con login, base de datos y conexión a APIs externas. Aquí aprendes qué es Supabase, cómo conectarlo a tu proyecto de Lovable y cómo añadir autenticación sin romper la experiencia de usuario, ideal si estás prototipando un MVP.
Qué es Supabase y por qué se usa con Lovable
Supabase es una plataforma construida sobre PostgreSQL, una base de datos estándar en la industria. No necesitas dominar la teoría para usarla, pero entender sus piezas te ayuda a saber dónde mirar cuando aparezca un bug.
Dentro de Lovable, Supabase aporta funciones que transforman un front end estático en una aplicación funcional:
¿Qué es Supabase en una frase? Es un backend listo para usar, basado en PostgreSQL, que te da autenticación, base de datos, almacenamiento y funciones serverless con seguridad incorporada.
Cómo conecto Supabase a un proyecto de Lovable
El flujo de conexión es directo, pero hay un detalle importante con las organizaciones.
Pasos para conectar Supabase desde Lovable
Una vez conectado, no esperes que todo funcione out of the box. Necesitas escribir prompts específicos para activar funciones como el login.
Cómo añado login y sign up con Supabase en Lovable
La magia ocurre cuando le pides explícitamente a Lovable que use Supabase para autenticación.
Un prompt que funciona bien es: "Add a login and sign-up with Supabase that replaces the current sign-up" [04:10]. Eso le indica a Lovable qué reemplazar y qué herramienta usar.
Mientras corre el prompt, abre el dashboard de Supabase desde la opción Root en Lovable. Ahí verás:
Por qué desactivar Confirm Email mientras pruebas
Dentro de Sign-in and Providers existe una opción llamada Confirm Email. Por defecto exige que el usuario confirme su correo antes de crear la cuenta, pero si todavía no configuraste un proveedor de email, ese flujo no funciona y bloquea tus pruebas.
La solución durante el desarrollo es desactivar Confirm Email y guardar cambios [06:20]. Así puedes registrar cuentas con cualquier email ficticio y avanzar rápido.
¿Cuándo debo volver a activar Confirm Email? Antes de lanzar a producción. Apúntalo como to do obligatorio en tu checklist de launch, porque sin esa validación tu app queda expuesta a registros falsos.
Qué hago si el botón de login se congela
Es común que el primer intento de autenticación falle. En lugar de pelear con el código, usa el chat mode de Lovable y describe el problema con contexto.
Un ejemplo de prompt útil: "Hey, the authentication isn't working. I tried to create an account, and the button just freezes" [08:30]. Decir solo "no puedo entrar" no le da pistas a la IA.
Lo importante aquí es la diferencia de detalle:
El chat mode escanea el código antes de tocar nada, identifica la causa y propone un plan. Pulsa Implement plan y deja que Lovable corrija. En este caso encontró código inválido escrito previamente y lo arregló sin romper el resto.
Cómo protejo el dashboard con rutas privadas
Cuando el login ya funciona, el siguiente paso es redirigir al usuario autenticado a un dashboard, pero protegiendo esa ruta para que nadie sin sesión pueda entrar.
Un prompt directo es: "If the user is logged in, redirect them to a user dashboard that's plain and simple". Si Lovable no añade la ruta automáticamente, pídelo de forma explícita en un segundo prompt [11:40].
Al revisar el archivo app en el código, verás que el elemento dashboard queda envuelto en un protected route. Eso significa que si el usuario no cumple la regla definida (estar autenticado), la app nunca lo deja ver datos propios ni de terceros.
Pregúntate en cada página que construyas: ¿esta vista puede ser pública o necesita una ruta protegida? Esa decisión sencilla evita filtraciones de datos.
¿Qué función de Supabase quieres explorar primero en tu próximo proyecto? Cuéntalo en los comentarios.
