OTP Email

1import type { ReactNode } from "react"
2import {
3  Body,
4  Container,
5  Head,
6  Heading,
7  Hr,
8  Html,
9  Img,
10  Link,
11  Preview,
12  pixelBasedPreset,
13  Section,
14  Tailwind,
15  Text
16} from "react-email"
17 
18import { cn } from "../../../lib/utils"
19import {
20  type EmailClassNames,
21  type EmailColors,
22  EmailStyles
23} from "./email-styles"
24 
25const otpEmailLocalization = {
26  YOUR_VERIFICATION_CODE_IS_CODE:
27    "Your verification code is {verificationCode}",
28  LOGO: "Logo",
29  VERIFY_YOUR_EMAIL: "Verify your email",
30  WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS:
31    "We need to verify your email address {email} before you can access your {appName} account. Enter the code below in your open browser window.",
32  THIS_CODE_EXPIRES_IN_MINUTES:
33    "This code expires in {expirationMinutes} minutes.",
34  EMAIL_SENT_BY: "Email sent by {appName}.",
35  IF_YOU_DIDNT_REQUEST_THIS_EMAIL:
36    "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
37  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
38}
39 
40/**
41 * Localization strings for the OtpEmail component.
42 *
43 * Contains all text content used in the OTP (One-Time Password) email template.
44 */
45export type OtpEmailEmailLocalization = typeof otpEmailLocalization
46 
47/**
48 * Props for the OtpEmail component.
49 */
50export interface OtpEmailProps {
51  /** The one-time verification code to display */
52  verificationCode: string
53  /** Email address being verified */
54  email?: string
55  /** Name of the application sending the email */
56  appName?: string
57  /** Number of minutes until the verification code expires */
58  expirationMinutes?: number
59  /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
60  logoURL?: string | { light: string; dark: string }
61  /** Custom CSS class names for styling specific parts of the email */
62  classNames?: EmailClassNames
63  /** Custom color scheme for light and dark modes */
64  colors?: EmailColors
65  /** Whether to show the "Powered by better-auth" footer */
66  poweredBy?: boolean
67  /** Whether to enable dark mode support */
68  darkMode?: boolean
69  /** Additional React nodes to inject into the email head */
70  head?: ReactNode
71  /**
72   * Localization overrides for customizing email text
73   * @remarks `OtpEmailEmailLocalization`
74   */
75  localization?: Partial<OtpEmailEmailLocalization>
76}
77 
78/**
79 * Email template component that sends one-time password (OTP) verification codes to users.
80 *
81 * This email includes:
82// … truncated