SDK

Svelte SDK

Name: Authon
Author: Authon

@authon/svelte — Authon認証のためのSvelteストアとコンポーネント。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 />

リアクティブストア

子コンポーネントで getAuthon() を使用して、initAuthon() が設定したリアクティブストアにアクセスします。

+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}

ストア 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>

スタンドアロンストア

Svelte コンポーネントコンテキスト外で Authon ストアが必要な場合は、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);