Nuxt 集成

在开始之前，请确保你已配置了 Better Auth 实例。如果还没有配置，请查看安装指南。

🌐 Before you start, make sure you have a Better Auth instance configured. If you haven't done that yet, check out the installation.

创建 API 路由

🌐 Create API Route

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

🌐 We need to mount the handler to an API route. Create a file inside /server/api/auth called [...all].ts and add the following code:

import { auth } from "~/lib/auth"; // import your auth config

export default defineEventHandler((event) => {
	return auth.handler(toWebRequest(event));
});

迁移数据库

🌐 Migrate the database

运行以下命令以在数据库中创建所需的表：

🌐 Run the following command to create the necessary tables in your database:

npx @better-auth/cli migrate

创建客户端

🌐 Create a client

创建一个客户端实例。你可以随意命名文件。在这里，我们在 lib/ 目录下创建 client.ts 文件。

🌐 Create a client instance. You can name the file anything you want. Here we are creating client.ts file inside the lib/ directory.

import { createAuthClient } from "better-auth/vue" // make sure to import from better-auth/vue

export const authClient = createAuthClient({
    //you can pass client configuration here
})

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

🌐 Once you have created the client, you can use it to sign up, sign in, and perform other actions. Some of the actions are reactive.

示例用法

🌐 Example usage

<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'
        })">
            Continue with GitHub
        </button>
        <div>
            <pre>{{ session.data }}</pre>
            <button v-if="session.data" @click="authClient.signOut()">
                Sign out
            </button>
        </div>
    </div>
</template>

服务器使用

🌐 Server Usage

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

🌐 The api object exported from the auth instance contains all the actions that you can perform on the server. Every endpoint made inside Better Auth is a invocable as a function. Including plugins endpoints.

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

import { auth } from "~/lib/auth";

export default defineEventHandler((event) => {
    const session = await auth.api.getSession({
      headers: event.headers
    });

   if(session) {
     // access the session.session && session.user
   }
});

SSR 使用

🌐 SSR Usage

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

🌐 If you are using Nuxt with SSR, you can use the useSession function in the setup function of your page component and pass useFetch to make it work with SSR.

<script setup lang="ts">
import { authClient } from "~/lib/auth-client";

const { data: session } = await authClient.useSession(useFetch);
</script>

<template>
    <p>
        {{ session }}
    </p>
</template>

中间件

🌐 Middleware

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

🌐 To add middleware to your Nuxt project, you can use the useSession method from the client.

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("/");
		}
	}
});

资源与示例

🌐 Resources & Examples

• GitHub 上的 Nuxt 和 Nuxt Hub 示例。
• NuxtZzle 是 Nuxt 和 Drizzle ORM 示例 在 GitHub 上 预览
• Nuxt 示例 在 StackBlitz 上。
• NuxSaaS (Github) 是一个全栈 SaaS 启动工具包，利用 Better Auth 提供安全高效的用户认证。演示
• NuxtOne (Github) 是一个基于 Nuxt 的起始模板，用于构建 AIaaS（人工智能即服务）应用。