Email Templates

This guide will help you set up and customize email templates for both transactional and marketing emails in the Next.js Supabase SaaS template using Supabase and Resend services.

Overview

In the Next.js Supabase SaaS template, email templates are used to send professional and consistent emails to users. Two key types of emails are managed in the template:

Transactional Emails: Handled by Supabase, primarily for authentication-related actions.
Marketing Emails: Managed via Resend, with email templates created using React.Email.

Transactional Emails (Supabase)

Supabase is used for all auth-related transactional emails. These emails include actions such as user invitations, password resets, and email change confirmations. Supabase provides a variety of pre-configured email templates that can be customized for your specific use case.

Supabase Email Templates

Invite User
Magic Link
Change Email Address
Reset Password

Customizing Email Templates Locally

To customize Supabase email templates for local development:

Open the config.toml file located in the /supabase/templates directory.
Specify the email subject and content path in the appropriate configuration section.
- Example configuration:
  [auth.email.template.recovery] subject = "Reset Password" content_path = "local html file path"

Customizing Supabase Email Templates in Production:

You can edit templates in Supabase dashboard (Similar to customizing templates locally)

Open Supabase Dashboard and select project.
Go to Authentication tab and Select Email Templates under Configuration column.
Edit the templates. Refer Link (https://supabase.com/dashboard/project/{project_id}/auth/templates)

For detailed information on customizing Supabase email templates, refer to the official Supabase documentation.

Create a new template file in the /emails directory in root.
You can refer to the invite.tsx example for structuring your email template.

Below is a sample code snippet for an Invite Email Template:

import { ClientConfiguration } from "@/config/client.config";
import { Body, Button, Container, Head, Html, Img, Section } from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
 
interface InviteEmailTemplateProps {
	inviteURL: string;
}
 
export default function InviteEmailTemplate({ inviteURL }: InviteEmailTemplateProps) {
	return (
		<Html>
			<Head />
			<Tailwind>
				<Body className="bg-white my-auto mx-auto font-sans px-2">
					<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
						<Section className="mt-[32px]">
							<Img
								src={`${ClientConfiguration.env.SITE_BASE_URL}${ClientConfiguration.app.emailLogoPath}`}
								width="50"
								height="50"
								alt={ClientConfiguration.app.name}
								className="my-0 mx-auto"
							/>
						</Section>
						<p className="text-black text-[24px] font-normal text-center p-0 my-[20px] mx-0">
							Join your organization on <strong>{ClientConfiguration.app.name}</strong>
						</p>
						<Section className="text-center mt-[32px] mb-[32px]">
							<Button
								className="bg-[#fd5370] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
								href={inviteURL}
							>
								Accept Invite
							</Button>
						</Section>
					</Container>
				</Body>
			</Tailwind>
		</Html>
	);
}

In this example, the template dynamically references the application's name and email logo, providing a personalized experience for the user.

Overview

Transactional Emails (Supabase)

Supabase Email Templates

Customizing Email Templates Locally

Customizing Supabase Email Templates in Production:

Marketing Emails (Resend)

Setting Up Resend

Marketing Email Template

On this page