Emails in the Next.js Supabase SaaS Starter Kit

Learn how to configure email providers, send transactional emails, and customize email templates in your MakerKit application using React Email and Nodemailer or Resend.

MakerKit provides a complete email system with two distinct types of emails: application emails (team invitations, account notifications) and Supabase Auth emails (verification, password reset). Each requires separate configuration.

Email System Overview

The email architecture in MakerKit consists of:

  1. Mailer Package (@kit/mailers): A provider-agnostic abstraction that supports Nodemailer (SMTP) and Resend (HTTP API)
  2. Email Templates (@kit/email-templates): React Email-based templates with i18n support
  3. Supabase Auth Templates: HTML templates for authentication flows, stored in apps/web/supabase/templates

Quick Start

For most applications, you need to:

  1. Configure your email provider - Set environment variables for Nodemailer (SMTP) or Resend
  2. Set up Supabase Auth emails - Replace default templates with MakerKit's token-hash templates
  3. Send transactional emails - Use the @kit/mailers package in your server-side code

Documentation

  1. Email Configuration - Set up Nodemailer or Resend as your email provider with proper SMTP credentials
  2. Sending Emails - Use the mailer API to send plain text and HTML emails from server-side code
  3. Email Templates - Create branded email templates with React Email and i18n support
  4. Authentication Emails - Configure Supabase Auth email templates for PKCE-compatible verification flows
  5. Custom Mailer - Integrate third-party email providers like SendGrid, Postmark, or AWS SES
  6. Local Development with Mailpit - Test emails locally using Mailpit without sending real messages