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);