Beyond Login Emails: What You Can Build with Supabase Auth Hooks, React Email, and Resend

The video “Custom Auth Emails with React Email and Resend” shows how to replace Supabase’s default authentication emails with fully custom, React-based templates delivered via Resend and powered by Supabase Auth Email Hooks. On the surface, this looks like a branding improvement—but the underlying methodology unlocks an entire class of product features and applications.

This article explores that methodology and the kinds of apps and workflows it enables.

The Core Methodology

At its heart, the approach demonstrated in the video follows this pipeline:

  1. Supabase Auth triggers an email event
    (magic link, OTP, confirmation, recovery, invite, etc.)

  2. An Auth Email Hook fires
    Supabase sends a signed webhook payload to your Edge Function.

  3. A Supabase Edge Function handles the logic

    • Verifies the webhook signature

    • Extracts token, redirect URL, action type, and user email

  4. React Email renders the email UI
    Emails are built as React components with full layout and styling control.

  5. Resend sends the email
    Using your own domain, branding, and delivery settings.

  6. Supabase continues the auth flow
    Once the Edge Function responds with 200 OK, the authentication process completes.

The key insight is that authentication emails become programmable, not static templates.

Why This Is More Than Just “Custom Emails”

Traditional auth systems treat emails as boilerplate. This methodology treats them as first-class product surfaces.

With hooks + Edge Functions:

  • Emails can be dynamic

  • Content can depend on user role or context

  • Links can encode workflow state

  • Branding can be pixel-perfect

  • Logic lives in version-controlled code

Once you have that, entire categories of apps become easier—or even possible.

Step-by-step companion guide: Custom Supabase Auth Emails with React Email + Resend (via Email Hooks + Edge Functions)

This guide follows the video “Custom Auth Emails with React Email and Resend” and mirrors the same flow:
Auth Email Hook → Edge Function → React Email template → Resend send (plus the “or use the Supabase Resend integration” option at the end).

What you’ll end up with

  • Supabase Auth emails (confirm signup, magic link, recovery, etc.) are no longer “default templates”

  • Instead, Supabase calls your Edge Function (Auth Email Hook)

  • Your Edge Function renders a React Email template and sends via Resend

0) Prereqs

  • Supabase project (already created)

  • Resend account + API key

  • Node.js installed

  • Supabase CLI installed

Terminal

# Install Supabase CLI (pick one)
brew install supabase/tap/supabase
# or npm
npm i -g supabase

Login:

supabase login

Initialize a local supabase folder in your project:

supabase init

Link to your Supabase project:

supabase link --project-ref <YOUR_PROJECT_REF>

1) Create a Resend API key + verify sending domain

In Resend:

  1. Add/verify a sending domain (recommended for deliverability)

  2. Create an API key

You’ll store it as a Supabase secret in a later step.

2) Create a Supabase Edge Function for the Auth Email Hook (chapter “Use React Email in Supabase Edge Functions”)

Terminal

supabase functions new send-auth-email

This creates:

  • supabase/functions/send-auth-email/index.ts (Deno Edge Function entry)

3) Add dependencies used in the video: Resend + React Email rendering

Supabase Edge Functions run on Deno, so you’ll typically import dependencies via URL imports (or a supported npm spec depending on your setup). Use the project code linked in the video description as the reference implementation.

Prompt (Cursor / ChatGPT)

In supabase/functions/send-auth-email/index.ts, implement an Edge Function that:
- verifies the Supabase Auth Hook webhook signature
- inspects the email action type (magic link, signup confirmation, recovery, etc.)
- renders a React Email template for that action type
- sends the email with Resend
- returns

Apps and Product Features You Can Build

1. Fully Branded SaaS Authentication

You can build SaaS products where authentication feels like part of the core experience, not a generic afterthought.

Enables

  • Custom magic-link emails

  • Brand-consistent typography and layout

  • Custom domains and sender identities

Ideal for:

  • B2B SaaS

  • Customer-facing platforms

  • Premium products where trust matters

2. Passwordless / Magic-Link-Only Apps

The video focuses he

Vibe Coding, SupabaseFrancesca Tabor