Email Configuration

Learn how to configure the mailer provider to start sending emails from your Next.js Supabase Starter Kit.

Makerkit Emails vs Supabase Auth Emails

Before we dive into the configuration, it's important to understand the difference between Makerkit emails and Supabase Auth emails.

  1. Makerkit Emails: Makerkit emails are used to send transactional emails, such as inviting a member to join a team, and a delete account confirmation, plus all the ones you will be adding
  2. Supabase Auth Emails: Supabase Auth emails are used to send emails for authentication purposes, such as email verification and password reset.

You will need to set up both Makerkit and Supabase Auth emails to have a complete email setup in your application.

The guide below refers to Makerkit emails.

For Supabase Auth, please refer to the Supabase documentation for more information.


Makerkit allows you to configure and send emails using the @kit/mailers package. The package provides a simple API to send emails.

Makerkit provides three implementations of the mailer:

  1. nodemailer: The default mailer that uses the nodemailer library. Perfect for Node.js environments as it works with any SMTP server - so you're not locked into any specific provider.
  2. cloudflare: A mailer that uses the Cloudflare Workers API. It's a good choice if you're deploying your app to Cloudflare Workers.
  3. resend: A mailer that uses the Resend API using HTTP. It's a good choice if you choose to use Resend.

Below, we will show you how to configure the mailer provider to start sending emails from your Next.js Supabase Starter Kit.

Configuration

To set the mailer provider, you need to set the MAILER_PROVIDER environment variable in the apps/web/.env file. For example, to use the nodemailer mailer, set the MAILER_PROVIDER environment variable to nodemailer:

MAILER_PROVIDER=nodemailer

By default, we use nodemailer.

SMTP Configuration

If you want to use the nodemailer mailer, you need to set the SMTP configuration in your environment variables. Here is an example of the SMTP configuration:

EMAIL_USER= EMAIL_PASSWORD= EMAIL_HOST= EMAIL_PORT= EMAIL_TLS=

The variables are:

  1. EMAIL_USER: The user of the email address. This is provider-specific so please check your email provider's documentation.
  2. EMAIL_PASSWORD: The password of the account provided by the email provider.
  3. EMAIL_HOST: The SMTP server host. This is provider-specific so please check your email provider's documentation.
  4. EMAIL_PORT: The SMTP server port. This is provider-specific so please check your email provider's documentation.
  5. EMAIL_TLS: The TLS configuration. This is provider-specific so please check your email provider's documentation. Generally, you can set it to true.

If you want to use the Cloudflare Mailer or the Resend Mailer, you need to set the MAILER_PROVIDER environment variable to cloudflare or resend.

Cloudflare Mailer

Since the default library nodemailer relies on Node.js, we cannot use it in the Edge runtime. Instead, we will use the Cloudflare Mailer or the Resend Mailer.

To use the Cloudflare Mailer, you need to do the following. Set the MAILER_PROVIDER environment variable to cloudflare in the apps/web/.env file:

MAILER_PROVIDER=cloudflare

Setup SPF and DKIM records in your DNS settings.

Please follow the Vercel Email documentation to set up the SPF and DKIM records.

Resend API

Alternatively, you can use Resend.

Set the MAILER_PROVIDER environment variable to resend in the apps/web/.env file:

MAILER_PROVIDER=resend

And provide the Resend API key:

RESEND_API_KEY=your-api-key

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS