2025年全球最受欢迎的JS鉴权框架Better Auth，3分钟带你学会

橙子的AI前端笔记
519 阅读4分钟

2025JS榜单.png

2025年 JavaScript 10大最受欢迎的前端项目已经公布，Better Auth作为里面唯一的鉴权框架，受到了特别推荐，如果你还对它不太了解，请花3分钟时间，我将带你快速上手。

Better Auth 是什么？

Better Auth 是一个框架无关的、通用的身份验证和授权框架，专为 TypeScript 设计。它最大的特点就是功能全面，开箱即用。

核心能力一览

功能类别具体能力说明
基础认证邮箱密码登录内置安全的密码哈希和验证
社交登录OAuth 支持GitHub、Google、Discord、Twitter 等主流平台
安全增强2FA 双因素认证为账户提供额外安全层（邮箱、手机验证码等）
会话管理多会话支持支持用户同时登录多个设备
企业功能SaaS 多租户支持组织、团队、成员和邀请管理
高级功能SSO 单点登录创建自己的身份提供商
扩展性插件生态通过插件扩展功能

这些功能，Better Auth 都封装好了，只需要配置一下就能用。

相比传统的认证方案（比如 NextAuth.js），Better Auth 有几个明显的优势：

  1. 框架无关：不绑定特定框架，React、Vue、Svelte、Next.js、Nuxt 都能用
  2. TypeScript 原生：完整的类型支持，开发体验更好
  3. 插件化架构：需要什么功能就加什么插件，不会引入不必要的依赖
  4. 现代化设计：采用最新的 Web 标准和最佳实践

下面以 Next.js + React 带大家快速上手（Express+ Vue 也基本一样）

下面我们以 Next.js 和 React 为例，看看如何快速集成 Better Auth。

一、安装和基础配置

首先安装 Better Auth：

npm install better-auth

然后创建环境变量文件 .env：

BETTER_AUTH_SECRET=32位以上密钥
BETTER_AUTH_URL=http://localhost:3000

这里 BETTER_AUTH_SECRET 用于加密和哈希，必须至少 32 个字符。你可以用 openssl rand -base64 32 生成一个。

二、创建服务端认证实例

在项目根目录（或 lib/、utils/ 文件夹）创建 auth.ts：

import { betterAuth } from "better-auth";
import { Pool } from "pg"; // 以 PostgreSQL 为例
​
export const auth = betterAuth({
  database: new Pool({
    host: process.env.DB_HOST,
    port: 5432,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  }),
});

如果你用的是 SQLite 或者想用 ORM（比如 Drizzle、Prisma），Better Auth 也提供了对应的适配器：

// 使用 Drizzle
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db";
​
export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg", // 或 "mysql", "sqlite"
  }),
});

三、创建数据库表

Better Auth 提供了 CLI 工具来管理数据库 schema：

# 生成迁移文件
npx @better-auth/cli generate
​
# 或者直接迁移（仅支持 Kysely 适配器）
npx @better-auth/cli migrate

四、在 Next.js 中挂载 API 路由

在 Next.js App Router 中，创建 app/api/auth/[...all]/route.ts：

import { auth } from "@/lib/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { GET, POST } = toNextJsHandler(auth.handler);

这样相当于一个拦截器，所有 /api/auth/* 的请求都会被 Better Auth 处理。

五、创建客户端实例

在客户端，创建 lib/auth-client.ts：

import { createAuthClient } from "better-auth/react";
​
export const authClient = createAuthClient({
  baseURL: "http://localhost:3000", // 如果是同域，一般就可以省略
});

六、在 React 组件中使用

好了，现在就可以在组件中使用认证功能了：

"use client";
​
import { authClient } from "@/lib/auth-client";
import { useState } from "react";
​
export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
​
  const handleSignUp = async () => {
    const { data, error } = await authClient.signUp.email({
      email,
      password,
      name: "用户", // 可选
      callbackURL: "/dashboard",
    });
​
    if (error) {
      console.error("注册失败:", error);
    } else {
      console.log("注册成功:", data);
      // 可以在这里做重定向
    }
  };
​
  const handleSignIn = async () => {
    const { data, error } = await authClient.signIn.email({
      email,
      password,
      callbackURL: "/dashboard",
      rememberMe: true,
    });
​
    if (error) {
      console.error("登录失败:", error);
    } else {
      console.log("登录成功:", data);
    }
  };
​
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button onClick={handleSignUp}>注册</button>
      <button onClick={handleSignIn}>登录</button>
    </div>
  );
}

七、获取当前会话

使用 useSession hook 来获取当前用户信息：

"use client";
​
import { authClient } from "@/lib/auth-client";
​
export default function Profile() {
  const { data: session, isPending } = authClient.useSession();
​
  if (isPending) {
    return <div>加载中...</div>;
  }
​
  if (!session?.user) {
    return <div>未登录</div>;
  }
​
  return (
    <div>
      <p>欢迎，{session.user.name}！</p>
      <p>邮箱：{session.user.email}</p>
      <button onClick={() => authClient.signOut()}>退出登录</button>
    </div>
  );
}

也可以在服务端获取会话信息，比如在 Next.js 的 Server Component 中：

import { auth } from "@/lib/auth";
​
export default async function ServerProfile() {
  const session = await auth.api.getSession({
    headers: await import("next/headers").then((m) => m.headers()),
  });
​
  if (!session) {
    return <div>未登录</div>;
  }
​
  return <div>欢迎，{session.user.name}！</div>;
}

八、添加社交登录

以添加GitHub 登录为例，只需要在服务端配置中添加：

import { betterAuth } from "better-auth";
import { github } from "better-auth/plugins";
​
export const auth = betterAuth({
  database: new Pool({ /* ... */ }),
  plugins: [
    github({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
  ],
});

然后在客户端调用：

<button onClick={() => authClient.signIn.social({ provider: "github" })}>
  使用 GitHub 登录
</button>

国外的主流软件，Google、Hugging face、Twitter 等都支持，但是国内的钉钉、微信登录需要自行实现。

Better Auth vs 传统方案

特性手写认证Better Auth
TypeScript 支持需要自己写类型原生支持
框架无关--
插件生态-丰富(账号密码、OAuth2、第三方登录等等)
多租户支持需要自己实现内置
2FA 支持需要自己实现内置
学习曲线陡峭平缓

在AI全栈时代， Better Auth逐渐成为了JS开发者进行鉴权开发的第一选择，所以它同样开放了MCP，可以在AI Coding时候更方便地调用。

我的公众号：橙子的AI前端笔记，谢谢大家关注，后续会持续输出更多前端 AI 深层次干货！

avatar
文章
阅读
粉丝