身份集成

使用者痛点：在传统项目中，开发者常常需要从头实现登录、注册、OAuth 回调等功能。导致重复造轮子安全漏洞频发，还有维护成本高。说起来，

为什么选择？它提供了一站式的身份认证方法，让你专注业务逻辑。

1. 开箱即用，无需自行编写基础认证代码。
2. 支持多种认证方式：邮箱OAuthJWTSessionCookieToken
3. 内置众多第三方登录：Apple/Google/Github/Facebook/X /TikTok/WeChat/Vercel
4. 兼容主流数据库：Mysql。PostgreSQL,SQLite,MSSQL,MongoDB
5. 支持两大 ORM：Drizzle,Prisma
Next,Astro ,React ,Nuxt ,Hono ,…等，

Next.js 集成教程

1️⃣ 安装 Better Auth 包

npm install 娱乐ter-auth

2️⃣ 安装 Prisma并初始化项目—如果没有 ORM，手动写 SQL 会非常繁琐且易出错。

npm install prisma # 安装 Prisma CLI
npm install @prisma/client @prisma/adapter-pg pg dotenv # 安装客户端及 PostgreSQL 适配器
npx prisma init # 自动生成 .env 与 prisma/schema.prisma

3️⃣ 设置环境变量

*注意*: 在生产环境请使用强随机数生成的 secret，避免被攻击者猜到。

BETTER_AUTH_SECRET="YOUR_SUPER_SECRET"
BETTER_AUTH_URL="http://localhost:3000"
DATABASE_URL="postgresql://postgres:@localhost:5432/auth"
# 使用 openssl 生成 secret 示例：
# openssl rand -base64 32

4️⃣ 创建 auth 实例—手动管理 token、session 时容易出现安全漏洞，这里全部交给库处理。

import { 娱乐terAuth } from "娱乐ter-auth";import { prismaAdapter } from "娱乐ter-auth/adapters/prisma";import { PrismaClient } from "@/generated/prisma/client";import { PrismaPg } from "@prisma/adapter-pg";const adapter = new PrismaPg;const prisma = new PrismaClient;export const auth = 娱乐terAuth({
database: prismaAdapter。emailAndPassword: { enabled: true },// 如需开启社交登录，请在此处添加 socialProviders 配置
});老实说，

5️⃣ 生成 Prisma 客户端 & 数据表—省去手写迁移脚本的麻烦。

a) 生成客户端：

npx prisma generate

b) 自动创建所需数据表：

npx auth@latest generate
npx prisma migrate dev --name init
npx prisma generate

6️⃣ 挂载 Next.js API 路由
——若不统一路由，前后端分离时经常出现跨域或请求不到的问题。

// src/app/api/auth//route.ts
import { auth } from "@/lib/auth";import { toNextJsHandler } from "娱乐ter-auth/next-js";export const { POST,GET } = toNextJsHandler;

7️⃣ 前端客户端实例
——自行封装 HTTP 请求容易遗漏错误处理和 token 刷新机制。

import { createAuthClient } from "娱乐ter-auth/react";
export const authClient = createAuthClient({
baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL || "http://localhost:3000",});export const { signIn,signUp。useSession } = authClient;

🚀 开始体验功能

邮箱密码注册 & 登录

Pain Point：If you manually handle password hashing and storage,you risk insecure implementations.
tsx
'use client';不过，import { signIn。signUp } from '@/lib/auth-client';import { useState } from 'react';export default function Home {
const = useState;const = useState;const = useState;const handleSignUp = async => {
const { data,error } = await signUp.email;if console.error;else console.log;}，const = useState;const = useState;const handleSignIn = async => {
const { data。error } = await signIn.email({
email的观点是，loginEmail,password: loginPwd,});if console.error;else console.log;}，话说回来，return (

{/* 注册 */}

# 注册账号 #​
​​​ ​input type=”text″ placeholder=”Name″ value={name} onChange={e=>setName} /​
​​​ ​input type=”email″ placeholder=”Email″ value={email} onChange={e=>setEmail} /​
​​​ ​input type=”password″ placeholder=”Password″ value={password} onChange={e=>setPassword} /​
​​​ button onClick={handleSignUp}>Sign Up​​ /button​

 {/* 登录 */}
​​​​​​​​​​​​​​​​​hr​​​​
​​​​​section​​​​​​
​​​​​h1​​​​​​​# 登录账号 #​​​
​​​​​input type=”email″ placeholder=”Email″ value={loginEmail} onChange={e=>setLoginEmail} /​
​​​​​input type=”password″ placeholder=”Password″ value={loginPwd} onChange={e=>setLoginPwd} /​
​​​​​button onClick={handleSignIn}>Sign In​​​​​​​/button​​​​
​​​​​/section​​​​



);}




Pain Point：The OAuth flow often involves fiddling with callback URLs;a wrong URL leads to “redirect_uri_mismatch”. Better Auth abstracts this.


Create an OAuth App in GitHub → Settings → Developer settings → OAuth Apps.

Add callback URL:
`http://localhost:3000/api/auth/callback/github` .

Add credentials to .env:



env
GITHUB_CLIENT_ID=your_client_id
GITHUB_CLIENT_SECRET=your_client_secret



Add provider config in src/lib/auth.ts:


ts
socialProviders: {
从github来看， {
clientId: process.env.GITHUB_CLIENT_ID!按理说，,clientSecret: process.env.GITHUB_CLIENT_SECRET!},},





tsx
const handleGithubLogin = async => {
const { data。error } = await signIn.social;if console.error;else console.log;}，

// JSX 按钮示例：



Pain Point ：