Skip to main content
Supabase is your database, and your platform depends on it completely. Every customer account, every agent, every call record and every transaction lives here. This chapter has four parts: creating the database itself, adding a webhook so your app knows when someone confirms their account, connecting Resend so account emails come from your domain, and styling those emails.

Create your project

1

Sign up

Go to supabase.com and click Start your project.
Supabase home page with the Start your project button
Sign up with the professional email you created in Hostinger, and choose a password. Click Sign up.
Supabase signup form
2

Confirm your email

Supabase sends a confirmation link to your inbox.
This link expires after 10 minutes, so check your email straight away rather than coming back to it later.
Supabase page confirming the verification email was sent
Go to mail.hostinger.com, open the email from Supabase and confirm.
Supabase confirmation email
3

Create your organisation

Give your organisation a name, set the type to Personal and the plan to Free, then click Create organisation.
Supabase organisation creation form
4

Create your project

Name the project after your domain or company, and set a strong database password.Three security settings matter here. Uncheck Automatically expose new tables, and check Enable Data API and Enable automatic RLS. Together these mean new tables stay private by default and are protected by row level security, so one customer can never read another customer’s data.For the region, don’t leave the suggested Americas option selected. Scroll to Specific Regions and choose East US (North Virginia) us-east-1, which is where your app runs on Vercel and where you’ll put Upstash later. Keeping everything in one data centre keeps your app fast.Click Create new project.
Supabase project creation form with region and security settings

Region and the three security settings are the choices that matter on this page.

Build the database

Your database starts empty. This step creates every table your platform needs, along with the security rules and automations that make them work.
1

Open the SQL editor

From your project, click SQL Editor in the sidebar.
Supabase project page with the SQL Editor sidebar option
2

Run the setup script

Use the copy button in the top right corner of the block below, paste the script into the editor, and click Run. The copy button takes the entire script, so there’s no need to scroll through it.
schema.sql
Supabase SQL editor with the schema pasted and the Run button
A popup may warn you that the query contains destructive operations. That’s expected: the script is written so it can be run more than once safely, which means it clears and recreates things like security rules as it goes. On a fresh database there’s nothing to destroy. Click Run query.
Supabase popup warning about destructive operations
When it finishes you’ll see Success. No rows returned, which is what success looks like for a script that creates things rather than fetching them.
3

Check your tables

Click Table Editor in the sidebar.
Supabase sidebar with the Table Editor option
You should see nine tables listed.
Supabase Table Editor listing the nine created tables

Nine tables means the script ran completely.

Add the welcome email webhook

When a customer confirms their email address, your app sends them a welcome message. For that to happen, the database has to tell your app the moment the confirmation occurs, and that’s what this webhook does.
1

Install the webhooks integration

Click Integrations in the sidebar.
Supabase Integrations sidebar option
This opens a marketplace of available integrations. Scroll down until you find the Database Webhooks card and click it.
Supabase integrations marketplace with the Database Webhooks card
Click Install integration.
Database Webhooks integration page with the Install integration button
A panel shows what’s being installed, including an extension called pg_net that lets your database make outbound requests, which is exactly what a webhook needs. There’s nothing to configure, so click Install integration again to confirm.
Installation review panel showing the pg_net extension
2

Create the hook

Click the Webhooks tab.
Webhooks tab after installing the integration
Then click Create a new hook.
Create a new hook button
3

Configure it

Fill the form as follows:
  • Name: send-welcome-email
  • Table: auth users
  • Events: check Update only, since confirming an email updates an existing user rather than creating one
  • Type: HTTP Request
  • Method: POST
  • URL: https://www.yourdomain.com/api/webhooks/supabase-auth, with your own domain
  • Timeout: leave the default
Supabase webhook configuration form

Update is the only event to check. The others would fire at the wrong moments.

4

Add the shared password

Scroll to HTTP Headers and click Add a new header. Set the name to x-webhook-secret and the value to a password you choose.This address is publicly reachable, so without a password anyone who guessed it could tell your app that someone confirmed their account. Your app checks this password on every request and ignores anything that doesn’t match.
Before clicking Create webhook, open Vercel in another tab, find SUPABASE_WEBHOOK_SECRET in your environment variables and paste this exact password there. The two must match or the webhook is rejected every time.
Once you’ve saved it in Vercel, come back and click Create webhook.

Connect Resend to Supabase

Supabase sends the emails that belong to accounts: confirm your signup, reset your password, your password changed. Out of the box those come from Supabase’s own servers, which means they don’t come from your domain and often land in spam. Connecting Resend fixes that, so those messages arrive from your address exactly like the ones your app sends itself.
1

Open the SMTP settings

Click Authentication in the sidebar.
Supabase Authentication sidebar option
In the Authentication menu, click the Emails section.
Emails section under Authentication
Click Set up SMTP.
Set up custom SMTP box with its button
2

Fill in the connection

Enable custom SMTP, then complete the form.Two fields are yours:
  • Sender email address: the exact same address you set as RESEND_FROM_EMAIL in Vercel, for example noreply@mail.yourdomain.com
  • Sender name: your brand name, which is what recipients see in their inbox
Use the same brand name here that you’ll set on your platform’s Branding page. Supabase sends your account emails and your app sends the rest, and when both use the same name and address your customers can’t tell they came from two different systems. A mismatch is what makes emails look automated or suspicious.
The rest are Resend’s own settings, identical for everyone, so enter them exactly as written:For Password, go to Vercel, open RESEND_API_KEY, copy its value, and paste it here.Click Save changes, then click the Templates tab at the top of the page, which is where the next section continues.
Supabase custom SMTP configuration form filled in, with the Templates tab marked as the next step

The sender address and the password are both copied from Vercel. Once saved, the Templates tab at the top is where you continue.

Style your account emails

Supabase’s default emails are plain, unstyled and look like system messages, which hurts both trust and deliverability. These three replace them with branded versions.
1

Replace the signup confirmation

On the Templates tab you just opened, click Confirm sign up.
Confirm sign up template in the Supabase templates list
Delete everything in the message body, copy the code below and paste it in its place, then click Save changes. Once saved, click Emails in the breadcrumb at the top left to return to the templates list.
confirm-signup.html
Your editor should now hold the pasted template instead of Supabase’s default.
Supabase template editor with the confirm signup HTML pasted

You can use the preview in the top right of the editor to see how it looks.

2

Replace the password reset

Back on the templates list, click Reset password. Delete everything in the message body, copy the code below and paste it in its place, then click Save changes. Return to the templates list the same way, using the Emails breadcrumb at the top left.
Reset password template in the Supabase templates list
reset-password.html
Again, the editor should hold the pasted template once you’re done.
Supabase template editor with the reset password HTML pasted
3

Enable and replace the password change notice

In the Security section of the templates list, turn on Password changed, then click it to open it.This one is off by default. It tells a customer when their password changes, which is how they find out if someone else changed it.
Password changed template with its enable toggle

This template has to be enabled before you can edit it.

Delete everything in the message body, copy the code below and paste it in its place, then click Save changes. Use the Emails breadcrumb once more to leave the template.
password-changed.html
That’s the last of the three templates.
Supabase template editor with the password changed HTML pasted
The links inside those emails need to lead somewhere. By default Supabase points them at localhost:3000, a developer address, so without this step every confirmation link your customers click would land on a broken page.
1

Open URL Configuration

Still under Authentication, click URL Configuration.
URL Configuration option in the Authentication sidebar
2

Set your addresses

Set Site URL to your domain, keeping the www:
Then, under Redirect URLs, use Add URL to add these two:
The first is where customers land after confirming their signup, the second after resetting their password. This list is a security allow-list: Supabase refuses to send users anywhere that isn’t on it, which is what stops someone from crafting a link that redirects your customers elsewhere.When both URLs are listed and the page shows Total URLs: 2, click the gear icon in the narrow icon bar on the far left to open your project settings, which is where the last section takes place.
Supabase URL Configuration page with the site URL and redirect URLs set

Connect it to your app

Three values connect your app to this database.
1

Copy your API keys

In the project settings you just opened, click API Keys.
API Keys option in Supabase project settings
You’ll see two keys. Copy the Publishable key into NEXT_PUBLIC_SUPABASE_ANON_KEY in Vercel, and the Secret key into SUPABASE_SERVICE_ROLE_KEY.
The variable names mention anon and service_role, which were Supabase’s older names for these same two keys. The Publishable key replaces the anon key, and the Secret key replaces the service role key, so they go in those exact variables.
Once both are saved in Vercel, click the home icon at the top of the narrow icon bar on the far left to go back to your project.
Supabase API keys page showing the publishable and secret keys, with the home icon marked as the next step

The publishable key is safe in a browser. The secret key never leaves Vercel.

2

Copy your project URL

On your project’s page, look under its name to find its URL, with a Copy button beside it. Click that button and choose Project URL.Paste it into NEXT_PUBLIC_SUPABASE_URL in Vercel and save.
Supabase project overview page with the project URL and copy button

What’s next

Your database is built, your account emails are branded and pointed at your domain, and your app knows how to reach them. Next you’ll connect Retell AI, the service that gives your customers’ agents a voice.