Better Auth UI

项目概述

Better Auth UI 是专为新一代 TypeScript 认证框架 Better Auth 量身定制的开源 UI 组件库。它提供了完整且无缝集成的身份认证流程界面，涵盖账号密码登录、社交账号快捷授权（OAuth）、魔法链接（Magic Link）、TOTP 双因素验证（2FA）、WebAuthn Passkey 免密登录及用户多端会话安全管理面板。

核心特性

• 🔐 全流程认证场景覆盖：内置登录、注册、找回密码、邮箱验证、个人资料设置及安全审计等全套交互组件。
• 🛡️ 现代安全标准全面支持：开箱即用支持硬件安全密钥 Passkey 绑定、TOTP 动态验证码输入与双因子应急备用码管理。
• 🎨 深度契合 shadcn/ui 设计体系：基于 Tailwind CSS 语义化颜色变量与 Radix UI 无障碍原语构建，与现有项目设计风格无缝融合。
• ⚡ 高健壮性表单与状态处理：内置完善的客户端字段校验、接口异常处理反馈、加载动效及无障碍键盘导航支持。

快速上手与示例代码

npx shadcn@latest add https://better-auth-ui.com/r/auth-card
# 或通过包管理器安装
npm install @better-auth/ui

import React from 'react';
import { AuthCard } from '@/components/auth/auth-card';
import { authClient } from '@/lib/auth-client';

export default function LoginPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-muted/40 p-4">
      <AuthCard
        client={authClient}
        providers={['github', 'google']}
        redirectTo="/dashboard"
      />
    </div>
  );
}

技术选型建议与适用场景

• 非常适合：基于 Next.js、Astro、Remix 或 Vite 构建的各类现代 Web 应用与 SaaS 平台，需要快速上线兼具美观与企业级安全性的登录注册体系。
• 与自研表单对比：省去处理数十种 OAuth 回调分支、错误码映射及 2FA 弹窗等繁琐细节，节省至少 80% 的认证 UI 研发工时。