@better-auth-ui/react 1.6.0

package/src/components/email/email-localization.tsx

@@ -0,0 +1,33 @@
+import EmailChangedEmail from "./email-changed"
+import EmailVerificationEmail from "./email-verification"
+import MagicLinkEmail from "./magic-link"
+import NewDeviceEmail from "./new-device"
+import OtpEmail from "./otp-email"
+import PasswordChangedEmail from "./password-changed"
+import ResetPasswordEmail from "./reset-password"
+
+/**
+ * Aggregated localization strings for all email components.
+ *
+ * Combines localization strings from all email templates (EmailChangedEmail,
+ * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail, OtpEmail,
+ * PasswordChangedEmail, ResetPasswordEmail) into a single object for convenient
+ * bulk customization.
+ */
+export const emailLocalization = {
+  ...EmailChangedEmail.localization,
+  ...EmailVerificationEmail.localization,
+  ...MagicLinkEmail.localization,
+  ...NewDeviceEmail.localization,
+  ...OtpEmail.localization,
+  ...PasswordChangedEmail.localization,
+  ...ResetPasswordEmail.localization
+}
+
+/**
+ * Type representing all available email localization strings.
+ *
+ * Derived from the emailLocalization constant, this type can be used for
+ * type-safe localization overrides across all email templates.
+ */
+export type EmailLocalization = typeof emailLocalization

package/src/components/email/email-styles.tsx

@@ -0,0 +1,175 @@
+/**
+ * Default color scheme for email templates in light and dark modes.
+ *
+ * Provides a consistent color palette that can be customized via the EmailColors type.
+ */
+export const defaultColors = {
+  light: {
+    background: "#F5F5F5",
+    border: "#E5E5E5",
+    card: "#FFFFFF",
+    cardForeground: "#0A0A0A",
+    foreground: "#262626",
+    muted: "#F5F5F5",
+    mutedForeground: "#737373",
+    primary: "#171717",
+    primaryForeground: "#FAFAFA"
+  },
+  dark: {
+    background: "#0A0A0A",
+    border: "#2E2E2E",
+    card: "#171717",
+    cardForeground: "#FAFAFA",
+    foreground: "#D4D4D4",
+    muted: "#212121",
+    mutedForeground: "#A1A1A1",
+    primary: "#E5E5E5",
+    primaryForeground: "#171717"
+  }
+}
+
+/**
+ * Custom CSS class names for styling different parts of email templates.
+ *
+ * Allows fine-grained control over the appearance of email components.
+ */
+export type EmailClassNames = {
+  body?: string
+  container?: string
+  card?: string
+  logo?: string
+  title?: string
+  content?: string
+  button?: string
+  description?: string
+  separator?: string
+  link?: string
+  poweredBy?: string
+  codeBlock?: string
+}
+
+/**
+ * Custom color scheme configuration for email templates.
+ *
+ * Supports separate color definitions for light and dark modes.
+ * Any color not specified will fall back to the defaultColors values.
+ */
+export type EmailColors = {
+  light?: Partial<typeof defaultColors.light>
+  dark?: Partial<typeof defaultColors.dark>
+}
+
+/**
+ * Props for the EmailStyles component.
+ */
+interface EmailStylesProps {
+  /** Custom color scheme for light and dark modes */
+  colors?: EmailColors
+  /** Whether to enable dark mode support */
+  darkMode?: boolean
+}
+
+/**
+ * Component that injects CSS styles for email templates with support for light and dark modes.
+ *
+ * Generates inline styles that adapt to the user's color scheme preference and applies
+ * custom colors if provided. Handles logo visibility switching between light and dark modes.
+ *
+ * @param props - Style configuration options
+ * @returns A style element containing CSS for email template theming
+ *
+ * @example
+ * ```tsx
+ * <EmailStyles
+ *   colors={{
+ *     light: { primary: "#000000" },
+ *     dark: { primary: "#FFFFFF" }
+ *   }}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailStyles = ({ colors, darkMode = true }: EmailStylesProps) => {
+  return (
+    <style type="text/css">{`
+      .bg-background {
+        background-color: ${colors?.light?.background || defaultColors.light.background} !important;
+      }
+      .bg-card {
+        background-color: ${colors?.light?.card || defaultColors.light.card} !important;
+      }
+      .bg-primary {
+        background-color: ${colors?.light?.primary || defaultColors.light.primary} !important;
+      }
+      .bg-muted {
+        background-color: ${colors?.light?.muted || defaultColors.light.muted} !important;
+      }
+      .border-border {
+        border-color: ${colors?.light?.border || defaultColors.light.border} !important;
+      }
+      .text-card-foreground {
+        color: ${colors?.light?.cardForeground || defaultColors.light.cardForeground} !important;
+      }
+      .text-muted-foreground {
+        color: ${colors?.light?.mutedForeground || defaultColors.light.mutedForeground} !important;
+      }
+      .text-primary {
+        color: ${colors?.light?.primary || defaultColors.light.primary} !important;
+      }
+      .text-primary-foreground {
+        color: ${colors?.light?.primaryForeground || defaultColors.light.primaryForeground} !important;
+      }
+      .logo-dark {
+        display: none !important;
+      }
+      .logo-light {
+        display: block !important;
+      }
+
+      ${
+        darkMode
+          ? `@media (prefers-color-scheme: dark) {
+        .bg-background {
+          background-color: ${colors?.dark?.background || defaultColors.dark.background} !important;
+        }
+        .bg-card {
+          background-color: ${colors?.dark?.card || defaultColors.dark.card} !important;
+        }
+        .bg-primary {
+          background-color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
+        }
+        .bg-muted {
+          background-color: ${colors?.dark?.muted || defaultColors.dark.muted} !important;
+        }
+        .border-border {
+          border-color: ${colors?.dark?.border || defaultColors.dark.border} !important;
+        }
+        .text-card-foreground {
+          color: ${colors?.dark?.cardForeground || defaultColors.dark.cardForeground} !important;
+        }
+        .text-muted-foreground {
+          color: ${colors?.dark?.mutedForeground || defaultColors.dark.mutedForeground} !important;
+        }
+        .text-primary {
+          color: ${colors?.dark?.primary || defaultColors.dark.primary} !important;
+        }
+        .text-primary-foreground {
+          color: ${colors?.dark?.primaryForeground || defaultColors.dark.primaryForeground} !important;
+        }
+        .logo-dark {
+          display: block !important;
+        }
+        .logo-light {
+          display: none !important;
+        }
+        * {
+          box-shadow: none !important;
+        }
+      }`
+          : ""
+      }
+    `}</style>
+  )
+}
+
+export default EmailStyles

package/src/components/email/email-verification.tsx

@@ -0,0 +1,350 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  pixelBasedPreset,
+  Section,
+  Tailwind,
+  Text
+} from "@react-email/components"
+import type { ReactNode } from "react"
+
+import { cn } from "../../lib/utils"
+import {
+  type EmailClassNames,
+  type EmailColors,
+  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}"
+}
+
+/**
+ * Localization strings for the EmailVerificationEmail component.
+ *
+ * Contains all text content used in the email verification email template.
+ */
+export type EmailVerificationEmailLocalization =
+  typeof emailVerificationEmailLocalization
+
+/**
+ * Props for the EmailVerificationEmail component.
+ */
+export interface EmailVerificationEmailProps {
+  /** Verification URL that users must click to verify their email */
+  url: string
+  /** Email address being verified */
+  email?: string
+  /** Name of the application sending the email */
+  appName?: string
+  /** Number of minutes until the verification 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 `EmailVerificationEmailLocalization`
+   */
+  localization?: Partial<EmailVerificationEmailLocalization>
+}
+
+/**
+ * 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
+}: EmailVerificationEmailProps) => {
+  const localization = {
+    ...EmailVerificationEmail.localization,
+    ...props.localization
+  }
+
+  const previewText = localization.VERIFY_YOUR_EMAIL_ADDRESS
+
+  return (
+    <Html>
+      <Head>
+        <meta content="light dark" name="color-scheme" />
+        <meta content="light dark" name="supported-color-schemes" />
+
+        <EmailStyles colors={colors} darkMode={darkMode} />
+
+        {head}
+      </Head>
+
+      <Preview>{previewText}</Preview>
+
+      <Tailwind config={{ presets: [pixelBasedPreset] }}>
+        <Body className={cn("bg-background font-sans", classNames?.body)}>
+          <Container
+            className={cn(
+              "mx-auto my-auto max-w-xl px-2 py-10",
+              classNames?.container
+            )}
+          >
+            <Section
+              className={cn(
+                "bg-card text-card-foreground rounded-none border border-border p-8",
+                classNames?.card
+              )}
+            >
+              {logoURL &&
+                (typeof logoURL === "string" ? (
+                  <Img
+                    src={logoURL}
+                    width={48}
+                    height={48}
+                    alt={appName || localization.LOGO}
+                    className={cn("mx-auto mb-8", classNames?.logo)}
+                  />
+                ) : (
+                  <>
+                    <Img
+                      src={logoURL.light}
+                      width={48}
+                      height={48}
+                      alt={appName || localization.LOGO}
+                      className={cn(
+                        "mx-auto mb-8 logo-light",
+                        classNames?.logo
+                      )}
+                    />
+                    <Img
+                      src={logoURL.dark}
+                      width={48}
+                      height={48}
+                      alt={appName || localization.LOGO}
+                      className={cn(
+                        "hidden mx-auto mb-8 logo-dark",
+                        classNames?.logo
+                      )}
+                    />
+                  </>
+                ))}
+
+              <Heading
+                className={cn(
+                  "m-0 mb-5 text-2xl font-semibold",
+                  classNames?.title
+                )}
+              >
+                {localization.VERIFY_EMAIL_ADDRESS}
+              </Heading>
+
+              <Text className={cn("text-sm font-normal", classNames?.content)}>
+                {(() => {
+                  const textWithAppName =
+                    localization.CLICK_BUTTON_TO_VERIFY_EMAIL.replace(
+                      "{appName}",
+                      appName || ""
+                    )
+                      .replace(/\s{2,}/g, " ")
+                      .replace(" .", ".")
+
+                  const [beforeEmailAddress, afterEmailAddress] =
+                    textWithAppName.split("{emailAddress}")
+
+                  return email ? (
+                    <>
+                      {beforeEmailAddress}
+
+                      <Link
+                        href={`mailto:${email}`}
+                        className="text-primary font-medium"
+                      >
+                        {email}
+                      </Link>
+
+                      {afterEmailAddress}
+                    </>
+                  ) : (
+                    textWithAppName
+                      .replace("{emailAddress}", "")
+                      .replace(/\s{2,}/g, " ")
+                      .replace(" .", ".")
+                  )
+                })()}
+              </Text>
+
+              <Section className="my-6">
+                <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
+                  )}
+                >
+                  {localization.VERIFY_EMAIL_ADDRESS}
+                </Button>
+              </Section>
+
+              <Text
+                className={cn(
+                  "mb-3 text-xs text-muted-foreground",
+                  classNames?.description
+                )}
+              >
+                {localization.OR_COPY_AND_PASTE_URL}
+              </Text>
+
+              <Link
+                className={cn(
+                  "break-all text-xs text-primary",
+                  classNames?.link
+                )}
+                href={url}
+              >
+                {url}
+              </Link>
+
+              <Hr
+                className={cn(
+                  "my-6 w-full border border-solid border-border",
+                  classNames?.separator
+                )}
+              />
+
+              {expirationMinutes || appName ? (
+                <Text
+                  className={cn(
+                    "mb-3 text-xs text-muted-foreground",
+                    classNames?.description
+                  )}
+                >
+                  {expirationMinutes
+                    ? localization.THIS_LINK_EXPIRES_IN_MINUTES.replace(
+                        "{expirationMinutes}",
+                        expirationMinutes.toString()
+                      )
+                    : null}
+
+                  {appName && (
+                    <>
+                      {expirationMinutes ? " " : ""}
+                      {localization.EMAIL_SENT_BY.replace("{appName}", appName)}
+                    </>
+                  )}
+                </Text>
+              ) : null}
+
+              <Text
+                className={cn(
+                  "mt-3 text-xs text-muted-foreground",
+                  classNames?.description
+                )}
+              >
+                {localization.IF_YOU_DIDNT_REQUEST_THIS_EMAIL}
+              </Text>
+
+              {poweredBy && (
+                <Text
+                  className={cn(
+                    "mt-4 mb-0 text-center text-[11px] text-muted-foreground",
+                    classNames?.poweredBy
+                  )}
+                >
+                  {(() => {
+                    const [beforeBetterAuth, afterBetterAuth] =
+                      localization.POWERED_BY_BETTER_AUTH.split("{betterAuth}")
+
+                    return (
+                      <>
+                        {beforeBetterAuth}
+                        <Link
+                          href="https://better-auth.com"
+                          className={cn(
+                            "text-primary underline",
+                            classNames?.link
+                          )}
+                        >
+                          better-auth
+                        </Link>
+                        {afterBetterAuth}
+                      </>
+                    )
+                  })()}
+                </Text>
+              )}
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}
+
+/**
+ * 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
+} as EmailVerificationEmailProps
+
+export default EmailVerificationEmail

package/src/components/email/index.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"