How to Add Authentication to Your AI-Built App

Authentication is the difference between a demo and a real app. Without it, anyone can access any data, perform any action, and impersonate any user. Many vibe coded apps have login forms that look secure but don't actually protect anything - the UI exists but the backend doesn't verify identity on API calls.

For most AI-built apps: Supabase Auth if you're already using Supabase (Lovable apps usually are). NextAuth.js / Auth.js if you're on Next.js and want flexibility. Clerk if you want the fastest setup with pre-built UI components. All three handle email/password, social login (Google, GitHub), and session management. Don't build auth from scratch - it's the easiest thing to get wrong.

Adding a login page is only half the job. Every API route that returns or modifies user data must verify the session. In Next.js, check the session in each API route or use middleware. In Supabase, enable Row-Level Security (RLS) so the database itself enforces access rules. The most common vulnerability in AI-built apps: a login page exists, but API routes are completely unprotected.

Use HTTP-only cookies for session tokens - never store tokens in localStorage (XSS attacks can steal them). Set appropriate session expiry times. Implement refresh token rotation for long-lived sessions. Handle the 'user refreshes the page' scenario - your auth state should persist without a re-login.

Checking auth only on the frontend (client-side role checks that the server doesn't enforce). Storing passwords in plain text or using weak hashing. Missing email verification - anyone can sign up with any email. Not restricting auth redirect URLs (open redirect vulnerability). Using the Supabase service_role key on the client (bypasses all security). Lovable apps frequently have all these issues.