SvelteKit 集成
在开始之前，请确保你已配置了 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.
安装处理程序
🌐 Mount the handler
我们需要将处理程序挂载到 SvelteKit 服务器钩子上。
🌐 We need to mount the handler to SvelteKit server hook.
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）
🌐 Populate session data in the event (event.locals)
svelteKitHandler 不会自动填充 event.locals.user 或 event.locals.session。如果你想在服务器代码中访问当前会话（例如，在 +layout.server.ts、操作或端点中），请在你的 handle 钩子中填充 event.locals：
🌐 The svelteKitHandler does not automatically populate event.locals.user or event.locals.session. If you want to access the current session in your server code (e.g., in +layout.server.ts, actions, or endpoints), populate event.locals in your handle hook:
import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
import { building } from "$app/environment";
export async function handle({ event, resolve }) {
// Fetch current session from Better Auth
const session = await auth.api.getSession({
headers: event.request.headers,
});
// Make session and user available on server
if (session) {
event.locals.session = session.session;
event.locals.user = session.user;
}
return svelteKitHandler({ event, resolve, auth, building });
}服务器操作 Cookie
🌐 Server Action Cookies
为了确保在调用如 signInEmail 或 signUpEmail 这样的服务器操作函数时，cookie 能够正确设置，你应该使用 sveltekitCookies 插件。这个插件会在 SvelteKit 中自动帮你处理 cookie 的设置。
🌐 To ensure cookies are properly set when you call functions like signInEmail or signUpEmail in a server action, you should use the sveltekitCookies plugin. This plugin will automatically handle setting cookies for you in SvelteKit.
你需要将其作为插件添加到你的 Better Auth 实例中。
🌐 You need to add it as a plugin to your Better Auth instance.
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({
// ... your config
plugins: [sveltekitCookies(getRequestEvent)], // make sure this is the last plugin in the array
});创建客户端
🌐 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/svelte"; // make sure to import from better-auth/svelte
export const authClient = createAuthClient({
// you can pass client configuration here
});一旦创建了客户端，你就可以使用它进行注册、登录以及执行其他操作。一些操作是响应式的。客户端使用 nano-store 来存储状态，并在发生变化时反映变化，例如用户登录或登出会影响会话状态。
🌐 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. The client use nano-store to store the state and reflect changes when there is a change like a user signing in or out affecting the session state.
示例用法
🌐 Example usage
<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();
}}
>
Sign Out
</button>
</div>
{:else}
<button
on:click={async () => {
await authClient.signIn.social({
provider: "github",
});
}}
>
Continue with GitHub
</button>
{/if}
</div>