How to add login and forms to your website with AI

Almost every real website needs two things: a form (so people can write to you or sign up) and sometimes a login (so only certain people reach certain pages). They sound hard, but with AI you add them by describing them in words, no fighting with code.

In this guide you’ll add login and forms to a site you’re already building, using Claude Code to write the code and Supabase to store the data and handle accounts. Tap each step to open it.

Before you start: you need a web project and Claude Code already installed. If you don’t have it yet, first follow How to connect Claude to VS Code and your first website with Claude Code.

1 Create your Supabase project

Supabase is a free database that also brings the login system almost done. If you’ve never used it, follow the tutorial How to create a database with Supabase; it takes 5 minutes.

Go to https://supabase.com and create a free account.
Click New project, give it a name and a database password (save it).
When it’s ready, go to Project Settings → API and copy two things: the Project URL and the anon public key. You’ll need them in step 3.

Don’t share the key labeled service_role: that one is private.

2 Add a contact form

Open your project in VS Code, open Claude Code (✳) and ask for the form with a clear prompt. The more specific, the better:

Add a contact form to my page with the fields name, email and
message. Validate that the email is valid and show a "thank you"
message on submit. Keep the style simple and clean, matching the
current design.

Claude Code will show you the files it will create or change. Skim them and approve. It doesn’t save anything yet: we connect that in the next step.

Tip: ask “explain in one line what each file does” if you want to understand what it created.

3 Store what people submit

Now connect the form to Supabase so each message is stored in a table. Give Claude Code your data and the prompt:

Connect this form to Supabase. Create a "messages" table with
columns name, email, message and date, and save each submission
there. My Project URL is <paste the URL> and my anon key is
<paste the key>. Store the keys in a .env file, not in the code.

Notice the last part: keys go in a .env file, never inside the code you push to the internet. Claude Code knows how; just remind it.

When it’s done, open your table in Supabase (Table Editor → messages) and you’ll see rows appear each time someone submits the form.

4 Add the login

Supabase includes login (it’s called Auth), so you don’t have to invent anything about passwords: it stores them encrypted for you. Ask Claude Code:

Add login with Supabase Auth: one page to sign up (email and
password) and another to sign in. Use the same Project URL and
anon key from the .env. Show the user's email when logged in and
a button to sign out.

In Supabase, go to Authentication → Providers and confirm Email is enabled (it is by default). With that, people can create their account and log in.

5 Protect your private pages

A login without protected pages isn’t worth much. Tell Claude Code which pages should be only for logged-in people:

Make the /dashboard page viewable only if the user is logged in.
If someone enters without a session, send them to the login page.

That’s how you separate the public part (your normal page, the form) from the private part (a dashboard, the profile, whatever you want to hide).

Golden rule: never trust “hide the button” alone. Real protection comes from the login, not the design.

Shortcut: ask for it all at once

If you already have your Supabase project ready (Step 1), you can ask Claude Code for the full package in a single prompt and then review as you go:

In this project I want: 1) a contact form that saves messages to
a Supabase table, 2) login with Supabase Auth (email sign-up and
sign-in), and 3) the /dashboard page viewable only when logged in.
Store the keys in .env. Do it step by step and explain each one.

I prefer going step by step (you understand what’s happening better), but if you’re in a hurry, this shortcut works.

Test that it works

Open your site and fill in the form. Check the row appears in your Supabase table.
Create an account on your sign-up page. Check it shows in Authentication → Users.
Sign out and try to reach your private page (/dashboard): it should send you to the login.
Sign in and try again: now it should let you see the dashboard.

If all four work, you’ve got a site with real forms and login.

If something goes wrong

Problem	Fix
The form saves nothing	Check the Project URL and anon key in `.env` are copied correctly
A “permission” error when saving	Ask Claude Code to add an insert policy (RLS) on the table
No confirmation email arrives	In Supabase check Authentication → Providers → Email; for testing you can turn off “Confirm email”
My keys ended up in the code	Ask Claude Code to move them to `.env` and add `.env` to `.gitignore`

And there it is: you went from a page that only displays to one that receives people and stores information. That jump is exactly what separates a pretty site from a site that works for you. Start with the form, the easiest part, and once you feel comfortable, add the login. You can build it too.

Frequently asked questions

Do I need to know how to code to add a login?

No. You describe what you want to Claude Code in plain words and it writes the code; you review and approve. This tutorial uses Supabase, which brings login almost done.

Is it safe to store passwords this way?

Yes, because you don't store them: Supabase handles passwords encrypted for you. Never store passwords in plain text or put them in your code.

How much does it cost to have login and forms?

Supabase's free plan covers up to 50,000 active users a month, plenty to start. You only pay for Claude Pro (from $20/mo) to use Claude Code.

Can I get forms by email instead of storing them?

Yes. Ask Claude Code to, instead of (or besides) saving to Supabase, email you the form content with a service like Resend. Here we store it in a table because it's the simplest to review.