Email Configuration in the Next.js Supabase Starter Kit

Before we delve into the configuration details, it's crucial to distinguish between Makerkit emails and Supabase Auth emails.

1. Makerkit Emails: These are transactional emails used for actions like team member invitations, account deletion confirmations, and any additional ones you'll be implementing.
2. Supabase Auth Emails: These emails are used for authentication-related actions, such as email verification and password reset.

To have a comprehensive email setup in your application, you'll need to configure both Makerkit and Supabase Auth emails.

This guide focuses on setting up Makerkit emails. For Supabase Auth, please refer to the Supabase documentation.

Makerkit offers the @kit/mailers package to configure and send emails, providing a straightforward API for email operations.

There are three mailer implementations provided by Makerkit:

1. nodemailer: This is the default mailer that leverages the nodemailer library. It's ideal for Node.js environments as it's compatible with any SMTP server, ensuring you're not tied to a specific provider.
2. resend: This mailer uses the Resend API via HTTP. It's a suitable choice if you opt for Resend.

The following sections will guide you on configuring the mailer provider to start sending emails from your Next.js Supabase Starter Kit.

Configuration

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

MAILER_PROVIDER=nodemailer

By default, nodemailer is used.

SMTP Configuration

If you're using the nodemailer mailer, you'll need to set the SMTP configuration in your environment variables. Here's an example of the SMTP configuration:

EMAIL_USER=
EMAIL_PASSWORD=
EMAIL_HOST=
EMAIL_PORT=
EMAIL_TLS=
EMAIL_SENDER=your-email

The variables are:

1. EMAIL_USER: The email address user. This is provider-specific, so refer to your email provider's documentation.
2. EMAIL_PASSWORD: The password for the email account, provided by your email provider.
3. EMAIL_HOST: The SMTP server host. This is provider-specific, so refer to your email provider's documentation.
4. EMAIL_PORT: The SMTP server port. This is provider-specific, so refer to your email provider's documentation.
5. EMAIL_TLS: The TLS configuration. This is provider-specific, so refer to your email provider's documentation. Generally, you can set it to true.
6. EMAIL_SENDER: The sender of the emails. This is usually the email address of your application. It's usually in the format Sender Name <email@app.com>.

Sometimes, EMAIL_SENDER should be written in the format Sender Name <email@app.com>. It depends on your SMTP provider.

Resend

As an alternative, 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
EMAIL_SENDER=your-email

That's it! You're now ready to send emails from your Next.js Supabase Starter Kit using the configured mailer provider.