Emails

Nodemailer

Nodemailer is a powerful module for Node.js applications to allow easy email sending. It's the de facto solution for handling emails in Node.js.

Resend

Resend is a convient email service using AWS SES as their SMTP provider. It costs $0/mo or $20/mo depending on the amount of emails you are sending.

React Email

React Email is a framework for building and sending emails using React components. It allows you to create dynamic and responsive email templates with ease.

Available email templates

Following email templates are already implemented:

1. Verify Email Address
2. Welcome
3. Password Reset
4. Invitation
5. Revoked Invitation
6. Connected Account Security Alert
7. Confirm Email Address Change
8. Feedback

Rendered email template example

Environment Variables

Achromatic supports both NodeMailer (SMTP) and Resend.

1. Choose an email provider (Gmail for testing is fine).
2. Update .env with your settings/credentials.

EMAIL_SENDER=noreply@mailer.mydomain.com # recommend to use subdomain for transactional/marketing emails
EMAIL_MAILER=NodeMailer # NodeMailer (default) | Resend
 
# NodeMailer
 
EMAIL_SERVER_HOST=
EMAIL_SERVER_PORT=
EMAIL_SERVER_USER=
EMAIL_SERVER_PASS=
 
# Resend
 
EMAIL_RESEND_API_KEY=

Note: For Gmail, you'll need to use an app-specific password. Follow Google's instructions to generate one. Here is an example:

EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=465
EMAIL_SERVER_USER=example@gmail.com
EMAIL_SERVER_PASS=suyz yeba qtgv xrnp

Sending emails

To streamline the email sending process, create a dedicated function for each use case. Here's an example for sending a password reset email:

import {
  PasswordResetEmail,
  type PasswordResetEmailData
} from '@/emails/password-reset-email';
import { sendEmail } from '@/lib/smtp/mailer/send-email';
 
export async function sendPasswordResetEmail(
  data: PasswordResetEmailData
): Promise<void> {
  const component = PasswordResetEmail(data);
  const html = await renderAsync(component);
  const text = await renderAsync(component, { plainText: true });
 
  await sendEmail({
    recipient: data.recipient,
    subject: 'Reset password instructions',
    html,
    text
  });
}