Conexión de Supabase para autenticación y rutas protegidas
Clase 11 de 20 • Curso Gratis de Lovable para Crear Páginas Web sin Programar
Resumen
Supabase transforms a basic Lovable front-end into a full application with login, data, and secure API access. Built on PostgreSQL, it adds tools you can use quickly—without leaving Lovable—so you can test, iterate, and keep user data safe.
What is Supabase and how does it power Lovable apps?
Supabase sits on top of PostgreSQL and brings the building blocks you need to go from prototype to product. You do not need to be a database expert to benefit, but knowing what each piece does helps you debug faster and ship with confidence.
Which core features matter for your build?
- Authorization: add login and sign-up flows.
- Storage: upload files and organize them in folders.
- Database: create tables for user records and app data.
- Edge functions: call APIs (like OpenAI) securely.
- Secrets: store keys so bad actors cannot steal them.
- RLS (Row Level Security): ensure users only read and update their own data.
Why PostgreSQL and RLS help with security?
- PostgreSQL is an industry-standard database with reliability you can trust.
- RLS policies enforce per-user access rules automatically.
- Together, they prevent leaking data across accounts.
How to connect Supabase and configure authentication fast?
You can link Supabase to your Lovable project from the top-right Connect Supabase button. Once connected, you get one-click access to users, SQL, Edge functions, and secrets from inside Lovable.
Where do you connect a project in Lovable?
- Click the green Connect Supabase button.
- Choose Connect a Project.
- If you have no organization, open Manage connected organizations, create one in Supabase, then connect it.
What can you manage in the Supabase dashboard?
- Authentication: view test accounts, add users manually, configure providers.
- SQL editor: inspect or adjust your database.
- Edge functions: manage back-end functions.
- Secrets: store API keys for OpenAI or Stripe safely.
- Usage: see daily activity as users onboard.
How do you test sign-up without email?
- In Auth → Sign in & providers, turn Confirm email off for testing.
- This skips email verification when you create accounts.
- Important: turn it back on for production.
- You can invite testers by adding users manually or sending invitations.
- You can configure providers like Google, add MFA, and set rate limits.
How to fix auth issues and secure a dashboard with protected routes?
Prompt Lovable to scaffold auth, then verify it works end to end. If something breaks, use chat mode to describe the exact steps you took and what failed. Lovable will scan the code, propose a fix, and you can apply it with Implement plan.
How do you prompt Lovable to add login and sign-up?
- Use a clear prompt: “Add a log-in and sign-up with Supabase that replaces the current sign-up.”
- If your UI flips languages (e.g., to Español), set a system knowledge prompt: “Keep everything in English.”
- Expect UI labels like Iniciar Sesion or Crear una Cuenta if language changed earlier.
What if the button freezes during sign-up?
- Open chat mode and explain the steps you took and the unexpected result.
- Be specific: “I tried to create an account; the button froze after submit.”
- Lovable scans the code, finds invalid logic, and suggests a fix.
- Click Implement plan and retest with a simple password (e.g., Test123).
- After success, you may see extras like a username display and a logout button.
How do you redirect after login and protect data?
- Prompt: “If the user is logged in, auto-redirect to a user dashboard.”
- Ensure the dashboard route is a protected route.
- Protected routes block access when the user is not authenticated.
- This prevents viewing your dashboard or other users’ data when not logged in.
- Always ask: should this page be public, or should I protect it?
Have questions about providers, Edge functions, or adding a weather API next? Share your scenario in the comments and what you want to build with Supabase in Lovable.