SDK

Svelte SDK

@authon/svelte — 用于 Authon 认证的 Svelte stores 和组件。适用于 SvelteKit。

安装

bash
npm install @authon/svelte @authon/js

初始化

在根布局中调用 initAuthon()，为整个组件树设置 Svelte 上下文。

+layout.svelte
<script lang="ts">
  import { initAuthon } from "@authon/svelte";

  // Call in your root layout — sets Svelte context for the component tree
  const authon = initAuthon(import.meta.env.VITE_AUTHON_KEY);
</script>

<slot />

响应式 Stores

在任何子组件中使用 getAuthon() 访问由 initAuthon() 设置的响应式 stores。

+page.svelte
<script lang="ts">
  import { getAuthon } from "@authon/svelte";

  // Destructure reactive stores from context
  const { user, isSignedIn, isLoading, signOut, openSignIn } = getAuthon();
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else if $isSignedIn}
  <p>Welcome, {$user?.displayName}!</p>
  <button on:click={signOut}>Sign out</button>
{:else}
  <button on:click={openSignIn}>Sign in</button>
{/if}

Store API 参考

typescript
import { getAuthon } from "@authon/svelte";

const {
  user,        // Readable<AuthonUser | null>
  isSignedIn,  // Readable<boolean>
  isLoading,   // Readable<boolean>
  signOut,     // () => Promise<void>
  openSignIn,  // () => Promise<void>
  openSignUp,  // () => Promise<void>
  getToken,    // () => string | null
  client,      // Authon — raw JS client instance
} = getAuthon();

内嵌组件

SignIn.svelte 和 SignUp.svelte 内联渲染 Authon 弹窗。直接从 .svelte 文件路径导入。

+page.svelte
<script lang="ts">
  import SignIn from "@authon/svelte/SignIn.svelte";
</script>

<!-- Props: publishableKey (required), apiUrl, theme, locale -->
<!-- Event: on:signIn → { user: AuthonUser } -->
<SignIn
  publishableKey={import.meta.env.VITE_AUTHON_KEY}
  theme="auto"
  on:signIn={(e) => console.log("Signed in:", e.detail.user)}
/>
+page.svelte
<script lang="ts">
  import SignUp from "@authon/svelte/SignUp.svelte";
</script>

<!-- Props: publishableKey (required), apiUrl, theme, locale -->
<!-- Event: on:signUp → { user: AuthonUser } -->
<SignUp
  publishableKey={import.meta.env.VITE_AUTHON_KEY}
  theme="dark"
  on:signUp={(e) => console.log("Signed up:", e.detail.user)}
/>

社交登录按钮

使用 renderSocialButtons() 将 OAuth 登录方式按钮渲染到任何容器元素中。

+page.svelte
<script lang="ts">
  import { getAuthon, renderSocialButtons } from "@authon/svelte";
  import { onMount } from "svelte";

  const { client } = getAuthon();
  let container: HTMLElement;

  onMount(() => {
    return renderSocialButtons({
      client,
      container,
      compact: true,
      onSuccess: () => (window.location.href = "/dashboard"),
      onError: (err) => console.error(err),
    });
  });
</script>

<div bind:this={container}></div>

独立 Store

在 Svelte 组件上下文之外需要 Authon store 时，直接使用 createAuthonStore()。

src/lib/authon.ts
import { createAuthonStore } from "@authon/svelte";

// Use outside of Svelte component context (e.g. in a plain .ts module)
export const authon = createAuthonStore(import.meta.env.VITE_AUTHON_KEY);
Authon — Universal Authentication Platform