Transactional emails

Three emails are wired: magic link, password reset, and OTP. All three use the same send() helper, same Resend client, same React Email render pipeline. Adding more is one function call.

Where they live

• src/lib/email.ts — sender helpers (sendMagicLinkEmail, sendResetPasswordEmail, sendOTPEmail).
• src/lib/emails/magic-link-email.tsx — React Email template.
• src/lib/emails/reset-password-email.tsx
• src/lib/emails/otp-email.tsx

Customizing a template

Templates are plain React components with inline styles. Edit src/lib/emails/magic-link-email.tsx and ship. Use only the React Email primitives — div, p, a from @react-email/components — because Gmail discards most CSS.

Adding a new email

// 1. Create the template
// src/lib/emails/welcome-email.tsx
export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Body style={...}>
        <Heading>Welcome, {name}</Heading>
      </Body>
    </Html>
  );
}

// 2. Add a sender in src/lib/email.ts
export async function sendWelcomeEmail(email: string, name: string) {
  return send({
    to: email,
    subject: `Welcome to ${authConfig.appName}`,
    react: WelcomeEmail({ name }),
  });
}

// 3. Call it from a Better Auth hook or a server action.