SvelteKit 集成

在开始之前，确保你已经配置好了一个 Better Auth 实例。如果还没有，请查看安装说明。

挂载处理器

我们需要将处理器挂载到 SvelteKit 的服务器钩子中。

hooks.server.ts

import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/environment";

export async function handle({ event, resolve }) {
  return svelteKitHandler({ event, resolve, auth, building });
}

在事件中填充会话数据（`event.locals`）

svelteKitHandler 不会自动填充 event.locals.user 或 event.locals.session。如果你想在服务器端代码中访问当前会话（例如在 +layout.server.ts、actions 或 endpoints 中），需要在 handle 钩子中手动填充 event.locals：

hooks.server.ts

import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/environment";

export async function handle({ event, resolve }) {
  // 从 Better Auth 获取当前会话
  const session = await auth.api.getSession({
    headers: event.request.headers,
  });

  // 将会话和用户信息挂载到服务器端
  if (session) {
    event.locals.session = session.session;
    event.locals.user = session.user;
  }

  return svelteKitHandler({ event, resolve, auth, building });
}

服务器 Action 的 Cookies

为了确保在服务器 Action 中调用诸如 signInEmail 或 signUpEmail 等函数时能正确设置 Cookies，你需要使用 sveltekitCookies 插件。该插件会自动帮你在 SvelteKit 中设置 Cookies。

你需要将它作为插件添加到你的 Better Auth 实例中。

getRequestEvent 函数在 SvelteKit 2.20.0 及之后的版本中可用。请确保你使用的版本兼容。

lib/auth.ts

import { betterAuth } from "better-auth";
import { sveltekitCookies } from "better-auth/svelte-kit";
import { getRequestEvent } from "$app/server";

export const auth = betterAuth({
  // ... 你的配置
  plugins: [sveltekitCookies(getRequestEvent)], // 确保这是数组中的最后一个插件
});

创建客户端

创建一个客户端实例。你可以任意命名该文件。这里示例是在 lib/ 目录下创建了 client.ts 文件。

auth-client.ts

import { createAuthClient } from "better-auth/svelte"; // 确保导入自 better-auth/svelte

export const authClient = createAuthClient({
  // 你可以传入客户端配置
});

创建完客户端后，你可以用它进行注册、登录等操作。其中一些操作是响应式的。客户端使用 nano-store 来存储状态，并在用户登录或登出等情况改变会话状态时自动反映变化。

示例用法

<script lang="ts">
  import { authClient } from "$lib/client";
  const session = authClient.useSession();
</script>
    <div>
      {#if $session.data}
        <div>
          <p>
            {$session.data.user.name}
          </p>
          <button
            on:click={async () => {
              await authClient.signOut();
            }}
          >
            登出
          </button>
        </div>
      {:else}
        <button
          on:click={async () => {
            await authClient.signIn.social({
              provider: "github",
            });
          }}
        >
          使用 GitHub 继续
        </button>
      {/if}
    </div>

挂载处理器

在事件中填充会话数据（event.locals）

服务器 Action 的 Cookies

创建客户端

示例用法

On this page

在事件中填充会话数据（`event.locals`）