SDK

Svelte SDK

Name: Authon
Author: Authon

@authon/svelte — Svelte stores and components for Authon authentication. Works with SvelteKit.

Installation

bash

npm install @authon/svelte @authon/js

Initialization

Call initAuthon() in your root layout to set up Svelte context for the entire component tree.

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

Reactive Stores

Use getAuthon() in any child component to access the reactive stores set up by 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}

Store API Reference

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

Embedded Components

SignIn.svelte and SignUp.svelte render the Authon modal inline. Import them directly from the .svelte file path.

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

Social Buttons

Render OAuth provider buttons into any container element using renderSocialButtons().

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

Standalone Store

Use createAuthonStore() directly when you need an Authon store outside of a Svelte component context.

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