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、动作或端点中），请在您的 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 });
}服务器动作 Cookie
为了确保在服务器动作中调用诸如 signInEmail 或 signUpEmail 等函数时 Cookie 被正确设置，您应该使用 sveltekitCookies 插件。此插件将自动为您在 SvelteKit 中处理 Cookie 设置。
您需要将其作为插件添加到您的 Better Auth 实例中。
getRequestEvent 函数在 SvelteKit 2.20.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>