@better-auth-ui/react 1.6.0

package/dist/components/email/email-verification.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const emailVerificationEmailLocalization = {
+    VERIFY_YOUR_EMAIL_ADDRESS: "Verify your email address",
+    LOGO: "Logo",
+    CLICK_BUTTON_TO_VERIFY_EMAIL: "Click the button below to verify your email address {emailAddress} for your {appName} account.",
+    VERIFY_EMAIL_ADDRESS: "Verify email address",
+    OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+    THIS_LINK_EXPIRES_IN_MINUTES: "This link expires in {expirationMinutes} minutes.",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+};
+/**
+ * Email template component that sends email verification links to users.
+ *
+ * This email includes:
+ * - Verification button and fallback URL
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailVerificationEmail
+ *   url="https://example.com/verify?token=abc123"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={60}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailVerificationEmail = ({ url, email, appName, expirationMinutes = 60, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...EmailVerificationEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.VERIFY_YOUR_EMAIL_ADDRESS;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: localization.VERIFY_EMAIL_ADDRESS }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.CLICK_BUTTON_TO_VERIFY_EMAIL.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeEmailAddress, afterEmailAddress] = textWithAppName.split("{emailAddress}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeEmailAddress, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterEmailAddress] })) : (textWithAppName
+                                            .replace("{emailAddress}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), _jsx(Section, { className: "my-6", children: _jsx(Button, { href: url, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: localization.VERIFY_EMAIL_ADDRESS }) }), _jsx(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.OR_COPY_AND_PASTE_URL }), _jsx(Link, { className: cn("break-all text-xs text-primary", classNames?.link), href: url, children: url }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), expirationMinutes || appName ? (_jsxs(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: [expirationMinutes
+                                            ? localization.THIS_LINK_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", expirationMinutes.toString())
+                                            : null, appName && (_jsxs(_Fragment, { children: [expirationMinutes ? " " : "", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] })) : null, _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
+};
+/**
+ * Default localization strings for the email verification template.
+ * Can be overridden via the `localization` prop.
+ */
+EmailVerificationEmail.localization = emailVerificationEmailLocalization;
+/**
+ * Example props for previewing the email template in development.
+ */
+EmailVerificationEmail.PreviewProps = {
+    url: "https://better-auth-ui.com/auth/verify-email?token=example-token",
+    appName: "Better Auth",
+    email: "m@example.com",
+    darkMode: true
+};
+export default EmailVerificationEmail;

package/dist/components/email/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./email-changed";
+export * from "./email-localization";
+export * from "./email-styles";
+export * from "./email-verification";
+export * from "./magic-link";
+export * from "./new-device";
+export * from "./otp-email";
+export * from "./password-changed";
+export * from "./reset-password";

package/dist/components/email/index.js

@@ -0,0 +1,9 @@
+export * from "./email-changed";
+export * from "./email-localization";
+export * from "./email-styles";
+export * from "./email-verification";
+export * from "./magic-link";
+export * from "./new-device";
+export * from "./otp-email";
+export * from "./password-changed";
+export * from "./reset-password";

package/dist/components/email/magic-link.d.ts

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
+declare const magicLinkEmailLocalization: {
+    SIGN_IN_TO_APP_NAME: string;
+    SIGN_IN_TO_YOUR_ACCOUNT: string;
+    YOUR_ACCOUNT: string;
+    LOGO: string;
+    CLICK_BUTTON_TO_SIGN_IN: string;
+    OR_COPY_AND_PASTE_URL: string;
+    THIS_LINK_EXPIRES_IN_MINUTES: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+/**
+ * Localization strings for the MagicLinkEmail component.
+ *
+ * Contains all text content used in the magic link authentication email template.
+ */
+export type MagicLinkEmailLocalization = typeof magicLinkEmailLocalization;
+/**
+ * Props for the MagicLinkEmail component.
+ */
+export interface MagicLinkEmailProps {
+    /** Magic link URL for passwordless authentication */
+    url: string;
+    /** Email address of the user signing in */
+    email?: string;
+    /** Name of the application sending the email */
+    appName?: string;
+    /** Number of minutes until the magic link expires */
+    expirationMinutes?: number;
+    /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Custom CSS class names for styling specific parts of the email */
+    classNames?: EmailClassNames;
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to show the "Powered by better-auth" footer */
+    poweredBy?: boolean;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+    /** Additional React nodes to inject into the email head */
+    head?: ReactNode;
+    /**
+     * Localization overrides for customizing email text
+     * @remarks `MagicLinkEmailLocalization`
+     */
+    localization?: Partial<MagicLinkEmailLocalization>;
+}
+/**
+ * Email template component that sends magic link authentication emails for passwordless sign-in.
+ *
+ * This email includes:
+ * - Sign-in button with magic link
+ * - Fallback URL for manual copy/paste
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <MagicLinkEmail
+ *   url="https://example.com/auth/verify?token=abc123"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={5}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const MagicLinkEmail: {
+    ({ url, email, appName, expirationMinutes, logoURL, colors, classNames, darkMode, poweredBy, head, ...props }: MagicLinkEmailProps): import("react/jsx-runtime").JSX.Element;
+    localization: {
+        SIGN_IN_TO_APP_NAME: string;
+        SIGN_IN_TO_YOUR_ACCOUNT: string;
+        YOUR_ACCOUNT: string;
+        LOGO: string;
+        CLICK_BUTTON_TO_SIGN_IN: string;
+        OR_COPY_AND_PASTE_URL: string;
+        THIS_LINK_EXPIRES_IN_MINUTES: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    PreviewProps: MagicLinkEmailProps;
+};
+export default MagicLinkEmail;

package/dist/components/email/magic-link.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const magicLinkEmailLocalization = {
+    SIGN_IN_TO_APP_NAME: "Sign in to {appName}",
+    SIGN_IN_TO_YOUR_ACCOUNT: "Sign in to your account",
+    YOUR_ACCOUNT: "your account",
+    LOGO: "Logo",
+    CLICK_BUTTON_TO_SIGN_IN: "Click the button below to sign in to your account {emailAddress}.",
+    OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+    THIS_LINK_EXPIRES_IN_MINUTES: "This link expires in {expirationMinutes} minutes.",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+};
+/**
+ * Email template component that sends magic link authentication emails for passwordless sign-in.
+ *
+ * This email includes:
+ * - Sign-in button with magic link
+ * - Fallback URL for manual copy/paste
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <MagicLinkEmail
+ *   url="https://example.com/auth/verify?token=abc123"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={5}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const MagicLinkEmail = ({ url, email, appName, expirationMinutes = 5, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...MagicLinkEmail.localization,
+        ...props.localization
+    };
+    const previewText = appName
+        ? localization.SIGN_IN_TO_APP_NAME.replace("{appName}", appName)
+        : localization.SIGN_IN_TO_YOUR_ACCOUNT;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: appName
+                                        ? localization.SIGN_IN_TO_APP_NAME.replace("{appName}", appName)
+                                        : localization.SIGN_IN_TO_YOUR_ACCOUNT }), _jsx(Text, { className: cn("m-0 text-sm font-normal", classNames?.content), children: (() => {
+                                        const [beforeEmailAddress, afterEmailAddress] = localization.CLICK_BUTTON_TO_SIGN_IN.split("{emailAddress}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeEmailAddress, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterEmailAddress] })) : (localization.CLICK_BUTTON_TO_SIGN_IN.replace("{emailAddress}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), _jsx(Section, { className: "my-6", children: _jsx(Button, { href: url, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: appName
+                                            ? localization.SIGN_IN_TO_APP_NAME.replace("{appName}", appName)
+                                            : localization.SIGN_IN_TO_YOUR_ACCOUNT }) }), _jsx(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.OR_COPY_AND_PASTE_URL }), _jsx(Link, { className: cn("break-all text-xs text-primary", classNames?.link), href: url, children: url }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), expirationMinutes || appName ? (_jsxs(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: [expirationMinutes
+                                            ? localization.THIS_LINK_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", expirationMinutes.toString())
+                                            : null, appName && (_jsxs(_Fragment, { children: [expirationMinutes ? " " : "", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] })) : null, _jsx(Text, { className: cn("m-0 text-xs text-muted-foreground", classNames?.description), children: localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL }), poweredBy && (_jsx(Text, { className: cn("m-0 mt-4 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
+};
+MagicLinkEmail.localization = magicLinkEmailLocalization;
+MagicLinkEmail.PreviewProps = {
+    url: "https://better-auth-ui.com/auth/verify?token=example-token",
+    email: "m@example.com",
+    appName: "Better Auth",
+    darkMode: true
+};
+export default MagicLinkEmail;

package/dist/components/email/new-device.d.ts

@@ -0,0 +1,123 @@
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
+/**
+ * Device information displayed in the new device email notification.
+ */
+export interface DeviceInfo {
+    /** Browser name and version */
+    browser?: string;
+    /** Operating system name and version */
+    os?: string;
+    /** Geographic location of the sign-in */
+    location?: string;
+    /** IP address of the device */
+    ipAddress?: string;
+    /** Timestamp of the sign-in event */
+    timestamp?: string;
+}
+declare const newDeviceEmailLocalization: {
+    NEW_SIGN_IN_DETECTED: string;
+    LOGO: string;
+    NEW_SIGN_IN_TO_YOUR_ACCOUNT: string;
+    DEVICE_DETAILS: string;
+    BROWSER: string;
+    OPERATING_SYSTEM: string;
+    LOCATION: string;
+    IP_ADDRESS: string;
+    TIME: string;
+    IF_THIS_WAS_YOU: string;
+    SECURE_MY_ACCOUNT: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_SIGN_IN: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+/**
+ * Localization strings for the NewDeviceEmail component.
+ *
+ * Contains all text content used in the new device detection email template.
+ */
+export type NewDeviceEmailLocalization = typeof newDeviceEmailLocalization;
+/**
+ * Props for the NewDeviceEmail component.
+ */
+export interface NewDeviceEmailProps {
+    /** Email address of the user account */
+    userEmail?: string;
+    /** Information about the device that signed in */
+    deviceInfo?: DeviceInfo;
+    /** URL to secure the account if unauthorized access is suspected */
+    secureAccountLink?: string;
+    /** Name of the application sending the email */
+    appName?: string;
+    /** Support email address for security concerns */
+    supportEmail?: string;
+    /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Custom CSS class names for styling specific parts of the email */
+    classNames?: EmailClassNames;
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to show the "Powered by better-auth" footer */
+    poweredBy?: boolean;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+    /** Additional React nodes to inject into the email head */
+    head?: ReactNode;
+    /**
+     * Localization overrides for customizing email text
+     * @remarks `NewDeviceEmailLocalization`
+     */
+    localization?: Partial<NewDeviceEmailLocalization>;
+}
+/**
+ * Email template component that notifies users when a new device signs into their account.
+ *
+ * This email includes:
+ * - Device information display (browser, OS, location, IP, timestamp)
+ * - Secure account action button
+ * - Security warnings and support contact information
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <NewDeviceEmail
+ *   userEmail="user@example.com"
+ *   deviceInfo={{
+ *     browser: "Chrome on macOS",
+ *     os: "macOS 14.0",
+ *     location: "San Francisco, CA",
+ *     ipAddress: "192.168.1.1",
+ *     timestamp: "February 10, 2025 at 4:20 PM UTC"
+ *   }}
+ *   secureAccountLink="https://example.com/secure-account"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const NewDeviceEmail: {
+    ({ userEmail, deviceInfo, secureAccountLink, appName, supportEmail, logoURL, colors, classNames, darkMode, poweredBy, head, ...props }: NewDeviceEmailProps): import("react/jsx-runtime").JSX.Element;
+    localization: {
+        NEW_SIGN_IN_DETECTED: string;
+        LOGO: string;
+        NEW_SIGN_IN_TO_YOUR_ACCOUNT: string;
+        DEVICE_DETAILS: string;
+        BROWSER: string;
+        OPERATING_SYSTEM: string;
+        LOCATION: string;
+        IP_ADDRESS: string;
+        TIME: string;
+        IF_THIS_WAS_YOU: string;
+        SECURE_MY_ACCOUNT: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_SIGN_IN: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    PreviewProps: NewDeviceEmailProps;
+};
+export default NewDeviceEmail;

package/dist/components/email/new-device.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const newDeviceEmailLocalization = {
+    NEW_SIGN_IN_DETECTED: "New sign-in detected",
+    LOGO: "Logo",
+    NEW_SIGN_IN_TO_YOUR_ACCOUNT: "We detected a new sign-in to your {appName} account {userEmail} from a device we don't recognize.",
+    DEVICE_DETAILS: "Device details",
+    BROWSER: "Browser",
+    OPERATING_SYSTEM: "Operating System",
+    LOCATION: "Location",
+    IP_ADDRESS: "IP Address",
+    TIME: "Time",
+    IF_THIS_WAS_YOU: "If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.",
+    SECURE_MY_ACCOUNT: "Secure my account",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_SIGN_IN: "If you didn't sign in, please contact support immediately {supportEmail} to secure your account.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+};
+/**
+ * Email template component that notifies users when a new device signs into their account.
+ *
+ * This email includes:
+ * - Device information display (browser, OS, location, IP, timestamp)
+ * - Secure account action button
+ * - Security warnings and support contact information
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <NewDeviceEmail
+ *   userEmail="user@example.com"
+ *   deviceInfo={{
+ *     browser: "Chrome on macOS",
+ *     os: "macOS 14.0",
+ *     location: "San Francisco, CA",
+ *     ipAddress: "192.168.1.1",
+ *     timestamp: "February 10, 2025 at 4:20 PM UTC"
+ *   }}
+ *   secureAccountLink="https://example.com/secure-account"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const NewDeviceEmail = ({ userEmail, deviceInfo, secureAccountLink, appName, supportEmail, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...NewDeviceEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.NEW_SIGN_IN_DETECTED;
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("m-0 mb-5 text-2xl font-semibold", classNames?.title), children: localization.NEW_SIGN_IN_DETECTED }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.NEW_SIGN_IN_TO_YOUR_ACCOUNT.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeUserEmail, afterUserEmail] = textWithAppName.split("{userEmail}");
+                                        return userEmail ? (_jsxs(_Fragment, { children: [beforeUserEmail, _jsx(Link, { href: `mailto:${userEmail}`, className: "text-primary font-medium", children: userEmail }), afterUserEmail] })) : (textWithAppName
+                                            .replace("{userEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), deviceInfo && (_jsxs(Section, { className: cn("my-6 border border-border bg-muted p-4", classNames?.codeBlock), children: [_jsxs(Text, { className: cn("m-0 mb-3 text-xs text-muted-foreground", classNames?.description), children: [localization.DEVICE_DETAILS, ":"] }), deviceInfo.browser && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.BROWSER, ":"] }), " ", deviceInfo.browser] })), deviceInfo.os && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.OPERATING_SYSTEM, ":"] }), " ", deviceInfo.os] })), deviceInfo.location && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.LOCATION, ":"] }), " ", deviceInfo.location] })), deviceInfo.ipAddress && (_jsxs(Text, { className: cn("m-0 mb-2 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.IP_ADDRESS, ":"] }), " ", deviceInfo.ipAddress] })), deviceInfo.timestamp && (_jsxs(Text, { className: cn("m-0 text-sm", classNames?.content), children: [_jsxs("span", { className: "font-semibold", children: [localization.TIME, ":"] }), " ", deviceInfo.timestamp] }))] })), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: localization.IF_THIS_WAS_YOU }), secureAccountLink && (_jsx(Section, { className: "mt-6", children: _jsx(Button, { href: secureAccountLink, className: cn("inline-block whitespace-nowrap rounded-none text-sm font-medium py-2.5 px-6 bg-primary text-primary-foreground no-underline", classNames?.button), children: localization.SECURE_MY_ACCOUNT }) })), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), appName && (_jsx(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: localization.EMAIL_SENT_BY.replace("{appName}", appName) })), _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: (() => {
+                                        const [beforeSupportEmail, afterSupportEmail] = localization.IF_YOU_DIDNT_SIGN_IN.split("{supportEmail}");
+                                        return supportEmail ? (_jsxs(_Fragment, { children: [beforeSupportEmail, _jsx(Link, { href: `mailto:${supportEmail}`, className: cn("text-primary underline", classNames?.link), children: supportEmail }), afterSupportEmail] })) : (localization.IF_YOU_DIDNT_SIGN_IN.replace("{supportEmail}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
+};
+NewDeviceEmail.localization = newDeviceEmailLocalization;
+NewDeviceEmail.PreviewProps = {
+    userEmail: "m@example.com",
+    deviceInfo: {
+        browser: "Chrome on macOS",
+        os: "macOS 26.2",
+        location: "San Francisco, CA, United States",
+        ipAddress: "127.0.0.1",
+        timestamp: "February 10, 2025 at 4:20 PM UTC"
+    },
+    secureAccountLink: "https://better-auth-ui.com/auth/secure-account",
+    appName: "Better Auth",
+    supportEmail: "support@example.com",
+    darkMode: true
+};
+export default NewDeviceEmail;

package/dist/components/email/otp-email.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+import { type EmailClassNames, type EmailColors } from "./email-styles";
+declare const otpEmailLocalization: {
+    YOUR_VERIFICATION_CODE_IS_CODE: string;
+    LOGO: string;
+    VERIFY_YOUR_EMAIL: string;
+    WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: string;
+    THIS_CODE_EXPIRES_IN_MINUTES: string;
+    EMAIL_SENT_BY: string;
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+    POWERED_BY_BETTER_AUTH: string;
+};
+/**
+ * Localization strings for the OtpEmail component.
+ *
+ * Contains all text content used in the OTP (One-Time Password) email template.
+ */
+export type OtpEmailEmailLocalization = typeof otpEmailLocalization;
+/**
+ * Props for the OtpEmail component.
+ */
+export interface OtpEmailProps {
+    /** The one-time verification code to display */
+    verificationCode: string;
+    /** Email address being verified */
+    email?: string;
+    /** Name of the application sending the email */
+    appName?: string;
+    /** Number of minutes until the verification code expires */
+    expirationMinutes?: number;
+    /** Logo URL(s) - a single string or light/dark variants. If omitted, no logo is shown. */
+    logoURL?: string | {
+        light: string;
+        dark: string;
+    };
+    /** Custom CSS class names for styling specific parts of the email */
+    classNames?: EmailClassNames;
+    /** Custom color scheme for light and dark modes */
+    colors?: EmailColors;
+    /** Whether to show the "Powered by better-auth" footer */
+    poweredBy?: boolean;
+    /** Whether to enable dark mode support */
+    darkMode?: boolean;
+    /** Additional React nodes to inject into the email head */
+    head?: ReactNode;
+    /**
+     * Localization overrides for customizing email text
+     * @remarks `OtpEmailEmailLocalization`
+     */
+    localization?: Partial<OtpEmailEmailLocalization>;
+}
+/**
+ * Email template component that sends one-time password (OTP) verification codes to users.
+ *
+ * This email includes:
+ * - Large, prominently displayed verification code
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <OtpEmail
+ *   verificationCode="069420"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={10}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export declare const OtpEmail: {
+    ({ verificationCode, email, appName, expirationMinutes, logoURL, colors, classNames, darkMode, poweredBy, head, ...props }: OtpEmailProps): import("react/jsx-runtime").JSX.Element;
+    localization: {
+        YOUR_VERIFICATION_CODE_IS_CODE: string;
+        LOGO: string;
+        VERIFY_YOUR_EMAIL: string;
+        WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: string;
+        THIS_CODE_EXPIRES_IN_MINUTES: string;
+        EMAIL_SENT_BY: string;
+        IF_YOU_DIDNT_REQUEST_THIS_EMAIL: string;
+        POWERED_BY_BETTER_AUTH: string;
+    };
+    PreviewProps: OtpEmailProps;
+};
+export default OtpEmail;

package/dist/components/email/otp-email.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Body, Container, Head, Heading, Hr, Html, Img, Link, Preview, pixelBasedPreset, Section, Tailwind, Text } from "@react-email/components";
+import { cn } from "../../lib/utils";
+import { EmailStyles } from "./email-styles";
+const otpEmailLocalization = {
+    YOUR_VERIFICATION_CODE_IS_CODE: "Your verification code is {verificationCode}",
+    LOGO: "Logo",
+    VERIFY_YOUR_EMAIL: "Verify your email",
+    WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS: "We need to verify your email address {email} before you can access your {appName} account. Enter the code below in your open browser window.",
+    THIS_CODE_EXPIRES_IN_MINUTES: "This code expires in {expirationMinutes} minutes.",
+    EMAIL_SENT_BY: "Email sent by {appName}.",
+    IF_YOU_DIDNT_REQUEST_THIS_EMAIL: "If you didn't request this email, you can safely ignore it. Someone else might have typed your email address by mistake.",
+    POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+};
+/**
+ * Email template component that sends one-time password (OTP) verification codes to users.
+ *
+ * This email includes:
+ * - Large, prominently displayed verification code
+ * - Expiration time information
+ * - Security notice for unauthorized requests
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <OtpEmail
+ *   verificationCode="069420"
+ *   email="user@example.com"
+ *   appName="My App"
+ *   expirationMinutes={10}
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const OtpEmail = ({ verificationCode, email, appName, expirationMinutes = 10, logoURL, colors, classNames, darkMode = true, poweredBy, head, ...props }) => {
+    const localization = {
+        ...OtpEmail.localization,
+        ...props.localization
+    };
+    const previewText = localization.YOUR_VERIFICATION_CODE_IS_CODE.replace("{verificationCode}", verificationCode);
+    return (_jsxs(Html, { children: [_jsxs(Head, { children: [_jsx("meta", { content: "light dark", name: "color-scheme" }), _jsx("meta", { content: "light dark", name: "supported-color-schemes" }), _jsx(EmailStyles, { colors: colors, darkMode: darkMode }), head] }), _jsx(Preview, { children: previewText }), _jsx(Tailwind, { config: { presets: [pixelBasedPreset] }, children: _jsx(Body, { className: cn("bg-background font-sans", classNames?.body), children: _jsx(Container, { className: cn("mx-auto my-auto max-w-xl px-2 py-10", classNames?.container), children: _jsxs(Section, { className: cn("bg-card text-card-foreground rounded-none border border-border p-8", classNames?.card), children: [logoURL &&
+                                    (typeof logoURL === "string" ? (_jsx(Img, { src: logoURL, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8", classNames?.logo) })) : (_jsxs(_Fragment, { children: [_jsx(Img, { src: logoURL.light, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("mx-auto mb-8 logo-light", classNames?.logo) }), _jsx(Img, { src: logoURL.dark, width: 48, height: 48, alt: appName || localization.LOGO, className: cn("hidden mx-auto mb-8 logo-dark", classNames?.logo) })] }))), _jsx(Heading, { className: cn("mb-5 text-2xl font-semibold", classNames?.title), children: localization.VERIFY_YOUR_EMAIL }), _jsx(Text, { className: cn("text-sm font-normal", classNames?.content), children: (() => {
+                                        const textWithAppName = localization.WE_NEED_TO_VERIFY_YOUR_EMAIL_ADDRESS.replace("{appName}", appName || "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", ".");
+                                        const [beforeEmail, afterEmail] = textWithAppName.split("{email}");
+                                        return email ? (_jsxs(_Fragment, { children: [beforeEmail, _jsx(Link, { href: `mailto:${email}`, className: "text-primary font-medium", children: email }), afterEmail] })) : (textWithAppName
+                                            .replace("{email}", "")
+                                            .replace(/\s{2,}/g, " ")
+                                            .replace(" .", "."));
+                                    })() }), _jsx(Section, { className: cn("my-6 border border-border bg-muted p-6", classNames?.codeBlock), children: _jsx(Text, { className: cn("m-0 text-center text-4xl font-semibold tracking-widest", classNames?.title), children: verificationCode }) }), _jsx(Hr, { className: cn("my-6 w-full border border-solid border-border", classNames?.separator) }), _jsxs(Text, { className: cn("mb-3 text-xs text-muted-foreground", classNames?.description), children: [localization.THIS_CODE_EXPIRES_IN_MINUTES.replace("{expirationMinutes}", expirationMinutes.toString()), appName && (_jsxs(_Fragment, { children: [" ", localization.EMAIL_SENT_BY.replace("{appName}", appName)] }))] }), _jsx(Text, { className: cn("mt-3 text-xs text-muted-foreground", classNames?.description), children: localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL }), poweredBy && (_jsx(Text, { className: cn("mt-4 mb-0 text-center text-[11px] text-muted-foreground", classNames?.poweredBy), children: (() => {
+                                        const [beforeBetterAuth, afterBetterAuth] = localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}");
+                                        return (_jsxs(_Fragment, { children: [beforeBetterAuth, _jsx(Link, { href: "https://better-auth.com", className: cn("text-primary underline", classNames?.link), children: "better-auth" }), afterBetterAuth] }));
+                                    })() }))] }) }) }) })] }));
+};
+OtpEmail.localization = otpEmailLocalization;
+OtpEmail.PreviewProps = {
+    verificationCode: "069420",
+    email: "m@example.com",
+    appName: "Better Auth",
+    darkMode: true
+};
+export default OtpEmail;