TanStack Start 集成

在开始集成之前，假设你已经正确地设置了TanStack Start，并配置了Better Auth实例。

挂载处理程序

我们需要将处理程序挂载到 TanStack API 端点。 创建一个新文件：/app/routes/api/auth/$.ts

routes/api/auth/$.ts
import { auth } from '@/lib/auth' // 导入你的认证实例
import { createAPIFileRoute } from '@tanstack/react-start/api'
 
export const APIRoute = createAPIFileRoute('/api/auth/$')({
  GET: ({ request }) => {
    return auth.handler(request)
  },
  POST: ({ request }) => {
    return auth.handler(request)
  },
})

如果你还没有定义 API 路由，可以通过创建文件：/app/api.ts 来实现

app/api.ts
import {
  createStartAPIHandler,
  defaultAPIFileRouteHandler,
} from '@tanstack/react-start/api'
 
export default createStartAPIHandler(defaultAPIFileRouteHandler)

使用技巧

  • 我们建议使用客户端 SDK 或 authClient 来处理认证，而不是使用带有 auth.api 的服务器操作。
  • 当你调用需要设置 cookies 的函数（如 signInEmail 或 signUpEmail）时，你需要为 TanStack Start 处理 cookie 设置。Better Auth 提供了 reactStartCookies 插件来自动为你处理这个问题。
auth.ts
import { betterAuth } from "better-auth";
import { reactStartCookies } from "better-auth/react-start";
 
export const auth = betterAuth({
    //...你的配置
    plugins: [reactStartCookies()] // 确保这是数组中的最后一个插件
})

现在，当你调用设置 cookies 的函数时，它们将使用 TanStack Start 的 cookie 处理系统自动设置。

import { auth } from "@/lib/auth"
 
const signIn = async () => {
    await auth.api.signInEmail({
        body: {
            email: "[email protected]",
            password: "password",
        }
    })
}

SolidStart 集成

介绍如何将Better Auth与SolidStart框架集成。

Hono 集成

介绍如何将Better Auth与Hono框架集成。

On this page