How to Add User Login to Your AI-Built App (No Code)

You shipped your first AI-built app. It works. You're proud of it. Then someone asks: "Can other people make accounts?" And you realize you have no idea how to make that happen.

This guide is for that exact moment. You don't need to understand how authentication works under the hood. You just need login working by the end of today — and this walks you through it step by step, for the three most common AI builders: Lovable, Bolt.new, and Replit.

If you're still deciding which builder to use, read Lovable vs Bolt vs Replit first.

Why Your App Needs User Login (and Why It's Easier Than You Think)

What "authentication" actually means for a vibe coder

Authentication is just the system that answers: "Who is this person, and are they allowed to be here?" Every time someone logs in, the auth service checks their credentials and hands them a secure token. Your app uses that token to know who they are on every page.

You don't have to build this yourself. In 2026, there are services that handle the entire thing — email/password, social login (Google, GitHub), magic links — and hand you a few lines of configuration to connect. Your AI builder can wire those lines in for you.

The two tools worth knowing: Supabase Auth and Clerk

Two options stand out for vibe coders, and they cover different situations well.

Supabase Auth is the right pick if you want everything in one place — database, file storage, and user accounts all under one dashboard. Lovable already has a native Supabase integration, which makes the setup especially fast there.

Clerk is the right pick if you just need login working right now and don't want to manage a database. It's a dedicated auth service with a generous free tier and almost zero configuration.

Both are free to start. The rest of this guide shows you exactly how to set up each one.

Option 1: Supabase Auth — the All-in-One Pick

What Supabase gives you for free

Supabase is a hosted backend platform: Postgres database, file storage, and a full auth system in one place. The auth piece handles email/password signups, magic link login, OAuth providers (Google, GitHub, etc.), and session management — all configurable from a dashboard, no backend code required.

The free tier supports up to 50,000 monthly active users, which is more than enough for any early-stage app.

How to connect Supabase to Lovable (click-by-click)

Lovable has a built-in Supabase integration that handles the connection for you.

1. Open your Lovable project and go to Project Settings.
2. Select the Integrations tab, then click Supabase.
3. If you don't have a Supabase project yet, create a free account at supabase.com and create a new project.
4. Copy your Project URL and anon/public API key from Supabase (under Project Settings > API).
5. Paste both into Lovable's Supabase integration panel and click Connect.

Once connected, Lovable knows about your Supabase project and can reference it in AI prompts.

Now prompt Lovable to add login:

Add user authentication using Supabase Auth. Include a signup page, a login page,
and a logout button in the nav. Redirect logged-out users to the login page if they
try to access any protected route.

Lovable will generate the auth flows and wire them to your connected Supabase project. You'll see new users appear in your Supabase dashboard under Authentication > Users the moment someone signs up.

How to connect Supabase to Bolt.new

Bolt.new has a native Supabase integration — you can connect an existing Supabase project directly from the Bolt interface without any manual configuration. Look for the Supabase option in your project's integrations or database settings panel, click Connect, and select your project.

If you prefer to wire it in via prompt instead, first create your Supabase project and grab the Project URL and anon key. Then open your Bolt.new project and prompt:

Add Supabase Auth to this app. Use these credentials:
- Supabase URL: [your-project-url]
- Supabase anon key: [your-anon-key]

Create a login page, a signup page, and protect all other routes so only
authenticated users can access them.

Bolt will install the @supabase/supabase-js package, create an auth client, and build the login UI. Check the generated .env file and make sure your keys are stored there, not hardcoded.

How to connect Supabase to Replit

Replit has a built-in secrets manager, which is where your Supabase keys should live. Open the Secrets panel in your Replit project and add:

• SUPABASE_URL — your Supabase project URL
• SUPABASE_ANON_KEY — your anon/public key

Then prompt Replit's AI assistant:

Add Supabase Auth to this app using the SUPABASE_URL and SUPABASE_ANON_KEY from
the environment. Add a login page, a signup page, and redirect unauthenticated
users away from protected routes.

Replit also has its own built-in auth feature (Replit Auth), but it ties users to Replit accounts — not something you'd want for a public-facing app with general users. Supabase Auth gives you a proper standalone user table.

Prompting your AI builder to add the login screen

Whichever platform you're using, the prompt structure that works best is specific and concrete. These elements tend to produce clean results:

• Name the auth library (Supabase Auth or Clerk)
• Specify the login methods you want (email/password, Google, etc.)
• List the pages to create (login, signup, optionally a profile page)
• Say which routes are protected
• Ask for a logout button with a specific location (nav, settings menu, etc.)

Vague prompts like "add login" will work, but they may produce inconsistent flows. The more precise you are, the less cleanup you'll need.

Option 2: Clerk — the Fastest Drop-In If Supabase Feels Like Too Much

What Clerk gives you on the free tier

Clerk is a dedicated authentication service. You don't get a database or file storage — just auth, done really well. It handles the entire login UI for you: pre-built sign-in and sign-up components that you embed in your app, with no design work required.

The free tier covers up to 50,000 monthly active users and includes email/password, social login (Google, GitHub, Apple), magic links, and multi-factor authentication.

You manage users from Clerk's dashboard. Everything syncs in real time — no database setup, no auth tables, no SQL.

Adding Clerk to a Lovable project via prompt

Create a free Clerk account at clerk.com, create a new application, and grab your Publishable Key and Secret Key from the Clerk dashboard.

Then prompt Lovable:

Add Clerk authentication to this app. Use these credentials:
- Publishable key: [your-publishable-key]
- Secret key: [your-secret-key]

Wrap the app in a ClerkProvider. Add a SignIn page at /login and a SignUp page
at /signup. Protect all routes except the landing page.

Lovable will install the Clerk SDK, set up the provider, and create the auth routes. Because Clerk provides its own pre-built UI components (<SignIn />, <SignUp />), the resulting pages look polished out of the box.

Adding Clerk to a Bolt.new or Replit project

The process is the same for both: store your Clerk keys as environment variables, then prompt your AI to wire in the SDK.

For Bolt.new, add keys directly to the project's .env file or use the environment settings panel if available. For Replit, add them to the Secrets panel.

Then prompt with:

Add Clerk authentication using CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY from
the environment. Install @clerk/nextjs (or @clerk/react, depending on the framework).
Add a ClerkProvider at the app root, a login page at /login, a signup page at /signup,
and use Clerk's auth middleware to protect all routes except the homepage.

Both platforms will generate working Clerk auth. The main thing to double-check after generation: that <ClerkProvider> wraps your entire app at the root level, not just individual pages.

Which One Should You Choose?

Choose Supabase if you also need a database (or already have one)

If your app stores any user data — posts, tasks, messages, settings — Supabase is the natural choice. You get auth and database in one place, with row-level security policies that automatically tie database records to the logged-in user.

Lovable's native Supabase integration makes this setup particularly smooth. If you built your app in Lovable and you're thinking about adding a database too, Supabase handles both in one step.

For deeper database context, see our guide on the best MCP servers for databases.

Choose Clerk if you just want login working in the next 30 minutes

If your app doesn't need to store user-generated data — or you already have a separate data layer — Clerk is faster. There's no database to configure, no tables to set up, no SQL to think about. You connect the SDK, pass in your keys, and you're done.

Clerk is also a better pick if you want a polished, ready-made login UI without any styling work.

| | Supabase Auth | Clerk | |---|---|---| | Includes a database | Yes | No | | Free tier MAUs | 50,000 | 50,000 | | Lovable native integration | Yes | Prompt-only | | Pre-built UI components | Minimal | Full | | Best for | Full-stack apps | Auth-only, fast setup |

What Happens After Login Is Working

Protecting pages so only logged-in users can see them

Both Supabase and Clerk let you protect routes — either through middleware (Next.js) or by wrapping components with auth guards. When you prompt your AI builder to add protected routes, specifically ask for:

• A redirect to /login for unauthenticated users
• A way to access the current user's ID or email inside protected pages
• A logout button that clears the session and redirects to the homepage

These three things handle 90% of what a basic authenticated app needs.

Next step: adding a database with Neon

Login handles identity — it tells your app who someone is. If you also need to save that person's data, you need a database. Neon is the easiest serverless Postgres option for AI-built apps, with a free tier and a dedicated MCP server that lets Claude or your AI builder query it directly.

If you're using Supabase, you already have a database included. If you went with Clerk and need data storage, Neon is the natural next step.

Either way, user login is the harder piece to get right — and you just got it done.