Lovablefeaturebeginner
Add User Authentication to Lovable App
Add Supabase Auth with email signup, signin, password reset, user profiles, and Row Level Security.
What you'll get
A complete auth system with signup, signin, password reset, user profiles, and protected routes using Supabase Auth.
The Prompt
Add user authentication to my Lovable app using Supabase Auth. REQUIREMENTS: 1. Create a Sign Up page with email, password, and confirm password fields. Validate password strength (min 8 chars, one uppercase, one number). Show success message and email verification prompt. 2. Create a Sign In page with email and password fields. "Remember me" checkbox. Link to "Forgot Password". 3. Create a Forgot Password page that sends a reset link via Supabase Auth. Create a Reset Password page for setting the new password. 4. Create a Profile page (protected) where users can update their display name, avatar URL, and bio. Store in a "profiles" table. 5. Add a persistent auth state using Supabase onAuthStateChange. Show user avatar and name in the navbar when logged in with a dropdown (Profile, Settings, Sign Out). 6. Protect routes: redirect unauthenticated users to /signin when they try to access protected pages. 7. Enable Row Level Security on all user-related tables. DATABASE: - "profiles" table: id (FK to auth.users), display_name, avatar_url, bio, created_at, updated_at - Trigger: auto-create profile row on new user signup - RLS: Users can only read/update their own profile SECURITY: - Never store passwords — Supabase Auth handles this. - Use RLS on all tables with user data. - Validate email format client-side and server-side.
Replace these variables
| Variable | Replace with |
|---|---|
| [PROTECTED_ROUTES] | List of routes that require authentication (e.g., /dashboard, /profile, /settings) |
Tips for best results
Always add email verification — it prevents fake signups and improves deliverability.
Create the profiles trigger function in Supabase SQL Editor before testing signup.
Follow-up prompts
Add social login
Add Google and GitHub OAuth login buttons on the signin page using Supabase Auth providers. Handle the OAuth callback and profile creation.
Add role-based access
Add user roles (admin, editor, viewer) to the profiles table. Create a middleware that checks roles before granting access to admin routes.