SvelteKit 集成

在开始之前,请确保你已经配置了 Better Auth 实例。如果你尚未完成此操作,请查看安装指南

挂载处理程序

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

hooks.server.ts
import { auth } from "$lib/auth";
import { svelteKitHandler } from "better-auth/svelte-kit";
 
export async function handle({ event, resolve }) {
	return svelteKitHandler({ event, resolve, auth });
}

创建客户端

创建一个客户端实例。你可以给文件取任何你想要的名字。这里我们在 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>

On this page