better-auth-ui 3.2.5

package/package.json

@@ -0,0 +1,156 @@
+{
+  "name": "better-auth-ui",
+  "homepage": "https://better-auth-ui.com",
+  "version": "3.2.5",
+  "description": "Plug & play shadcn/ui components for better-auth",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    "./css": "./dist/style.css",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./server": {
+      "import": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.js"
+      },
+      "require": {
+        "types": "./dist/server.d.cts",
+        "default": "./dist/server.cjs"
+      }
+    },
+    "./tanstack": {
+      "import": {
+        "types": "./dist/tanstack.d.ts",
+        "default": "./dist/tanstack.js"
+      },
+      "require": {
+        "types": "./dist/tanstack.d.cts",
+        "default": "./dist/tanstack.cjs"
+      }
+    },
+    "./instantdb": {
+      "import": {
+        "types": "./dist/instantdb.d.ts",
+        "default": "./dist/instantdb.js"
+      },
+      "require": {
+        "types": "./dist/instantdb.d.cts",
+        "default": "./dist/instantdb.cjs"
+      }
+    },
+    "./triplit": {
+      "import": {
+        "types": "./dist/triplit.d.ts",
+        "default": "./dist/triplit.js"
+      },
+      "require": {
+        "types": "./dist/triplit.d.cts",
+        "default": "./dist/triplit.cjs"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "keywords": [
+    "typescript",
+    "react",
+    "better-auth",
+    "shadcn",
+    "nextjs"
+  ],
+  "author": "daveycodez",
+  "license": "MIT",
+  "devDependencies": {
+    "@biomejs/biome": "2.2.4",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-primitive": "^2.1.3",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
+    "@radix-ui/react-use-layout-effect": "^1.1.1",
+    "@tanstack/react-query": "^5.90.2",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "better-auth": "^1.3.14",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "esbuild-plugin-preserve-directives": "^0.0.11",
+    "lucide-react": "^0.544.0",
+    "shx": "^0.4.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "tsc-watch": "^7.1.1",
+    "tsup": "^8.5.0",
+    "tsx": "^4.20.5",
+    "turbo": "^2.5.7",
+    "typescript": "^5.9.2",
+    "zod": "^4.1.11"
+  },
+  "peerDependencies": {
+    "@daveyplate/better-auth-tanstack": "^1.3.6",
+    "@hookform/resolvers": ">=5.2.0",
+    "@instantdb/react": ">=0.18.0",
+    "@marsidev/react-turnstile": ">=1.1.0",
+    "@radix-ui/react-avatar": ">=1.1.0",
+    "@radix-ui/react-checkbox": ">=1.1.0",
+    "@radix-ui/react-context": ">=1.1.0",
+    "@radix-ui/react-dialog": ">=1.1.0",
+    "@radix-ui/react-dropdown-menu": ">=2.1.0",
+    "@radix-ui/react-label": ">=2.1.0",
+    "@radix-ui/react-primitive": ">=2.0.0",
+    "@radix-ui/react-select": ">=2.2.0",
+    "@radix-ui/react-separator": ">=1.1.0",
+    "@radix-ui/react-slot": ">=1.1.0",
+    "@radix-ui/react-tabs": ">=1.1.0",
+    "@radix-ui/react-use-callback-ref": ">=1.1.0",
+    "@radix-ui/react-use-layout-effect": ">=1.1.0",
+    "@tanstack/react-query": ">=5.66.0",
+    "@triplit/client": ">=1.0.0",
+    "@triplit/react": ">=1.0.0",
+    "better-auth": "^1.3.13",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.1.0",
+    "input-otp": ">=1.4.0",
+    "lucide-react": ">=0.469.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-hook-form": ">=7.55.0",
+    "sonner": ">=1.7.0",
+    "tailwind-merge": ">=2.6.0",
+    "tailwindcss": ">=3.0.0",
+    "zod": ">=3.0.0"
+  },
+  "dependencies": {
+    "@better-fetch/fetch": "^1.1.18",
+    "@hcaptcha/react-hcaptcha": "^1.12.1",
+    "@noble/hashes": "^2.0.1",
+    "@react-email/components": "^0.5.4",
+    "@wojtekmaj/react-recaptcha-v3": "^0.1.4",
+    "react-google-recaptcha": "^3.1.0",
+    "react-qr-code": "^2.0.18",
+    "ua-parser-js": "^2.0.5",
+    "vaul": "^1.1.2"
+  },
+  "scripts": {
+    "build": "tsup --clean --dts && shx cp src/style.css dist/style.css",
+    "dev": "tsc-watch"
+  }
+}

package/src/components/account/account-view.tsx

@@ -0,0 +1,220 @@
+"use client"
+
+import { MenuIcon } from "lucide-react"
+import { useContext, useMemo } from "react"
+import { useAuthenticate } from "../../hooks/use-authenticate"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn, getViewByPath } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import type { AccountViewPath } from "../../server"
+import { OrganizationsCard } from "../organization/organizations-card"
+import { UserInvitationsCard } from "../organization/user-invitations-card"
+import { AccountSettingsCards } from "../settings/account-settings-cards"
+import { ApiKeysCard } from "../settings/api-key/api-keys-card"
+import { SecuritySettingsCards } from "../settings/security-settings-cards"
+import type { SettingsCardClassNames } from "../settings/shared/settings-card"
+import { Button } from "../ui/button"
+import {
+    Drawer,
+    DrawerContent,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger
+} from "../ui/drawer"
+import { Label } from "../ui/label"
+
+export interface AccountViewProps {
+    className?: string
+    classNames?: {
+        base?: string
+        cards?: string
+        drawer?: { menuItem?: string }
+        sidebar?: { base?: string; button?: string; buttonActive?: string }
+        card?: SettingsCardClassNames
+    }
+    localization?: AuthLocalization
+    path?: string
+    pathname?: string
+    view?: AccountViewPath
+    hideNav?: boolean
+}
+
+export function AccountView({
+    className,
+    classNames,
+    localization: localizationProp,
+    path: pathProp,
+    pathname,
+    view: viewProp,
+    hideNav
+}: AccountViewProps) {
+    const {
+        apiKey,
+        localization: contextLocalization,
+        organization,
+        account: accountOptions,
+        Link
+    } = useContext(AuthUIContext)
+
+    if (!accountOptions) {
+        return null
+    }
+
+    useAuthenticate()
+
+    const localization = useMemo(
+        () => ({ ...contextLocalization, ...localizationProp }),
+        [contextLocalization, localizationProp]
+    )
+
+    const path = pathProp ?? pathname?.split("/").pop()
+
+    const view =
+        viewProp || getViewByPath(accountOptions.viewPaths, path!) || "SETTINGS"
+
+    const navItems: {
+        view: AccountViewPath
+        label: string
+    }[] = [
+        { view: "SETTINGS", label: localization.ACCOUNT },
+        { view: "SECURITY", label: localization.SECURITY }
+    ]
+
+    if (apiKey) {
+        navItems.push({
+            view: "API_KEYS",
+            label: localization.API_KEYS
+        })
+    }
+
+    if (organization) {
+        navItems.push({
+            view: "ORGANIZATIONS",
+            label: localization.ORGANIZATIONS
+        })
+    }
+
+    return (
+        <div
+            className={cn(
+                "flex w-full grow flex-col gap-4 md:flex-row md:gap-12",
+                className,
+                classNames?.base
+            )}
+        >
+            {!hideNav && (
+                <div className="flex justify-between gap-2 md:hidden">
+                    <Label className="font-semibold text-base">
+                        {navItems.find((i) => i.view === view)?.label}
+                    </Label>
+
+                    <Drawer>
+                        <DrawerTrigger asChild>
+                            <Button variant="outline">
+                                <MenuIcon />
+                            </Button>
+                        </DrawerTrigger>
+                        <DrawerContent>
+                            <DrawerHeader>
+                                <DrawerTitle className="hidden">
+                                    {localization.SETTINGS}
+                                </DrawerTitle>
+                            </DrawerHeader>
+                            <div className="flex flex-col px-4 pb-4">
+                                {navItems.map((item) => (
+                                    <Link
+                                        key={item.view}
+                                        href={`${accountOptions?.basePath}/${accountOptions?.viewPaths[item.view]}`}
+                                    >
+                                        <Button
+                                            size="lg"
+                                            className={cn(
+                                                "w-full justify-start px-4 transition-none",
+                                                classNames?.drawer?.menuItem,
+                                                view === item.view
+                                                    ? "font-semibold"
+                                                    : "text-foreground/70"
+                                            )}
+                                            variant="ghost"
+                                        >
+                                            {item.label}
+                                        </Button>
+                                    </Link>
+                                ))}
+                            </div>
+                        </DrawerContent>
+                    </Drawer>
+                </div>
+            )}
+
+            {!hideNav && (
+                <div className="hidden md:block">
+                    <div
+                        className={cn(
+                            "flex w-48 flex-col gap-1 lg:w-60",
+                            classNames?.sidebar?.base
+                        )}
+                    >
+                        {navItems.map((item) => (
+                            <Link
+                                key={item.view}
+                                href={`${accountOptions?.basePath}/${accountOptions?.viewPaths[item.view]}`}
+                            >
+                                <Button
+                                    size="lg"
+                                    className={cn(
+                                        "w-full justify-start px-4 transition-none",
+                                        classNames?.sidebar?.button,
+                                        view === item.view
+                                            ? "font-semibold"
+                                            : "text-foreground/70",
+                                        view === item.view &&
+                                            classNames?.sidebar?.buttonActive
+                                    )}
+                                    variant="ghost"
+                                >
+                                    {item.label}
+                                </Button>
+                            </Link>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {view === "SETTINGS" && (
+                <AccountSettingsCards
+                    classNames={classNames}
+                    localization={localization}
+                />
+            )}
+
+            {view === "SECURITY" && (
+                <SecuritySettingsCards
+                    classNames={classNames}
+                    localization={localization}
+                />
+            )}
+
+            {view === "API_KEYS" && (
+                <ApiKeysCard
+                    classNames={classNames?.card}
+                    localization={localization}
+                />
+            )}
+
+            {view === "ORGANIZATIONS" && organization && (
+                <div className="grid w-full gap-4 md:gap-6">
+                    <OrganizationsCard
+                        classNames={classNames?.card}
+                        localization={localization}
+                    />
+
+                    <UserInvitationsCard
+                        classNames={classNames?.card}
+                        localization={localization}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}

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

@@ -0,0 +1,36 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect, useRef } from "react"
+
+import { useOnSuccessTransition } from "../../hooks/use-success-transition"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+
+export function AuthCallback({ redirectTo }: { redirectTo?: string }) {
+    const {
+        hooks: { useIsRestoring },
+        persistClient
+    } = useContext(AuthUIContext)
+
+    const isRestoring = useIsRestoring?.()
+    const isRedirecting = useRef(false)
+
+    const { onSuccess } = useOnSuccessTransition({ redirectTo })
+
+    useEffect(() => {
+        if (isRedirecting.current) return
+
+        if (!persistClient) {
+            isRedirecting.current = true
+            onSuccess()
+            return
+        }
+
+        if (isRestoring) return
+
+        isRedirecting.current = true
+        onSuccess()
+    }, [isRestoring, persistClient, onSuccess])
+
+    return <Loader2 className="animate-spin" />
+}

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

@@ -0,0 +1,277 @@
+"use client"
+
+import { useContext, useEffect } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { getViewByPath } from "../../lib/utils"
+import type { AuthViewPath } from "../../lib/view-paths"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { AuthCallback } from "./auth-callback"
+import { EmailOTPForm } from "./forms/email-otp-form"
+import { ForgotPasswordForm } from "./forms/forgot-password-form"
+import { MagicLinkForm } from "./forms/magic-link-form"
+import { RecoverAccountForm } from "./forms/recover-account-form"
+import { ResetPasswordForm } from "./forms/reset-password-form"
+import { SignInForm } from "./forms/sign-in-form"
+import { SignUpForm } from "./forms/sign-up-form"
+import { TwoFactorForm } from "./forms/two-factor-form"
+import { SignOut } from "./sign-out"
+
+export type AuthFormClassNames = {
+    base?: string
+    button?: string
+    checkbox?: string
+    description?: string
+    error?: string
+    forgotPasswordLink?: string
+    icon?: string
+    input?: string
+    label?: string
+    otpInput?: string
+    otpInputContainer?: string
+    outlineButton?: string
+    primaryButton?: string
+    providerButton?: string
+    qrCode?: string
+    secondaryButton?: string
+}
+
+export interface AuthFormProps {
+    className?: string
+    classNames?: AuthFormClassNames
+    callbackURL?: string
+    isSubmitting?: boolean
+    localization?: Partial<AuthLocalization>
+    pathname?: string
+    redirectTo?: string
+    view?: AuthViewPath
+    otpSeparators?: 0 | 1 | 2
+    setIsSubmitting?: (isSubmitting: boolean) => void
+}
+
+export function AuthForm({
+    className,
+    classNames,
+    callbackURL,
+    isSubmitting,
+    localization,
+    pathname,
+    redirectTo,
+    view,
+    otpSeparators = 0,
+    setIsSubmitting
+}: AuthFormProps) {
+    const {
+        basePath,
+        credentials,
+        localization: contextLocalization,
+        magicLink,
+        emailOTP,
+        signUp,
+        twoFactor: twoFactorEnabled,
+        viewPaths,
+        replace
+    } = useContext(AuthUIContext)
+
+    const signUpEnabled = !!signUp
+
+    localization = { ...contextLocalization, ...localization }
+
+    useEffect(() => {
+        if (pathname && !getViewByPath(viewPaths, pathname)) {
+            console.error(`Invalid auth view: ${pathname}`)
+            replace(`${basePath}/${viewPaths.SIGN_IN}${window.location.search}`)
+        }
+    }, [pathname, viewPaths, basePath, replace])
+
+    view =
+        view ||
+        (getViewByPath(viewPaths, pathname) as AuthViewPath) ||
+        "SIGN_IN"
+
+    // Redirect to appropriate view based on enabled features
+    useEffect(() => {
+        let isInvalidView = false
+
+        if (
+            view === "MAGIC_LINK" &&
+            (!magicLink || (!credentials && !emailOTP))
+        ) {
+            isInvalidView = true
+        }
+
+        if (
+            view === "EMAIL_OTP" &&
+            (!emailOTP || (!credentials && !magicLink))
+        ) {
+            isInvalidView = true
+        }
+
+        if (view === "SIGN_UP" && !signUpEnabled) {
+            isInvalidView = true
+        }
+
+        if (
+            !credentials &&
+            [
+                "SIGN_UP",
+                "FORGOT_PASSWORD",
+                "RESET_PASSWORD",
+                "TWO_FACTOR",
+                "RECOVER_ACCOUNT"
+            ].includes(view)
+        ) {
+            isInvalidView = true
+        }
+
+        if (
+            ["TWO_FACTOR", "RECOVER_ACCOUNT"].includes(view) &&
+            !twoFactorEnabled
+        ) {
+            isInvalidView = true
+        }
+
+        if (isInvalidView) {
+            replace(`${basePath}/${viewPaths.SIGN_IN}${window.location.search}`)
+        }
+    }, [
+        basePath,
+        view,
+        viewPaths,
+        credentials,
+        replace,
+        emailOTP,
+        signUpEnabled,
+        magicLink,
+        twoFactorEnabled
+    ])
+
+    if (view === "SIGN_OUT") return <SignOut />
+    if (view === "CALLBACK") return <AuthCallback redirectTo={redirectTo} />
+
+    if (view === "SIGN_IN") {
+        return credentials ? (
+            <SignInForm
+                className={className}
+                classNames={classNames}
+                localization={localization}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        ) : magicLink ? (
+            <MagicLinkForm
+                className={className}
+                classNames={classNames}
+                callbackURL={callbackURL}
+                localization={localization}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        ) : emailOTP ? (
+            <EmailOTPForm
+                className={className}
+                classNames={classNames}
+                callbackURL={callbackURL}
+                localization={localization}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        ) : null
+    }
+
+    if (view === "TWO_FACTOR") {
+        return (
+            <TwoFactorForm
+                className={className}
+                classNames={classNames}
+                localization={localization}
+                otpSeparators={otpSeparators}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        )
+    }
+
+    if (view === "RECOVER_ACCOUNT") {
+        return (
+            <RecoverAccountForm
+                className={className}
+                classNames={classNames}
+                localization={localization}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        )
+    }
+
+    if (view === "MAGIC_LINK") {
+        return (
+            <MagicLinkForm
+                className={className}
+                classNames={classNames}
+                callbackURL={callbackURL}
+                localization={localization}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        )
+    }
+
+    if (view === "EMAIL_OTP") {
+        return (
+            <EmailOTPForm
+                className={className}
+                classNames={classNames}
+                callbackURL={callbackURL}
+                localization={localization}
+                redirectTo={redirectTo}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        )
+    }
+
+    if (view === "FORGOT_PASSWORD") {
+        return (
+            <ForgotPasswordForm
+                className={className}
+                classNames={classNames}
+                localization={localization}
+                isSubmitting={isSubmitting}
+                setIsSubmitting={setIsSubmitting}
+            />
+        )
+    }
+
+    if (view === "RESET_PASSWORD") {
+        return (
+            <ResetPasswordForm
+                className={className}
+                classNames={classNames}
+                localization={localization}
+            />
+        )
+    }
+
+    if (view === "SIGN_UP") {
+        return (
+            signUpEnabled && (
+                <SignUpForm
+                    className={className}
+                    classNames={classNames}
+                    callbackURL={callbackURL}
+                    localization={localization}
+                    redirectTo={redirectTo}
+                    isSubmitting={isSubmitting}
+                    setIsSubmitting={setIsSubmitting}
+                />
+            )
+        )
+    }
+}