Nuxt 集成

在开始之前，请确保你已经配置了Better Auth实例。如果你尚未完成此操作，请查看安装指南。

创建 API 路由

我们需要将处理程序挂载到 API 路由。在 /server/api 目录中创建一个名为 [...auth].ts 的文件，并添加以下代码：

server/api/[...auth].ts
import { auth } from "~/utils/auth"; // 导入你的认证配置
 
export default defineEventHandler((event) => {
	return auth.handler(toWebRequest(event));
});

你可以在 better-auth 配置中更改路径，但建议保持为 /api/[...auth]

迁移数据库

运行以下命令在你的数据库中创建必要的表：

npx @better-auth/cli migrate

创建客户端

创建一个客户端实例。你可以给文件取任何你想要的名字。这里我们在 lib/ 目录下创建 client.ts 文件。

auth-client.ts
import { createAuthClient } from "better-auth/vue" // 确保从 better-auth/vue 导入
 
export const authClient = createAuthClient({
    //你可以在这里传递客户端配置
})

一旦你创建了客户端，你就可以使用它来注册、登录和执行其他操作。 其中一些操作是响应式的。

使用示例

index.vue
<script setup lang="ts">
import { authClient } from "~/lib/client"
const session = authClient.useSession()
</script>
 
<template>
    <div>
        <button v-if="!session?.data" @click="() => authClient.signIn.social({
            provider: 'github'
        })">
            通过 GitHub 继续
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                退出登录
            </button>
        </div>
    </div>
</template>

服务器端使用

从 auth 实例导出的 api 对象包含了你可以在服务器上执行的所有操作。Better Auth 内部的每个端点都可以作为函数调用。包括插件端点。

示例：在服务器 API 路由中获取会话

server/api/example.ts
import { auth } from "~/lib/auth";
 
export default defineEventHandler((event) => {
    const session = await auth.api.getSession({
      headers: event.headers
    });
 
   if(session) {
     // 访问 session.session 和 session.user
   }
});

SSR 使用

如果你正在使用带有 SSR 的 Nuxt，你可以在页面组件的 setup 函数中使用 useSession 函数，并传递 useFetch 以使其与 SSR 一起工作。

index.vue
<script setup lang="ts">
import { authClient } from "~/lib/auth-client";
 
const { data: session } = await authClient.useSession(useFetch);
</script>
 
<template>
    <p>
        {{ session }}
    </p>
</template>

中间件

要向你的 Nuxt 项目添加中间件，你可以使用客户端的 useSession 方法。

middleware/auth.global.ts
import { authClient } from "~/lib/auth-client";
export default defineNuxtRouteMiddleware(async (to, from) => {
	const { data: session } = await authClient.useSession(useFetch); 
	if (!session.value) {
		if (to.path === "/dashboard") {
			return navigateTo("/");
		}
	}
});

资源和示例

Next.js 集成

介绍如何将Better Auth与Next.js集成。

SvelteKit 集成

本文介绍如何将Better Auth与SvelteKit集成。

On this page