Magic Link 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 magicLinkEmailLocalization = {
27  SIGN_IN_TO_APP_NAME: "Sign in to {appName}",
28  SIGN_IN_TO_YOUR_ACCOUNT: "Sign in to your account",
29  YOUR_ACCOUNT: "your account",
30  LOGO: "Logo",
31  CLICK_BUTTON_TO_SIGN_IN:
32    "Click the button below to sign in to your account {emailAddress}.",
33  OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
34  THIS_LINK_EXPIRES_IN_MINUTES:
35    "This link expires in {expirationMinutes} minutes.",
36  EMAIL_SENT_BY: "Email sent by {appName}.",
37  IF_YOU_DIDNT_REQUEST_THIS_EMAIL:
38    "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
39  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
40}
41 
42/**
43 * Localization strings for the MagicLinkEmail component.
44 *
45 * Contains all text content used in the magic link authentication email template.
46 */
47export type MagicLinkEmailLocalization = typeof magicLinkEmailLocalization
48 
49/**
50 * Props for the MagicLinkEmail component.
51 */
52export interface MagicLinkEmailProps {
53  /** Magic link URL for passwordless authentication */
54  url: string
55  /** Email address of the user signing in */
56  email?: string
57  /** Name of the application sending the email */
58  appName?: string
59  /** Number of minutes until the magic 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 `MagicLinkEmailLocalization`
76   */
77  localization?: Partial<MagicLinkEmailLocalization>
78}
79 
80/**
81 * Email template component that sends magic link authentication emails for passwordless sign-in.
82 *
83// … truncated