How to Add Signup and Login to Your Vibe-Coded NextJS App

Written by: Vladislav Zhirnov
Published: August 24, 2026
Reading time: 18 min read
Topics: #Supabase
#MVP Development

Adding signup and login to your vibe-coded app sounds daunting. This is where things get serious, where you start exploring dashboards, and where you commit to showing the world what you've built.

I was scared, too.

Then, I met with a good friend that was further along in his founder journey. All of his apps had login. It was then that I knew it was possible, and decided to write guides to help other vibe-coders like myself to build production-ready apps.

In this guide, I break everything down in a way that even non-technical founders can understand, and include prompts that you can use to have AI do most of the work for you.

By the end, your app will allow users to create an account, sign out, and sign back in.

Before You Start

This guide uses a managed login provider, Supabase Auth. In English, managed login providers like Supabase handle the sensitive account machinery that lives 'under the hood'; instead of asking you to invent it.

If you know about them, you're good to go. I'll take you through the setup.

Otherwise, read my guide about what they are and whether you should use one: Should You Build Your Own Login or Use Managed Auth?

Step 01Initialize your session

If you work on multiple projects, the first thing you need to do is make sure you're working in the right one. I know it sounds silly, but I'm saving you from a lesson I learned the hard way, three days into learning how to add signup to my app.

Start with this one. Your AI will tell you which project it has open. It won't change anything yet:

Next, let's make sure this guide is written for your app. This prompt will tell you whether it uses Next.JS App Router and which version is installed:

If it isn't, stay tuned for my upcoming guide on this process for adding login to other types of apps.

If it is, use this last setup prompt. Your AI will make sure the app works before we touch it, find anything that could get in the way, and show you its plan:

Copyable prompt

Now that you've confirmed this is a Next.js App Router app, do one final check before changing anything.

Figure out which commands this project normally uses to catch problems, such as lint, type check, tests, and the full build. Run the ones that actually exist. Explain what passed or failed in plain English. Open one current public page and confirm that it still loads.

Check for any unsaved changes and do not overwrite them. Find any current login or Supabase code and any existing signup, login, verification, or account pages. Tell me which browser-control or Computer Use tools you actually have. Never claim access you do not have.

Read the relevant installed Next.js guidance and current official Supabase guidance. If those sources are unavailable or conflict with the installed app, stop instead of guessing.

Tell me what you found, what you plan to change, what you will leave alone, and how I can undo the changes if something goes wrong. Do not edit yet. Wait for my approval.

Step 02Have your AI build the account flow and screens

We are going to build the chair that Supabase sits in before inviting it into the room.

Copyable Prompt: Prepare the App for Supabase

Before we invite Supabase into our project, we're going to build the chair that it sits in. This is called building a 'seam', which is like a socket that another service plugs in to.

This prompt will build that seam, keep the app working without Supabase connected, and show you exactly what changed:

Use the plan I just approved. Start getting this app ready to connect to Supabase later, but do not connect a real Supabase project or ask me for any keys yet.

Use the existing package manager, folders, import style, and current official Supabase server-rendering guidance for the installed Next.js version. If the app has deprecated Auth Helpers or an incompatible older setup, show me the migration and wait before changing packages.

Map and add only the guarded account foundation the app needs. Preserve current pages, redirects, headers, request behavior, and page addresses. Stop for approval before a package migration, page collision, or request-handling change.

The app must still build when the Supabase project values are missing. Show a clear local 'accounts are not configured yet' result instead of crashing. Use placeholder setting names only. Do not ask for or invent real values.

Run the same project checks you identified in the last prompt, including the full build. Return the exact package versions, changed files, what stayed working, test results, how to undo this step, and what the next prompt can build on.

Copyable Prompt: Add supabase to your project

Now that the chair is built, it's time to plug Supabase in. This prompt will add the Supabase pieces and build the signup and login screens. The screens won't work yet. That's okay. We'll connect them to your real project in the next steps:

Use the files and plan from the last prompt. Install or confirm the current compatible Supabase packages, add the browser and per-request server account connections, and build email-and-password signup and login inside this app's current design.

Make signup the clear first-time action and keep login obvious for someone returning. Reuse or adapt existing pages and page parts instead of adding a detached starter screen. Ask me before renaming or replacing a page.

Validate submitted values on the server. Let Supabase enforce its configured password policy. Use safe public errors that do not reveal whether an email already has an account. Include clear labels, useful pending feedback, and protection against repeated submission.

After signup, show the honest result: either the person is signed in, or they need to check their email for the standard verification link. The app must still build with a clear unconfigured state when real Supabase values are missing. Do not add Google, passwordless codes, Resend, profile fields, or password recovery.

Return the changed files, the visible wording for my review, page tests, and what remains unproved until the app is connected to Supabase.

Copyable Prompt: Finish the login experience

There's a few finishing touches that need to be done.

Signup and login screens are only the visible part. Your app also needs to remember who signed in after a reload, finish the verification link safely, keep one page private, and sign the person out when they ask. Your AI will add those pieces now, while Supabase is still unplugged.

When it finishes, the screens and sign-in behavior will be ready. It will also give you the exact app addresses and setting names we need in Supabase next:

Continue in this app. Finish the email-verification return, remembered login, one account-only page, and current-browser sign-out.

Use the current official Supabase pattern for the installed Next.js version. A verification email may be opened by a scanner before the person clicks it, so the first page-opening request must not spend the one-time token. Use a clear button submission before verification. Keep the token out of analytics, third-party resources, saved app errors, screenshots, referrers, and evidence, then remove it from the visible address.

Use /account as the account-only page unless I chose another existing page. Check the signed-in account on the server before showing it. Keep the rest of the app public. Add sign-out as a submitted action that signs out only the current browser.

Do not claim that login protects every database row. Row Level Security and data permissions remain separate work.

Run the same project checks again, including the full build. Return the changed files, the exact local and published app addresses, the safe setting names Supabase will need, and the real-browser tests that remain blocked until Supabase is connected.

I use this exact stack in Doogle (opens in a new tab): an existing Next.js App Router app with Supabase Auth for signup and login.

Step 03Create or choose your Supabase project

If you are new to Supabase, create the project in the Supabase Dashboard (opens in a new tab). If the app already uses Supabase for something else, make sure you are changing the correct project instead of accidentally creating another one.

This is where browser control from providers like Claude, Codex, and Perplexity get useful.

Copyable prompt: Set up the right Supabase project

Some AI coding tools can control a browser because their working environment gives them a browser-control or Computer Use tool. This prompt will find out what yours can do. If it can use the browser, it will show you the project choices there. If it can't, it will walk you through them one click at a time. Either way, you'll finish with the right Supabase project selected:

Help me create or choose the Supabase project for this app. Do not change anything until you show me the exact project and action.

First tell me whether you can control my browser and whether it is signed in to Supabase. If you have access, inspect the organization and project list without creating anything. If you do not, give me one exact dashboard action at a time and wait while I do it.

If I need a new project, show the proposed organization, project name, region, plan, and any paid choice. Wait for my approval before creating it. If a project already exists, show enough non-secret information for me to recognize it and tell me whether another live app shares it.

This guide uses email and password with the normal verification email. Do not enable Google, six-digit codes, Resend, a custom auth domain, or paid features I did not approve.

After an approved action, reopen the project and read back its non-secret identity. Never ask me to paste a password, secret key, service-role key, or access token into chat.

After you run it: You should recognize the organization and project. Stop if the wrong project is open or a paid choice was not discussed.

Step 04Connect your app to Supabase

Your app is ready and the Supabase project exists. Now your AI can connect the two without rebuilding the login experience.

Supabase provides a project URL and publishable key for this job. A secret or service-role key does not belong in your app's browser-facing settings.

Copyable Prompt: Connect the Supabase Project

This prompt will take the project you just selected and connect it to the app. When it's done, the app should stop saying accounts aren't configured, and your AI will confirm that it is talking to the right project:

Connect the app in this project to the Supabase project we selected.

Open the project's connection details and identify only the project URL and publishable key. Never use a secret or service-role key in browser-facing settings.

Put the values in the app's existing local setting convention without printing them in chat, saved app errors, screenshots, or evidence. If you cannot transfer them without exposing them, open the correct destination, pause while I enter them, and confirm only that the expected setting names exist.

Restart the app if needed. Confirm that the unconfigured message disappears and that the app is talking to the intended project. Run the same project checks, the full build, and a secret scan.

Return the project identity without credentials, the setting names, the checks, and any Supabase dashboard work still needed for verification emails.

After you run it: Do not continue if a real key appears in output or a tracked file. Remove it safely and rotate it if exposure occurred.

Step 05Set up the verification email

When someone creates an account, Supabase needs to send them a verification link and bring them back to the right place in your app.

For this controlled test, Supabase's built-in sender works only with pre-authorized addresses from the project's organization team. Supabase limits that sender to two emails per hour and says it is not for real users. This guide does not add Resend, another custom email sender, or six-digit codes. Those belong to a separate walkthrough.

Copyable Prompt: Configure the Verification Link

This prompt will set the addresses Supabase uses for verification emails and walk through the dashboard setup. At the end, your AI will help you create one test account and follow the verification link back into your app:

Finish the standard Supabase email-verification setup for this app. Keep email and password. Do not switch to a six-digit code or configure custom SMTP in this task.

Derive the exact local and published app addresses from the project. Inspect the current Supabase URL and email settings before proposing a change. If the project is shared with another app, name the affected apps or users, show the current non-secret value, the proposed value, and how to undo it.

Tell me whether you can control the signed-in Supabase browser. Show each proposed dashboard action and wait for my approval before saving. If you lack access, give me one exact action at a time and wait for confirmation.

Configure the standard verification-link flow for the exact page already built in the app. Preserve the scanner-safe intermediate action and keep the returned verification pages private. Reopen the settings and read back only non-secret values.

Check the current official restrictions on Supabase's built-in email sender. If custom SMTP is not configured, use only a pre-authorized address from the project's organization team and label public-user email delivery blocked. Do not pretend the built-in sender is ready for real users.

Before submitting a real signup, name the Supabase project and explain that the test will create a user, send a verification email, and sign that user in. Wait for my explicit approval. Pause AI credential capture while I enter the password. Never read or record the password or verification link.

Drive every browser action you can observe. Ask me to handle the inbox. Return what you observed and what I observed separately.

After you run it: Use a fresh test address. Request a new verification email after changing URL or template settings.

Step 06Test signup and login

Forms are not the finish line. A real person has to create an account, verify it, return later, stay signed in, reach the right page, and sign out without borrowing another browser's account.

This prompt will run the whole signup and login process, from creating an account to signing out and logging back in. You'll get a clear result for every step, including anything that still doesn't work:

Test every signup and login step in this app. Do not call it finished because the files exist or the forms render.

Use the approved Supabase project and a fresh test address, never a customer account. Before the first submission, explain the user, email, and signed-in-state changes the run will make and wait for my approval. Pause AI credential capture while I enter passwords.

Drive every browser action you can actually observe and ask me to perform the inbox action you cannot. Test, in order: old public pages while signed out; direct signed-out access to the account-only page; new signup; the standard verification email; safe return to the app; the correct account page; hard reload; current-browser sign-out; direct access after sign-out; password login; a separate browser context that stays signed out; private cache behavior; and the app's lint, type check, tests, and full build.

Label each result automated, AI-observed, human-observed, or blocked. Record no password, cookie, key, one-time token, or verification URL. If anything fails or remains unknown, say signup and login are incomplete and return to the matching step.

After you run it: The test is complete only when every row has a real result. Test-account cleanup is optional outside work and must never happen automatically.

The account flow that must passSwipe or scroll to see every column

What you test	What must happen
Public app	Existing public pages still work while signed out.
Private page	A direct signed-out visit goes to login.
New signup	A fresh email and password create the intended Supabase user.
Verification	The standard email link returns safely and opens the account.
Reload	A hard reload keeps the correct account signed in.
Sign-out	The current browser loses private access.
Returning login	The confirmed account can sign in again with its password.
Separate browser	A context that started signed out never inherits the first login.
Private results	Account and verification results are not shared through public cache.
App checks	Lint, type check, tests, and the full build pass.

Step 07Make it work on your published app

Local proof belongs to the local app. If the app is already published, its real address needs the matching Supabase and hosting settings, followed by the same account test on that address.

There is one more honest limit. Supabase's built-in email sender is for controlled testing, not real users. Until the app has a separately configured custom SMTP provider, mark public verification email blocked.

Do not treat this section as automatic permission to publish. The AI should stop after the plan unless you separately approve the outside changes and publication.

Copyable Prompt: Prepare the Live Setup

This prompt will turn the local setup into a plan for your published app. It will give you the exact settings and addresses to add, then run the same signup and login test on the real site:

Prepare this signup and login setup for the app's published address. Do not publish the app or change outside settings until I approve each action.

List the exact hosting setting names without their values. Derive the published app addresses Supabase must accept. Inspect the current hosting and Supabase settings when you have authenticated access, then show the current non-secret value, proposed value, affected app, and rollback before saving.

Check whether custom SMTP is already configured. If it is not, mark real-user verification email blocked. Do not use Supabase's built-in sender as proof that arbitrary public users can sign up, and do not configure Resend or another SMTP provider in this task.

If you lack browser or hosting access, give me one exact action at a time. If I have not approved publishing, stop after producing the settings plan.

After the app is separately approved and published, repeat the complete signup, verification, reload, sign-out, password-login, account-only-page, separate-context, and cache checks on the real address. Keep local and live results separate.

After you run it: A local pass is not a live pass. Do not mark the public version complete without testing its real address.

Step 08Save the setup

The last job is making sure this setup survives the current AI conversation. Save a short handoff so the next AI session does not have to rediscover the whole account system.

Copyable Prompt: Document What Changed

This final prompt will save the setup in a short handoff. A future AI session should be able to see what changed, what works, and what is still left without reading this whole conversation:

Create a handoff for a fresh AI session that explains this signup and login setup.

Include the changed files, exact package versions, safe setting names only, selected Supabase project identity without credentials, approved dashboard and hosting changes, product decisions, local proof, live proof, blocked results, limitations, rollback point, and next safe action.

Keep local and published results separate. State that login identifies the account but does not replace Row Level Security or data permissions.

Include no password, key, cookie, token, verification link, customer data, or secret value. Do not delete the test account or perform another outside action.

After you run it: A fresh AI session should understand the setup and next step without needing the old conversation.

TroubleshootingIf Something Breaks

Start with what you can see. The symptom usually points back to one step.

Your AI opened the wrong app

Stop. Return to Step 1 and ask for the exact project path, app title, package manager, and current public page before allowing another edit.

The app already has login code

Do not install a second account system beside it. Ask the AI to identify the current owner and explain whether the work is an integration or a migration before continuing.

The app says Supabase is not configured

Return to Step 4. Confirm that the project URL and publishable key are in the app's expected local settings and that the app was restarted afterward. Do not replace them with a secret key.

The signup form appears, but no user is created

Confirm that the app is connected to the Supabase project you are watching. Then ask the AI to inspect what Supabase sent back instead of treating the rendered form as success.

The verification email never arrives

Check the address and spam folder, then inspect the Supabase user and email result. Request a fresh email after any settings change. Custom email delivery is separate from this guide.

The verification link opens the wrong address

Return to Step 5. Compare the exact app address, Supabase Site URL, allowed return address, and verification page. One wrong address, path, or slash is enough to break the return.

The verification link has expired

Request a new email and try once. Do not reuse an old one-time link after changing the URL or email settings.

Login works until you reload

Return to Step 2. Ask the AI to inspect the current request-time account refresh and prove that the same account reaches the server-owned page after a hard reload.

A signed-out visitor can still open the account page

The page needs a server-owned account check. Hiding the link or redirecting only in browser code is not protection.

Sign-out finishes, but the private page still opens

Open the account URL directly after sign-out. Ask the AI to inspect the fresh server result and private cache behavior instead of trusting the navigation menu.

The app works locally but not on its published address

Return to Step 7. The published app needs its own hosting values and exact Supabase addresses. Local settings do not travel to the live app by themselves.

Your AI asks you to paste a secret into chat

Do not paste it. Ask for the setting name and protected destination. If a secret was already exposed, stop and rotate it without repeating the value in the incident note.

Still having trouble?

Pull me into your project with @Vlad, your virtual co-founder. Or, if you'd rather work with the real me, set up a call.

Get @Vlad Setup a Call

Summary

Your app now gives people a way to create an account, verify their email, sign out, and sign back in.

Your AI did most of the building and browser work. You stayed in control of the accounts, passwords, outside changes, and the final call on whether the experience actually works.

Login tells your app who the person is. It does not finish the rules that decide which database records that person can use. That is a separate job.

The built-in Supabase email sender was enough for this controlled test, but it is not ready for arbitrary real users. Custom SMTP and the separate six-digit-code experience belong in another guide.

About the author

Vladislav Zhirnov

Co-Founder and CPO at Pinpoint

I'm Vladislav Zhirnov, Co-Founder and CPO at Pinpoint (opens in a new tab). There, I lead product strategy, contribute to early growth, and build AI systems that enable us to iterate quickly. Through this site, I help founders and product teams turn promising apps into successful products real people use.

Before this chapter, I spent more than five years at Side (opens in a new tab), growing from Product Manager Trainee to Director of Product Management. There, I led DUBS - a social gaming platform for teens - from concept to over 150,000 installs.

Away from the screens, I live on a homestead with Carl the mini-Highland cow and a rather large supporting cast.

To learn more about Pinpoint and the other projects I'm involved in, visit my portfolio.

Learn more about me

Common Questions

Do I need to know whether my app uses Next.js?

No. The first prompt asks your AI to inspect the project. This walkthrough continues only when it confirms a Next.js App Router app.

Do I need an existing Supabase project?

No. The guide includes creating a fresh project. If the app already uses Supabase, your AI should verify the correct project instead of creating another one.

Can my AI create and configure Supabase for me?

Often, yes. It may be able to drive your signed-in browser, create the approved project, and change the approved settings. It should still show the action first, wait for approval, and read the saved result back.

Should I paste Supabase keys into my AI chat?

No. Let the AI open the correct protected destination, then enter the value there while capture is paused. This guide's browser-facing setup uses the project URL and publishable key, never a secret or service-role key.

Why does a new user need to verify their email?

The verification link proves that the person controls the address used for the account. Until that step finishes, the app should show a clear check-your-email result instead of pretending the person is signed in.

Do I need Resend for this guide?

Not for the controlled project-team test. Supabase's built-in sender is restricted and is not meant for real users. Before arbitrary people sign up, the app needs a custom SMTP provider such as Resend. That setup and the separate six-digit-code method belong to another guide.

Does login protect all of my users' data?

No. Login identifies the account. Your app and database still need separate permission checks, including Row Level Security where browser-accessible data requires it.

Does a local test mean login will work after I publish?

No. The published address needs its own hosting values and Supabase settings, followed by the same signup, verification, reload, login, private-page, and sign-out test.

Sources

23 references

Show 15 more references

Choose your next move

Keep moving from idea to real use.

App Readiness CheckCheck the rest of your app before real people do.Use the App Readiness Check to find the next signup, data, payment, or publishing gap that could stop a real user.Check Your App Virtual Co-FounderBring @Vlad into the project.Bring @Vlad into the project to untangle a hard problem and turn the next move into a plan.Get @Vlad Hands-on helpWork directly with Vlad.Get direct help finding the actual problem and moving your app, AI system, or workflow toward real use.Setup a Call

Scan my page