@better-auth-ui/react 1.6.0

package/dist/lib/auth-client.js

@@ -0,0 +1,5 @@
+import { magicLinkClient, multiSessionClient, usernameClient } from "better-auth/client/plugins";
+import { createAuthClient } from "better-auth/react";
+const authClient = createAuthClient({
+    plugins: [magicLinkClient(), multiSessionClient(), usernameClient()]
+});

package/dist/lib/auth-config.d.ts

@@ -0,0 +1,43 @@
+import type { AuthConfig as BaseAuthConfig } from "@better-auth-ui/react/core";
+import type { ComponentType, PropsWithChildren } from "react";
+import type { AnyAuthClient, AuthClient } from "./auth-client";
+/**
+ * Extends the base AuthConfig with React-specific requirements including
+ * an authClient instance and a Link component for navigation.
+ *
+ * Users can augment this interface to provide their own auth client type:
+ * @example
+ * ```ts
+ * declare module "@better-auth-ui/react" {
+ *   interface AuthConfig {
+ *     AuthClient: typeof authClient
+ *   }
+ * }
+ * ```
+ */
+export interface AuthConfig extends BaseAuthConfig {
+    authClient: AuthClient;
+    /**
+     * React component for rendering links
+     * @remarks `LinkComponent`
+     */
+    Link: ComponentType<PropsWithChildren<{
+        className?: string;
+        href: string;
+        to?: string;
+    }>>;
+}
+type DeepPartial<T> = T extends (...args: any[]) => any ? T : T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+/**
+ * Partial AuthConfig with any Better Auth client instance.
+ */
+export type AnyAuthConfig = DeepPartial<Omit<AuthConfig, "authClient">> & {
+    /**
+     * Better Auth client instance
+     * @remarks `AuthClient`
+     */
+    authClient?: AnyAuthClient;
+};
+export {};

package/dist/lib/auth-config.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/auth-context.d.ts

@@ -0,0 +1,2 @@
+import type { AuthConfig } from "./auth-config";
+export declare const AuthContext: import("react").Context<AuthConfig | undefined>;

package/dist/lib/auth-context.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const AuthContext = createContext(undefined);

package/dist/lib/auth-hook-options.d.ts

@@ -0,0 +1,8 @@
+import type { AuthError } from "@better-auth-ui/core";
+/**
+ * Common options for auth hooks.
+ */
+export interface AuthHookOptions {
+    onError?: (error: AuthError) => unknown | Promise<unknown>;
+    onSuccess?: () => unknown | Promise<unknown>;
+}

package/dist/lib/auth-hook-options.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/provider-icons.d.ts

@@ -0,0 +1,13 @@
+import type { SocialProvider } from "better-auth/social-providers";
+import type { ComponentPropsWithRef, ComponentType } from "react";
+/**
+ * Mapping of social authentication provider names to their corresponding icon components.
+ *
+ * Provides React SVG icon components for all supported social authentication providers.
+ * Each icon is a React component that accepts standard SVG props and can be customized
+ * with className, size, color, etc.
+ *
+ * Supported providers include: Apple, Google, GitHub, Microsoft, Discord, Facebook,
+ * Twitter/X, and many others.
+ */
+export declare const providerIcons: Record<SocialProvider, ComponentType<ComponentPropsWithRef<"svg">>>;

package/dist/lib/provider-icons.js

@@ -0,0 +1,48 @@
+import { Apple, Atlassian, Cognito, Discord, Dropbox, Facebook, Figma, GitHub, GitLab, Google, HuggingFace, Kakao, Kick, Line, Linear, LinkedIn, Microsoft, Naver, Notion, Paybin, PayPal, Polar, Railway, Reddit, Roblox, Salesforce, Slack, Spotify, TikTok, Twitch, Vercel, VK, WeChat, X, Zoom } from "../components/icons";
+/**
+ * Mapping of social authentication provider names to their corresponding icon components.
+ *
+ * Provides React SVG icon components for all supported social authentication providers.
+ * Each icon is a React component that accepts standard SVG props and can be customized
+ * with className, size, color, etc.
+ *
+ * Supported providers include: Apple, Google, GitHub, Microsoft, Discord, Facebook,
+ * Twitter/X, and many others.
+ */
+export const providerIcons = {
+    apple: Apple,
+    atlassian: Atlassian,
+    cognito: Cognito,
+    discord: Discord,
+    dropbox: Dropbox,
+    facebook: Facebook,
+    figma: Figma,
+    github: GitHub,
+    gitlab: GitLab,
+    google: Google,
+    huggingface: HuggingFace,
+    kakao: Kakao,
+    kick: Kick,
+    line: Line,
+    linear: Linear,
+    linkedin: LinkedIn,
+    microsoft: Microsoft,
+    naver: Naver,
+    notion: Notion,
+    paybin: Paybin,
+    paypal: PayPal,
+    polar: Polar,
+    railway: Railway,
+    reddit: Reddit,
+    roblox: Roblox,
+    salesforce: Salesforce,
+    slack: Slack,
+    spotify: Spotify,
+    tiktok: TikTok,
+    twitch: Twitch,
+    twitter: X,
+    vercel: Vercel,
+    vk: VK,
+    wechat: WeChat,
+    zoom: Zoom
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@better-auth-ui/react",
+  "version": "1.6.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "email": "email dev --dir src/components/email -p 9000",
+    "test": "vitest"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core.js",
+      "types": "./dist/core.d.ts"
+    }
+  },
+  "devDependencies": {
+    "@react-email/components": "^1.0.12",
+    "@react-email/preview-server": "^5.2.10",
+    "@tanstack/react-query": "^5.99.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.2.14",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.4",
+    "better-auth": "^1.6.4",
+    "clsx": "^2.1.1",
+    "playwright": "^1.59.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-email": "^5.2.10",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "vitest": "^4.1.4",
+    "zod": "^4.3.6"
+  },
+  "dependencies": {
+    "@better-auth-ui/core": "*"
+  },
+  "peerDependencies": {
+    "@react-email/components": ">=1.0.12",
+    "@tanstack/react-query": ">=5.99.0",
+    "better-auth": ">=1.6.4",
+    "clsx": ">=2.0.0",
+    "react": ">=19.2.5",
+    "react-dom": ">=19.2.5",
+    "tailwind-merge": ">=3.5.0",
+    "tailwindcss": ">=4.2.2",
+    "zod": ">=4.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/auth/auth-provider.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { deepmerge, defaultAuthConfig } from "@better-auth-ui/core"
+import {
+  type AnyAuthClient,
+  type AnyAuthConfig,
+  type AuthConfig,
+  AuthContext
+} from "@better-auth-ui/react"
+import {
+  QueryClient,
+  QueryClientContext,
+  QueryClientProvider
+} from "@tanstack/react-query"
+import { type PropsWithChildren, useContext } from "react"
+
+const fallbackQueryClient = new QueryClient()
+
+const baseAuthConfig: AnyAuthConfig = {
+  ...defaultAuthConfig,
+  Link: (props) => <a {...props} />
+}
+
+export type AuthProviderProps = PropsWithChildren<AnyAuthConfig> & {
+  authClient: AnyAuthClient
+  navigate: (options: { to: string; replace?: boolean }) => void
+  /**
+   * TanStack QueryClient to use for your application's queries
+   */
+  queryClient?: QueryClient
+}
+
+/**
+ * Provides merged authentication configuration and a resolved React Query client to descendant components.
+ *
+ * The component merges the provided auth config with the library defaults, updates `redirectTo` from the
+ * current URL when the app is hydrated, wires a QueryClient (prop, context, or fallback) and installs an
+ * error handler that surfaces query errors via the configured toast. It then supplies the merged config
+ * via AuthContext and wraps children with QueryClientProvider.
+ *
+ * @returns The children wrapped with AuthContext.Provider and QueryClientProvider configured for auth.
+ */
+export function AuthProvider({
+  children,
+  queryClient,
+  ...config
+}: AuthProviderProps) {
+  const contextQueryClient = useContext(QueryClientContext)
+  const resolvedQueryClient =
+    queryClient || contextQueryClient || fallbackQueryClient
+
+  const mergedConfig = deepmerge(baseAuthConfig, config) as AuthConfig
+
+  mergedConfig.redirectTo =
+    (typeof window !== "undefined" &&
+      new URLSearchParams(window.location.search).get("redirectTo")?.trim()) ||
+    mergedConfig.redirectTo
+
+  return (
+    <AuthContext.Provider value={mergedConfig}>
+      <QueryClientProvider client={resolvedQueryClient}>
+        {children}
+      </QueryClientProvider>
+    </AuthContext.Provider>
+  )
+}
+
+/**
+ * Accesses the current authentication configuration from AuthContext.
+ *
+ * @returns The merged authentication configuration provided by AuthProvider.
+ * @throws If no AuthProvider is present in the component tree.
+ */
+export function useAuth() {
+  const context = useContext(AuthContext)
+
+  if (!context) {
+    throw new Error("[Better Auth UI] AuthProvider is required")
+  }
+
+  return context
+}

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

@@ -0,0 +1,381 @@
+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 emailChangedEmailLocalization = {
+  YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED: "Your email address has been changed",
+  LOGO: "Logo",
+  EMAIL_ADDRESS_CHANGED: "Email address changed",
+  EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED:
+    "The email address for your {appName} account has been changed.",
+  PREVIOUS_EMAIL: "Previous email:",
+  NEW_EMAIL: "New email:",
+  IF_YOU_MADE_THIS_CHANGE:
+    "If you made this change, you can safely ignore this email.",
+  I_DIDNT_MAKE_THIS_CHANGE: "I didn't make this change",
+  EMAIL_SENT_BY: "Email sent by {appName}.",
+  IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE:
+    "If you didn't authorize this change, please contact support immediately {supportEmail} to secure your account.",
+  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+}
+
+/**
+ * Localization strings for the EmailChangedEmail component.
+ *
+ * Contains all text content used in the email changed notification email template.
+ */
+export type EmailChangedEmailLocalization = typeof emailChangedEmailLocalization
+
+/**
+ * Props for the EmailChangedEmail component.
+ */
+export interface EmailChangedEmailProps {
+  /** The previous email address that was changed */
+  oldEmail?: string
+  /** The new email address */
+  newEmail?: string
+  /** URL to revert the email change if unauthorized */
+  revertURL?: 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 `EmailChangedEmailLocalization`
+   */
+  localization?: Partial<EmailChangedEmailLocalization>
+}
+
+/**
+ * Email template component that notifies users when their email address has been changed.
+ *
+ * This email includes:
+ * - Display of both old and new email addresses
+ * - Revert action button if unauthorized change occurred
+ * - Security information and support contact details
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <EmailChangedEmail
+ *   oldEmail="old@example.com"
+ *   newEmail="new@example.com"
+ *   revertURL="https://example.com/revert?token=abc123"
+ *   appName="My App"
+ *   supportEmail="support@example.com"
+ *   logoURL="https://example.com/logo.png"
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const EmailChangedEmail = ({
+  oldEmail,
+  newEmail,
+  revertURL,
+  appName,
+  supportEmail,
+  logoURL,
+  colors,
+  classNames,
+  darkMode = true,
+  poweredBy,
+  head,
+  ...props
+}: EmailChangedEmailProps) => {
+  const localization = {
+    ...EmailChangedEmail.localization,
+    ...props.localization
+  }
+
+  const previewText = localization.YOUR_EMAIL_ADDRESS_HAS_BEEN_CHANGED
+
+  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.EMAIL_ADDRESS_CHANGED}
+              </Heading>
+
+              <Text className={cn("text-sm font-normal", classNames?.content)}>
+                {localization.EMAIL_ADDRESS_FOR_YOUR_ACCOUNT_CHANGED.replace(
+                  "{appName}",
+                  appName || ""
+                )
+                  .replace(/\s{2,}/g, " ")
+                  .replace(" .", ".")}
+              </Text>
+
+              {(oldEmail || newEmail) && (
+                <Section
+                  className={cn(
+                    "my-6 border border-border bg-muted p-4",
+                    classNames?.codeBlock
+                  )}
+                >
+                  {oldEmail && (
+                    <>
+                      <Text
+                        className={cn(
+                          "m-0 mb-2 text-xs text-muted-foreground",
+                          classNames?.description
+                        )}
+                      >
+                        {localization.PREVIOUS_EMAIL}
+                      </Text>
+
+                      <Text
+                        className={cn(
+                          "m-0 mb-4 text-sm font-semibold",
+                          classNames?.content
+                        )}
+                      >
+                        {oldEmail}
+                      </Text>
+                    </>
+                  )}
+
+                  {newEmail && (
+                    <>
+                      <Text
+                        className={cn(
+                          "m-0 mb-2 text-xs text-muted-foreground",
+                          classNames?.description
+                        )}
+                      >
+                        {localization.NEW_EMAIL}
+                      </Text>
+
+                      <Text
+                        className={cn(
+                          "m-0 text-sm font-semibold text-primary",
+                          classNames?.content
+                        )}
+                      >
+                        {newEmail}
+                      </Text>
+                    </>
+                  )}
+                </Section>
+              )}
+
+              <Text className={cn("text-sm font-normal", classNames?.content)}>
+                {localization.IF_YOU_MADE_THIS_CHANGE}
+              </Text>
+
+              {revertURL && (
+                <Section className="my-6">
+                  <Button
+                    href={revertURL}
+                    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.I_DIDNT_MAKE_THIS_CHANGE}
+                  </Button>
+                </Section>
+              )}
+
+              <Hr
+                className={cn(
+                  "my-6 w-full border border-solid border-border",
+                  classNames?.separator
+                )}
+              />
+
+              {appName && (
+                <Text
+                  className={cn(
+                    "mb-3 text-xs text-muted-foreground",
+                    classNames?.description
+                  )}
+                >
+                  {localization.EMAIL_SENT_BY.replace("{appName}", appName)}
+                </Text>
+              )}
+
+              <Text
+                className={cn(
+                  "mt-3 text-xs text-muted-foreground",
+                  classNames?.description
+                )}
+              >
+                {(() => {
+                  const [beforeSupportEmail, afterSupportEmail] =
+                    localization.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.split(
+                      "{supportEmail}"
+                    )
+
+                  return supportEmail ? (
+                    <>
+                      {beforeSupportEmail}
+                      <Link
+                        href={`mailto:${supportEmail}`}
+                        className={cn(
+                          "text-primary underline",
+                          classNames?.link
+                        )}
+                      >
+                        {supportEmail}
+                      </Link>
+                      {afterSupportEmail}
+                    </>
+                  ) : (
+                    localization.IF_YOU_DIDNT_AUTHORIZE_THIS_CHANGE.replace(
+                      "{supportEmail}",
+                      ""
+                    )
+                      .replace(/\s{2,}/g, " ")
+                      .replace(" .", ".")
+                  )
+                })()}
+              </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>
+  )
+}
+
+EmailChangedEmail.localization = emailChangedEmailLocalization
+
+EmailChangedEmail.PreviewProps = {
+  oldEmail: "old@example.com",
+  newEmail: "new@example.com",
+  supportEmail: "support@example.com",
+  revertURL: "https://better-auth-ui.com/auth/revert-email?token=example-token",
+  appName: "Better Auth",
+  poweredBy: true,
+  darkMode: true
+} as EmailChangedEmailProps
+
+export default EmailChangedEmail