In modern full-stack development and vibe coding workflows, Supabase is no longer just “the open-source Firebase alternative” – it’s become a full development platform. You get a production-grade Postgres database plus powerful Auth, auto-generated APIs, and real-time subscriptions.
That’s why HiCyou uses Supabase as both its database and Auth solution.
One common pain point, though, is handling email confirmation for user sign-ups. Supabase’s built-in email service is great for quick tests, but it has a low sending limit and often lands in the spam folder.
In this guide, I’ll walk you through:
- Registering and creating a Supabase project
- Enabling and configuring Auth
- Integrating Resend (one of the most popular email services f…
In modern full-stack development and vibe coding workflows, Supabase is no longer just “the open-source Firebase alternative” – it’s become a full development platform. You get a production-grade Postgres database plus powerful Auth, auto-generated APIs, and real-time subscriptions.
That’s why HiCyou uses Supabase as both its database and Auth solution.
One common pain point, though, is handling email confirmation for user sign-ups. Supabase’s built-in email service is great for quick tests, but it has a low sending limit and often lands in the spam folder.
In this guide, I’ll walk you through:
- Registering and creating a Supabase project
- Enabling and configuring Auth
- Integrating Resend (one of the most popular email services for developers today) so your verification emails actually reach inboxes reliably.
Step 1: Create Your Supabase Database
First, you’ll need a Supabase organization.
- Go to supabase.com.
- Sign in with GitHub or register with email.
- Create an organization and choose a plan. For a new project, the Free Plan is usually more than enough. When you eventually need to upgrade, it typically means your product is doing pretty well.
Next, create a project:
- Fill in project details:
- Name: Give your project a name (for example,
My SaaS App). - Database Password: Write this down somewhere safe. This is your main database password and you won’t be able to view it again later.
- Region: Pick a region close to your users (for example, if your users are in Asia,
SingaporeorTokyois usually a good choice).
- Click "Create new project".
Step three is to understand how to connect to your database:
- Click the
Connectbutton at the top. - Under Method, select
Transaction pooler. This option works well across both IPv4 and IPv6 environments and is generally more compatible with various servers and local dev setups. - Copy the connection string, and remember to replace
[YOUR-PASSWORD]with the database password you just set.
Step 2: Configure Auth (Authentication)
Building a proper user system – especially the login flow – is harder than it looks. Implementing basic signup and login is easy; what’s difficult is making the system secure, reliable, and resistant to abusive mass registrations.
Supabase Auth gives you a solid infrastructure for this. If you build on top of it, you can pretty quickly get to a login system that’s “about 9/10” in terms of security without reinventing everything yourself.
Once your project is created, you’ll land in the Dashboard. Supabase enables Auth by default, but we’ll double-check the settings.
- In the left sidebar, click Authentication.
- Go to Sign In / Providers.
- You’ll see that Email is
Enabledby default.
-
Default email behavior:
-
If you don’t configure a custom SMTP server, Supabase will send emails from
noreply@mail.app.supabase.io. -
The catch: This default sender is convenient, but it has strict hourly sending limits and a high chance of landing in Gmail/Outlook spam folders. That’s exactly why we want to integrate Resend instead.
Enable Google, GitHub, etc. Login
GitHub and Google are two of the most common login options for developers, and enabling them already covers a large portion of users’ expectations.
Click the corresponding provider icon – we’ll use GitHub as an example here:
-
Click the GitHub Enabled toggle/button, then copy the Callback URL.
-
Go to https://github.com/settings/apps/new and create a new GitHub App.
-
Click Register application to create the OAuth app.
-
Click Generate a new client secret.
-
Copy the Client ID and Client secret back into the GitHub provider settings in Supabase Auth and save.
Step 3: Integrate Resend Email Service (Key Step)
Resend is currently one of the best email sending services for developers: simple API, great DX, and excellent deliverability. Supabase’s own docs also recommend using it to take over email sending.
3.1 Set Things Up in Resend
- Go to resend.com and sign up.
- Add a domain:
- Add a domain you own (for example,
myapp.com). - Important: Resend will show you several DNS records (DKIM, SPF, DMARC). Go to your DNS provider (Cloudflare, GoDaddy, Namecheap, etc.) and add these as TXT records.
- Wait for verification to pass (typically anywhere from a few minutes to a few hours).
- Get an API Key:
- In the Resend dashboard, go to API Keys -> Create API Key.
- Choose permission "Sending access".
- Copy the key that starts with
re_and keep it safe.
3.2 Configure Supabase to Use Resend
Back in the Supabase Dashboard:
- Click Project Settings (gear icon in the lower left).
- Go to Authentication -> SMTP Settings.
- Toggle Enable Custom SMTP to ON.
- Fill in the fields as follows:
| Field | Value | Description |
|---|---|---|
| Sender Email | noreply@yourdomain.com | Must be an email on the domain you verified |
| Sender Name | My App Team | Display name shown to users in their email client |
| Host | smtp.resend.com | Resend’s SMTP server |
| Port Number | 465 | SSL port |
| Username | resend | This is fixed – always use resend |
| Password | re_12345... | Paste the API Key you generated in Resend |
- Click Save.
Step 4: Customize Email Templates (Optional)
Now that the email pipeline is wired up, you can tweak the actual email content.
- Go back to Authentication -> Email Templates.
- Edit templates like "Confirm Your Signup" or "Reset Password".
- Templates support HTML. Just make sure you keep variables like
{{ .ConfirmationURL }}– this is the link users click to confirm their account.
Conclusion
You’re welcome to use https://github.com/hicyoucom/hicyou to spin up your own AI-powered link directory site.
Demo: https://hicyou.com