Email

Transactional emails are built with React Email and delivered through Resend. The apps/email/ workspace owns all templates and rendering – the API imports compiled templates and sends them via the Resend SDK.

Workspace Structure

apps/email/
├── components/
│   └── BaseTemplate.tsx       # Shared header, footer, and styling
├── templates/
│   ├── otp-email.tsx          # OTP codes (sign-in, verification, password reset)
│   ├── email-verification.tsx # Link-based email verification
│   └── password-reset.tsx     # Link-based password reset
├── emails/                    # Preview files for dev server (sample data)
├── utils/
│   └── render.ts              # renderEmailToHtml() / renderEmailToText()
├── index.ts                   # Public exports
└── package.json

Templates

Three templates ship out of the box, all wrapped in BaseTemplate for consistent branding:

OTPEmail handles three types via a single type prop – "sign-in", "email-verification", and "forget-password" – each with different copy. Password resets include an additional security warning. The separate PasswordReset template uses a red button to emphasize the security-sensitive action.

Development

Preview templates locally with hot reload:

bun email:dev

This starts the React Email preview server at http://localhost:3001. Files in emails/ provide sample data for each template – edit them to test different states.

::: tip The email workspace must be built before the API can import templates. The root bun dev handles this automatically, but if you run the API standalone, run bun email:build first. :::

Sending Emails

The API sends emails through helper functions in apps/api/lib/email.ts. Each helper renders a template to both HTML and plain text, then sends via Resend:

// apps/api/lib/email.ts
import { OTPEmail, renderEmailToHtml, renderEmailToText } from "@repo/email";

const component = OTPEmail({
  otp,
  type,
  appName: env.APP_NAME,
  appUrl: env.APP_ORIGIN,
});
const html = await renderEmailToHtml(component);
const text = await renderEmailToText(component);

await sendEmail(env, {
  to: email,
  subject: `Your ${typeLabel} code`,
  html,
  text,
});

Available sender functions:

::: warning sendEmail() throws if you provide HTML without a plain text fallback. Always render both versions using renderEmailToHtml() and renderEmailToText(). :::

Development Shortcut

In development, sendOTP() also prints the code to the terminal for convenience:

OTP code for [email protected]: 482901

A valid RESEND_API_KEY is still required – the console output supplements the email, it doesn't replace it.

Adding a Template

1. Create the template in apps/email/templates/:

// apps/email/templates/invitation.tsx
import { Button, Heading, Text } from "@react-email/components";
import { BaseTemplate } from "../components/BaseTemplate";

interface InvitationProps {
  inviterName: string;
  orgName: string;
  acceptUrl: string;
  appName?: string;
  appUrl?: string;
}

export function Invitation({
  inviterName,
  orgName,
  acceptUrl,
  appName,
  appUrl,
}: InvitationProps) {
  return (
    <BaseTemplate
      preview={`${inviterName} invited you to ${orgName}`}
      appName={appName}
      appUrl={appUrl}
    >
      <Heading
        style={{ fontSize: "24px", fontWeight: "600", margin: "0 0 24px" }}
      >
        You're invited
      </Heading>
      <Text style={{ fontSize: "16px", lineHeight: "24px" }}>
        {inviterName} invited you to join <strong>{orgName}</strong>.
      </Text>
      <Button href={acceptUrl}>Accept Invitation</Button>
    </BaseTemplate>
  );
}

2. Export it from apps/email/index.ts:

export { Invitation } from "./templates/invitation.js";

3. Add a preview file in apps/email/emails/ with sample props for the dev server.

4. Create a sender function in apps/api/lib/email.ts following the same render-then-send pattern.

Environment Variables

Set in .env.local for development, Cloudflare secrets for staging/production. See Environment Variables.

File Map