# SvelteKit 集成 (/docs/integrations/svelte-kit)

将 Better Auth 集成到 SvelteKit。



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

<Callout>
  示例使用 SvelteKit 3 的导入方式。使用 SvelteKit 2 时，请从 `$lib/...` 而非 `#lib/...` 导入文件，并从 `$app/environment` 而非 `$app/env` 导入 `building`。
</Callout>

### 挂载处理器 [#挂载处理器]

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

```ts title="hooks.server.ts"
import { auth } from "#lib/auth.js";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/env";

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

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

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

```ts title="hooks.server.ts"
import { auth } from "#lib/auth.js";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/env";

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-的-cookies]

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

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

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

```ts title="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` 文件。

```ts title="lib/client.ts"
import { createAuthClient } from "better-auth/svelte"; // 确保从 better-auth/svelte 导入

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

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

### 示例用法 [#示例用法]

```svelte
<script lang="ts">
  import { authClient } from "#lib/client.js";
  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>
```