@kumix/better-auth

React UI components for Better Auth. Sign-in, sign-up, settings, organizations, two-factor, passkeys, API keys, and more — built on @kumix/ui (shadcn base-nova, Base UI).

Install

bun add @kumix/better-auth @kumix/ui @kumix/utils

Plus the Better Auth ecosystem packages your app uses:

bun add better-auth @better-auth-ui/core @better-auth-ui/react

Peer dependencies

| Package | Why | | -------------------------- | ------------------------------------- | | better-auth | Auth framework + types | | @better-auth-ui/core | Shared types, mutation keys | | @better-auth-ui/react | useAuth, hooks, plugin system | | @kumix/ui | Button, Card, Dialog, etc. primitives | | @kumix/utils | cn class merge | | @tanstack/react-query | Data fetching / mutation state | | @tanstack/react-pacer | Debounced inputs (slug, username) | | react | 18+ or 19+ | | class-variance-authority | Variant styling | | lucide-react | Icons | | input-otp | OTP input field | | date-fns | Date formatting | | bowser | Browser/parser for session info | | react-email | Email template components | | sonner | Toast notifications |

Usage

Per-file imports — no barrel index.ts:

import { Auth } from "@kumix/better-auth/ui/auth";
import { Settings } from "@kumix/better-auth/ui/settings/settings";
import { ProviderButton } from "@kumix/better-auth/ui/provider-button";

Plugins / hooks from lib/:

import { twoFactorPlugin } from "@kumix/better-auth/lib/two-factor-plugin";
import { passkeyPlugin } from "@kumix/better-auth/lib/passkey-plugin";

CSS (Tailwind content source):

import "@kumix/better-auth/css";

Structure

packages/ui/src/
├── lib/                    # Plugins & hooks (TypeScript)
│   ├── admin-plugin.ts
│   ├── api-key-plugin.ts
│   ├── auth-plugin.ts
│   ├── delete-user-plugin.ts
│   ├── device-authorization-plugin.ts
│   ├── email-otp-plugin.ts
│   ├── last-login-method-plugin.ts
│   ├── magic-link-plugin.ts
│   ├── multi-session-plugin.ts
│   ├── oauth-provider-plugin.ts
│   ├── organization-plugin.tsx
│   ├── passkey-plugin.ts
│   ├── theme-plugin.ts
│   ├── two-factor-methods.ts
│   ├── two-factor-plugin.ts
│   ├── use-resend-cooldown.ts
│   ├── use-sign-in-continuation.ts
│   ├── use-two-factor-password.ts
│   └── username-plugin.ts
├── ui/                     # Auth components (TSX)
│   ├── auth.tsx            # Root <Auth> router
│   ├── sign-in.tsx
│   ├── sign-up.tsx
│   ├── settings/           # Account & security settings
│   ├── organization/       # Org management
│   ├── two-factor/         # 2FA challenge & settings
│   ├── passkey/            # Passkey registration/login
│   ├── api-key/            # API key management
│   ├── email/              # Email templates (react-email)
│   ├── email-otp/          # OTP flows
│   ├── admin/              # Admin impersonation
│   ├── delete-user/        # Account deletion
│   ├── device-authorization/
│   ├── multi-session/
│   ├── oauth-provider/
│   ├── last-login-method/
│   ├── theme/
│   ├── username/
│   ├── user/
│   └── ...                 # provider-button, magic-link, etc.
└── style.css               # Tailwind @source "."

Development

bun install
bun run build         # tsdown → dist/ + publint
bun run types:check   # tsc --noEmit
bun run dev           # tsdown --watch

Pulling upstream Better Auth UI components

bun run add:ui        # shadcn add from better-auth-ui.com registry
bun run restructure   # move src/components/auth/* → src/ui/, src/lib/auth/* → src/lib/
bun run fix-imports   # rewrite @/ aliases → relative, @/components/ui/* → @kumix/ui/ui/*, cn → @kumix/utils

The registry outputs files under src/components/auth/ and src/lib/auth/ with @/ aliases. restructure flattens to src/ui/ and src/lib/; fix-imports rewrites all imports to match the published layout.

ESM only

No CommonJS output. tsdown with format: "esm", target: "ES2022". All dependencies and peers are externalized (neverBundle).

License

MIT © Kumix Labs