Email Verification Email

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