How to Use a Six-Digit Email Code for Supabase Signup and Sign-In

Before you start

Your app should already recognize accounts and keep people signed in after a page reload. The prerequisite above covers that foundation.

Build the code flow in your app's local or test version. Keep existing login methods working during that change. For the finished screen, I'd make email-code entry the clear starting point and add another option when your users need it.

First, create a Resend account (opens in a new tab) or sign in to one you already have. Complete any email verification it asks for and open the dashboard. Resend is the delivery service, not a new inbox you need to check. The code emails will arrive in your users' existing inboxes.

Your AI can do more than build the screens. With connected tools or browser access, it can also set up the sender and Supabase's email settings. You handle signing in and approving access. It should then do the setup that access allows.

Have these ready:

Step 01Verify your sending domain in Resend

If your website is yourapp.com, use code.yourapp.com as the sending domain. The full sender address can be login@code.yourapp.com. Enter just code.yourapp.com in Resend's domain field; use the full address for the sender email.

That separate part of your domain, code.yourapp.com, is called a subdomain. I recommend it to keep these signup emails separate from other email you send. Your website can stay exactly where it is. Resend also recommends a subdomain to separate different kinds of email. Resend domain guidance (opens in a new tab).

Resend needs to confirm that you control the domain your emails will come from. The records that let Resend send mail for your domain live in your domain settings. They're called DNS records. You usually manage them where you bought the domain, unless you've moved that job to another provider.

Your AI can add the sending domain in Resend, read its required records, and check verification. Adding the records themselves also needs access to your domain provider. Resend supports connected AI tools, and its Cloudflare connection can add records after you authorize it. Resend domain setup (opens in a new tab), Cloudflare setup (opens in a new tab).

If you need to finish in the dashboard

Use the records generated for your domain. Some providers add yourapp.com to names automatically, so check that it does not appear twice. Resend's instructions cover its supported domain providers. Domain setup (opens in a new tab).

A setting called DMARC controls how mail using your domain is treated. Check its existing policy before changing it. You don't need incoming mail in Resend for this setup, and open/click tracking should stay off for these account emails. DMARC guidance (opens in a new tab), Login-email advice (opens in a new tab).

1. Open Domains in Resend and choose Add Domain if your sending domain is not already there.
2. Enter the sending domain, such as code.yourapp.com, and choose a region near your recipients.
3. Add the records Resend supplies to your domain provider, preserving the records for existing email services.
4. Return to Resend, start verification, and continue when the domain says Verified.

Step 02Connect Resend to Supabase

Supabase will create and check the codes. Resend will deliver the emails. The connection between them uses an email-delivery setting called SMTP. Its mail server address is the Host value you'll check after setup.

Create a private key for the connection between Resend and Supabase. Resend calls these API Keys. The delivery key needs Sending access, restricted to your verified domain. Your AI can create it through an authorized connection and save it into Supabase if its tools support handling credentials privately. Resend key setup (opens in a new tab).

This key works like a private password for the email connection. Keep it out of chat and your app's browser code. If your AI's tools cannot transfer it privately, enter it directly in Supabase yourself.

Check the sender and connection

To manage signup and sign-in in your Supabase project, open Authentication, then Email under Notifications, and choose SMTP Settings. Check that custom SMTP is enabled and the saved sender uses your verified domain.

The delivery key is different from the access your AI uses to manage your accounts. A key limited to sending email cannot configure domains. If you need to create that key yourself, use API Keys in Resend, choose Sending access, and restrict it to your sending domain.

You can use this connection with hosted Supabase. Its built-in email sender is intended for limited testing; custom delivery lets you send to your app's users. Both services have sending limits, so check the current settings and plan before testing. Supabase custom SMTP (opens in a new tab), Supabase rate limits (opens in a new tab), Resend account limits (opens in a new tab).

These field examples come from Resend's Supabase setup instructions (opens in a new tab). Use your app's values, then compare the saved connection with the table below.

Step 03Put a six-digit code in the email

Supabase can send a sign-in link or a code. It uses the same passwordless email request for both; the email template determines what the person receives. Email codes may appear as OTP, short for one-time password, in the settings. Supabase passwordless email (opens in a new tab).

In Supabase's email templates, check both Confirm sign up and Magic link or OTP. A new or unconfirmed account can receive the signup email, while a returning confirmed account receives the magic-link email. Updating only the returning-user template can leave signup sending the old message. Supabase email templates (opens in a new tab), Supabase's email-flow implementation (opens in a new tab).

What the code email should look like

The saved template needs a clear instruction to enter the code in your app, followed by this exact placeholder:

Supabase replaces it with the person's code when sending the email. Keep the spaces, braces, dot, and capital T as shown. The actual code should appear in the received email, not the placeholder. Template variables (opens in a new tab).

Before removing an existing link, check whether another login option still uses that template. Password signup may share the confirmation email. Add the code without breaking that existing path, and leave email confirmation enabled.

The example below shows the placeholder becoming a code. Your email can use your own styling. Check the instruction and six digits, rather than trying to match the colors. The number shown here is an example, not a working sign-in code.

Check the code settings

Save the relevant email templates. To choose email as the sign-in method, open Authentication → Sign In / Providers → Auth Providers → Email. Check Email OTP length and Email OTP expiration. Length is in digits; expiration is in seconds. Use six digits for this guide, and note how long the code is valid. Supabase documents a default expiry of one hour, but your project's setting is the one your app must follow. Passwordless email settings (opens in a new tab).

Also note the wait between code requests. Supabase's documented default is 60 seconds for another request by the same user. Your project may use a different value. You'll give that value to your AI in Step 5. Send limits (opens in a new tab).

You now have a sender, a connection, and emails that can show a code. It's time to build the part people use.

Step 04Have your AI add the code sign-in screens

Keep the experience small: an email field, then a code field, then the app. One code field is enough. Let people paste all six digits at once.

Sending the email should open code entry. To sign someone in, the app needs Supabase to accept the code and establish the signed-in state. Supabase calls the information that keeps someone signed in a session. Email-code verification (opens in a new tab).

For the code field, keyboard and autocomplete settings can help phones offer a useful input method. They don't guarantee every email app will fill the code for you. Pasting should still work. MDN input hints (opens in a new tab), autocomplete guidance (opens in a new tab).

Step 05Add resend and change-email options

Put Send another code and Change email beside the code field. The first asks for another email. The second lets the person correct the address without losing their place.

Show a countdown only while another send is unavailable. Use the actual wait you recorded from your project. The countdown helps the person understand the button; Supabase still decides whether a request is allowed.

There's a naming trap worth giving your AI explicitly. For this passwordless flow, Send another code repeats the same code-send operation. It does not use the separate signup-confirmation resend operation just because the button says “resend.” Supabase resend reference (opens in a new tab).

When several emails have arrived, use the newest successfully requested code. Clicking a button that fails is not the same thing as receiving a replacement.

Check the retry controls

Your AI should open the finished screen and exercise both controls. The example below shows the parts to look for: the destination email, one code field, a clear sign-in action, and ways to request another code or correct the address. Keep your app's own design.

Step 06Test new and returning users

Try the flow as someone who isn't already signed in. Use a private browser window and a test address you can read. Keep an eye on the sending limits while testing.

These checks cover the experience you just built:

Repeat signup and sign-in on your phone. Open the email, copy the whole code, return to the app, and paste it. Check that the code field keeps any leading zero and that the buttons and messages are easy to use.

You can ask your AI to simulate an expired code or a slow connection to check how the screens respond. Then check actual delivery with a real email.

Troubleshooting

Start with what you can see. It usually tells you which part to inspect next.

The email doesn't arrive

Check the address shown in the app, then check spam. If the address is wrong, use Change email.

If the address is right, open Resend's email activity and look for the attempted message. If it appears, inspect its status and any delivery explanation. A recorded send doesn't guarantee it reached the inbox.

If there's no message in Resend, check the saved Supabase SMTP settings, the sender's verified domain, and both services' current sending limits. Ask your AI to inspect the error from that failed attempt without copying secret values into its report. Supabase email troubleshooting (opens in a new tab), Resend account limits (opens in a new tab).

The code is rejected

Use the newest successfully requested code for the address still shown in the app. Check that all six digits were copied, including a leading zero.

If the code has expired, ask for another one when sending is available. If fresh codes keep failing, have your AI check that the app sends the current email and code to email-code verification, and that the configured code length matches the screen. Supabase verification (opens in a new tab).

The resend button stays unavailable

If the countdown is still running, wait for it to end. If it reaches zero but the button never returns, ask your AI to check the waiting state after errors and timeouts.

If the button works but Supabase refuses another send, the app may have reached a different sending limit. Check the returned error and project settings. Changing the visible countdown won't change the server's limit. Supabase rate limits (opens in a new tab).

The code is accepted, but sign-in doesn't finish

Ask your AI to follow the steps from accepted verification to your app's existing signed-in state. Check whether a usable session was returned, whether the existing browser and server setup agree on the account, and whether the app returns to the intended page.

If it works until you reload, inspect the existing signed-in state and cookie handling. If it happens after Change email, check that an earlier verification isn't updating the new attempt. This is a job for the account setup already in the app. Supabase server-side account setup (opens in a new tab).

Summary

The experience is simple: enter an email, receive a code, paste it into the app, and sign in. Supabase checks the code. Resend delivers the email. Your app handles the screens and gives people a way to retry or correct an address.

Finish by trying it with a new account, a returning account, and your phone. When those paths work, move on to the next part of your product.

Common questions