New Device 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 
26/**
27 * Device information displayed in the new device email notification.
28 */
29export interface DeviceInfo {
30  /** Browser name and version */
31  browser?: string
32  /** Operating system name and version */
33  os?: string
34  /** Geographic location of the sign-in */
35  location?: string
36  /** IP address of the device */
37  ipAddress?: string
38  /** Timestamp of the sign-in event */
39  timestamp?: string
40}
41 
42const newDeviceEmailLocalization = {
43  NEW_SIGN_IN_DETECTED: "New sign-in detected",
44  LOGO: "Logo",
45  NEW_SIGN_IN_TO_YOUR_ACCOUNT:
46    "We detected a new sign-in to your {appName} account {userEmail} from a device we don't recognize.",
47  DEVICE_DETAILS: "Device details",
48  BROWSER: "Browser",
49  OPERATING_SYSTEM: "Operating System",
50  LOCATION: "Location",
51  IP_ADDRESS: "IP Address",
52  TIME: "Time",
53  IF_THIS_WAS_YOU:
54    "If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.",
55  SECURE_MY_ACCOUNT: "Secure my account",
56  EMAIL_SENT_BY: "Email sent by {appName}.",
57  IF_YOU_DIDNT_SIGN_IN:
58    "If you didn't sign in, please contact support immediately {supportEmail} to secure your account.",
59  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
60}
61 
62/**
63 * Localization strings for the NewDeviceEmail component.
64 *
65 * Contains all text content used in the new device detection email template.
66 */
67export type NewDeviceEmailLocalization = typeof newDeviceEmailLocalization
68 
69/**
70 * Props for the NewDeviceEmail component.
71 */
72export interface NewDeviceEmailProps {
73  /** Email address of the user account */
74  userEmail?: string
75  /** Information about the device that signed in */
76  deviceInfo?: DeviceInfo
77  /** URL to secure the account if unauthorized access is suspected */
78  secureAccountLink?: string
79  /** Name of the application sending the email */
80  appName?: string
81  /** Support email address for security concerns */
82  supportEmail?: string
83  /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
84  logoURL?: string | { light: string; dark: string }
85  /** Custom CSS class names for styling specific parts of the email */
86// … truncated