@better-auth-ui/react 1.6.8 → 1.6.9

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@better-auth-ui/react",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "type": "module",
   "scripts": {
-    "build": "vite build",
-    "dev": "tsc --watch",
+    "build": "tsc",
     "email": "email dev --dir src/components/auth/email -p 9000",
     "test": "vitest"
   },
@@ -16,51 +15,55 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
     "./email": {
+      "development": "./src/email.ts",
       "types": "./dist/email.d.ts",
       "import": "./dist/email.js"
     },
     "./server": {
+      "development": "./src/server.ts",
       "types": "./dist/server.d.ts",
       "import": "./dist/server.js"
     },
     "./plugins": {
+      "development": "./src/plugins.ts",
       "types": "./dist/plugins.d.ts",
       "import": "./dist/plugins.js"
     }
   },
   "devDependencies": {
-    "@better-auth/api-key": "^1.6.9",
-    "@better-auth/passkey": "^1.6.10",
+    "@better-auth/api-key": "^1.6.11",
+    "@better-auth/passkey": "^1.6.11",
     "@react-email/components": "^1.0.12",
     "@react-email/preview-server": "^5.2.10",
-    "@tanstack/react-query": "^5.100.9",
+    "@tanstack/react-query": "^5.100.14",
     "@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.5",
-    "better-auth": "^1.6.10",
+    "@types/react": "^19.2.15",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.7",
+    "better-auth": "^1.6.11",
     "clsx": "^2.1.1",
-    "playwright": "^1.59.1",
+    "playwright": "^1.60.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-email": "^6.1.1",
+    "react-email": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.3.0",
-    "vitest": "^4.1.5",
+    "vitest": "^4.1.7",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
     "@better-auth-ui/core": "*",
-    "@better-auth/api-key": ">=1.6.9",
-    "@better-auth/passkey": ">=1.6.10",
+    "@better-auth/api-key": ">=1.6.11",
+    "@better-auth/passkey": ">=1.6.11",
     "@react-email/components": ">=1.0.12",
-    "@tanstack/react-query": ">=5.100.9",
-    "better-auth": ">=1.6.10",
+    "@tanstack/react-query": ">=5.100.14",
+    "better-auth": ">=1.6.11",
     "clsx": ">=2.0.0",
     "react": ">=19.2.6",
     "react-dom": ">=19.2.6",

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

@@ -0,0 +1,7 @@
+"use client"
+
+import type { AuthConfig } from "@better-auth-ui/core"
+import { createContext } from "react"
+
+/** Split from `auth-provider` so HMR reloading that file does not replace this context instance. */
+export const AuthContext = createContext<AuthConfig | undefined>(undefined)

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

@@ -12,17 +12,12 @@ import {
   QueryClientContext,
   QueryClientProvider
 } from "@tanstack/react-query"
-import {
-  createContext,
-  type PropsWithChildren,
-  type ReactNode,
-  useContext
-} from "react"
+import { type PropsWithChildren, type ReactNode, useContext } from "react"
 import type { AuthClient } from "../../lib/auth-client"
+import { MutationInvalidator } from "../mutation-invalidator"
+import { AuthContext } from "./auth-context"
 import { FetchOptionsProvider } from "./fetch-options-provider"
 
-const AuthContext = createContext<AuthConfig | undefined>(undefined)
-
 const fallbackQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -70,19 +65,14 @@ export function AuthProvider({
   queryClient,
   ...config
 }: AuthProviderProps) {
-  const mergedConfig = deepmerge(defaultAuthConfig, {
-    ...config,
-    viewPaths: {
-      auth: {
-        ...defaultAuthConfig.viewPaths.auth,
-        ...config.viewPaths?.auth
-      },
-      settings: {
-        ...defaultAuthConfig.viewPaths.settings,
-        ...config.viewPaths?.settings
-      }
-    }
-  } as AuthConfig)
+  const { authClient, ...partialConfig } = config
+  const mergedConfig = {
+    ...deepmerge<Omit<AuthConfig, "authClient">>(
+      defaultAuthConfig,
+      partialConfig
+    ),
+    authClient
+  }
 
   mergedConfig.redirectTo =
     (typeof window !== "undefined" &&
@@ -105,18 +95,16 @@ export function AuthProvider({
 
   const contextQueryClient = useContext(QueryClientContext)
 
-  if (contextQueryClient) {
-    return (
-      <AuthContext.Provider value={mergedConfig}>
-        <FetchOptionsProvider>{children}</FetchOptionsProvider>
-      </AuthContext.Provider>
-    )
-  }
-
   return (
-    <QueryClientProvider client={queryClient || fallbackQueryClient}>
+    <QueryClientProvider
+      client={queryClient || contextQueryClient || fallbackQueryClient}
+    >
       <AuthContext.Provider value={mergedConfig}>
-        <FetchOptionsProvider>{children}</FetchOptionsProvider>
+        <FetchOptionsProvider>
+          <MutationInvalidator />
+
+          {children}
+        </FetchOptionsProvider>
       </AuthContext.Provider>
     </QueryClientProvider>
   )

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

@@ -2,6 +2,7 @@ import EmailChangedEmail from "./email-changed"
 import EmailVerificationEmail from "./email-verification"
 import MagicLinkEmail from "./magic-link"
 import NewDeviceEmail from "./new-device"
+import OrganizationInvitationEmail from "./organization-invitation"
 import OtpEmail from "./otp-email"
 import PasswordChangedEmail from "./password-changed"
 import ResetPasswordEmail from "./reset-password"
@@ -10,15 +11,16 @@ 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.
+ * EmailVerificationEmail, MagicLinkEmail, NewDeviceEmail,
+ * OrganizationInvitationEmail, OtpEmail, PasswordChangedEmail,
+ * ResetPasswordEmail) into a single object for convenient bulk customization.
  */
 export const emailLocalization = {
   ...EmailChangedEmail.localization,
   ...EmailVerificationEmail.localization,
   ...MagicLinkEmail.localization,
   ...NewDeviceEmail.localization,
+  ...OrganizationInvitationEmail.localization,
   ...OtpEmail.localization,
   ...PasswordChangedEmail.localization,
   ...ResetPasswordEmail.localization

package/src/components/auth/email/index.ts

@@ -4,6 +4,7 @@ export * from "./email-styles"
 export * from "./email-verification"
 export * from "./magic-link"
 export * from "./new-device"
+export * from "./organization-invitation"
 export * from "./otp-email"
 export * from "./password-changed"
 export * from "./reset-password"

package/src/components/auth/email/organization-invitation.tsx

@@ -0,0 +1,454 @@
+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 organizationInvitationEmailLocalization = {
+  YOU_RE_INVITED_TO_ORGANIZATION: "You're invited to {organizationName}",
+  YOU_RE_INVITED: "You're invited",
+  LOGO: "Logo",
+  ORGANIZATION_LOGO: "Organization logo",
+  INVITED_TO_JOIN_ORGANIZATION:
+    "{inviterName} ({inviterEmail}) has invited you to join {organizationName} on {appName} as a {role}.",
+  ACCEPT_INVITATION: "Accept invitation",
+  VIEW_INVITATION: "View invitation",
+  OR_COPY_AND_PASTE_URL: "Or copy and paste this URL into your browser:",
+  THIS_INVITATION_EXPIRES_IN_HOURS:
+    "This invitation expires in {expirationHours} hours.",
+  EMAIL_SENT_BY: "Email sent by {appName}.",
+  IF_YOU_DIDNT_EXPECT_THIS_INVITATION:
+    "If you didn't expect this invitation, you can safely ignore this email.",
+  POWERED_BY_BETTER_AUTH: "Powered by {betterAuth}"
+}
+
+/**
+ * Localization strings for the OrganizationInvitationEmail component.
+ *
+ * Contains all text content used in the organization invitation email template.
+ */
+export type OrganizationInvitationEmailLocalization =
+  typeof organizationInvitationEmailLocalization
+
+/**
+ * Props for the OrganizationInvitationEmail component.
+ */
+export interface OrganizationInvitationEmailProps {
+  /**
+   * URL where the invitee can review and accept the invitation.
+   *
+   * @remarks Pass `{baseUrl}/settings/organizations` — this is where pending
+   * organization invitations are listed in the settings UI.
+   */
+  url: string
+  /** Email address of the user being invited */
+  email?: string
+  /** Name of the person who sent the invitation */
+  inviterName?: string
+  /** Email address of the person who sent the invitation */
+  inviterEmail?: string
+  /** Name of the organization the user is being invited to */
+  organizationName?: string
+  /** Organization logo URL(s) - a single string or light/dark variants. */
+  organizationLogoURL?: string | { light: string; dark: string }
+  /** Role being offered to the invitee (e.g. "member", "admin", "owner") */
+  role?: string
+  /** Name of the application sending the email */
+  appName?: string
+  /** Number of hours until the invitation expires */
+  expirationHours?: 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 `OrganizationInvitationEmailLocalization`
+   */
+  localization?: Partial<OrganizationInvitationEmailLocalization>
+}
+
+/**
+ * Email template component that invites a user to join an organization.
+ *
+ * This email includes:
+ * - Inviter and organization details
+ * - Role being offered
+ * - Accept invitation button linking to `{baseUrl}/settings/organizations`
+ * - Fallback URL for manual copy/paste
+ * - Optional expiration time information
+ * - Security notice for unexpected invitations
+ * - Customizable branding and styling
+ * - Support for light/dark mode themes
+ *
+ * @example
+ * ```tsx
+ * <OrganizationInvitationEmail
+ *   url="https://example.com/settings/organizations"
+ *   email="invitee@example.com"
+ *   inviterName="Jane Doe"
+ *   inviterEmail="jane@example.com"
+ *   organizationName="Acme Inc."
+ *   organizationLogoURL="https://example.com/acme-logo.png"
+ *   role="member"
+ *   appName="My App"
+ *   expirationHours={48}
+ *   darkMode={true}
+ * />
+ * ```
+ */
+export const OrganizationInvitationEmail = ({
+  url,
+  email,
+  inviterName,
+  inviterEmail,
+  organizationName,
+  organizationLogoURL,
+  role,
+  appName,
+  expirationHours = 48,
+  logoURL,
+  colors,
+  classNames,
+  darkMode = true,
+  poweredBy,
+  head,
+  ...props
+}: OrganizationInvitationEmailProps) => {
+  const localization = {
+    ...OrganizationInvitationEmail.localization,
+    ...props.localization
+  }
+
+  const previewText = organizationName
+    ? localization.YOU_RE_INVITED_TO_ORGANIZATION.replace(
+        "{organizationName}",
+        organizationName
+      )
+    : localization.YOU_RE_INVITED
+
+  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
+                )}
+              >
+                {organizationName
+                  ? localization.YOU_RE_INVITED_TO_ORGANIZATION.replace(
+                      "{organizationName}",
+                      organizationName
+                    )
+                  : localization.YOU_RE_INVITED}
+              </Heading>
+
+              {organizationLogoURL &&
+                (typeof organizationLogoURL === "string" ? (
+                  <Img
+                    src={organizationLogoURL}
+                    width={56}
+                    height={56}
+                    alt={organizationName || localization.ORGANIZATION_LOGO}
+                    className={cn("mb-5 rounded-md", classNames?.logo)}
+                  />
+                ) : (
+                  <>
+                    <Img
+                      src={organizationLogoURL.light}
+                      width={56}
+                      height={56}
+                      alt={organizationName || localization.ORGANIZATION_LOGO}
+                      className={cn(
+                        "mb-5 rounded-md logo-light",
+                        classNames?.logo
+                      )}
+                    />
+                    <Img
+                      src={organizationLogoURL.dark}
+                      width={56}
+                      height={56}
+                      alt={organizationName || localization.ORGANIZATION_LOGO}
+                      className={cn(
+                        "hidden mb-5 rounded-md logo-dark",
+                        classNames?.logo
+                      )}
+                    />
+                  </>
+                ))}
+
+              <Text
+                className={cn("m-0 text-sm font-normal", classNames?.content)}
+              >
+                {(() => {
+                  let text = localization.INVITED_TO_JOIN_ORGANIZATION.replace(
+                    "{appName}",
+                    appName || ""
+                  )
+                    .replace("{organizationName}", organizationName || "")
+                    .replace("{role}", role || "")
+
+                  // If we have no inviter info, drop the parenthetical and name placeholders cleanly.
+                  if (!inviterName && !inviterEmail) {
+                    text = text
+                      .replace("{inviterName} ({inviterEmail})", "Someone")
+                      .replace("{inviterName}", "Someone")
+                      .replace("({inviterEmail})", "")
+                  }
+
+                  const [beforeInviterName, afterInviterName] =
+                    text.split("{inviterName}")
+
+                  const renderInviterEmail = (segment: string) => {
+                    const [beforeInviterEmail, afterInviterEmail] =
+                      segment.split("{inviterEmail}")
+
+                    if (!inviterEmail) {
+                      return segment
+                        .replace("({inviterEmail})", "")
+                        .replace("{inviterEmail}", "")
+                        .replace(/\s{2,}/g, " ")
+                        .replace(" .", ".")
+                    }
+
+                    return (
+                      <>
+                        {beforeInviterEmail}
+                        <Link
+                          href={`mailto:${inviterEmail}`}
+                          className="text-primary font-medium"
+                        >
+                          {inviterEmail}
+                        </Link>
+                        {afterInviterEmail}
+                      </>
+                    )
+                  }
+
+                  if (!inviterName) {
+                    return renderInviterEmail(
+                      text
+                        .replace("{inviterName}", "")
+                        .replace(/\s{2,}/g, " ")
+                        .replace(" .", ".")
+                    )
+                  }
+
+                  return (
+                    <>
+                      {beforeInviterName}
+                      <span className="font-medium">{inviterName}</span>
+                      {renderInviterEmail(afterInviterName ?? "")}
+                    </>
+                  )
+                })()}
+              </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.ACCEPT_INVITATION}
+                </Button>
+              </Section>
+
+              <Text
+                className={cn(
+                  "m-0 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
+                )}
+              />
+
+              {expirationHours || appName ? (
+                <Text
+                  className={cn(
+                    "m-0 mb-3 text-xs text-muted-foreground",
+                    classNames?.description
+                  )}
+                >
+                  {expirationHours
+                    ? localization.THIS_INVITATION_EXPIRES_IN_HOURS.replace(
+                        "{expirationHours}",
+                        expirationHours.toString()
+                      )
+                    : null}
+                  {appName && (
+                    <>
+                      {expirationHours ? " " : ""}
+                      {localization.EMAIL_SENT_BY.replace("{appName}", appName)}
+                    </>
+                  )}
+                </Text>
+              ) : null}
+
+              <Text
+                className={cn(
+                  "m-0 text-xs text-muted-foreground",
+                  classNames?.description
+                )}
+              >
+                {localization.IF_YOU_DIDNT_EXPECT_THIS_INVITATION}
+              </Text>
+
+              {poweredBy && (
+                <Text
+                  className={cn(
+                    "m-0 mt-4 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>
+  )
+}
+
+OrganizationInvitationEmail.localization =
+  organizationInvitationEmailLocalization
+
+OrganizationInvitationEmail.PreviewProps = {
+  url: "https://better-auth-ui.com/settings/organizations",
+  email: "m@example.com",
+  inviterName: "Jane Doe",
+  inviterEmail: "jane@example.com",
+  organizationName: "Acme Inc.",
+  role: "member",
+  appName: "Better Auth",
+  expirationHours: 48,
+  darkMode: true
+} as OrganizationInvitationEmailProps
+
+export default OrganizationInvitationEmail