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

VariableReplace 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.

Related prompts