SvelteKit 集成
在开始之前，请确保您已配置好 Better Auth 实例。如果尚未完成，请查看安装指南。
挂载处理器
我们需要将处理器挂载到 SvelteKit 的服务端钩子中。
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：
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 });
}服务器操作 Cookies
为了确保在服务器操作中调用 signInEmail 或 signUpEmail 等函数时能正确设置 cookies，你应该使用 sveltekitCookies 插件。该插件会在 SvelteKit 中自动为你处理 cookies 的设置。
你需要将其作为插件添加到你的 Better Auth 实例中。
getRequestEvent 函数在 SvelteKit 2.2.0 及更高版本中可用。
请确保你使用的是兼容的版本。
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 文件。
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>