@authon/svelte

Svelte SDK for Authon — stores, actions, and components.

Install

npm install @authon/svelte
# or
pnpm add @authon/svelte

Requires svelte >= 4.0.0.

Quick Start

1. Initialize

// src/lib/authon.ts
import { initAuthon } from '@authon/svelte';

export const authon = initAuthon({
  publishableKey: 'pk_live_...',
});

2. Use Stores

<script>
  import { user, isSignedIn, isLoading } from '@authon/svelte';
  import { openSignIn, signOut } from '@authon/svelte';
</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}

3. Use Components

<script>
  import { SignedIn, SignedOut, UserButton } from '@authon/svelte';
</script>

<SignedIn>
  <UserButton />
</SignedIn>
<SignedOut>
  <button on:click={openSignIn}>Sign In</button>
</SignedOut>

API Reference

Stores

| Store | Type | Description | |-------|------|-------------| | user | Readable<AuthonUser \| null> | Current user | | isSignedIn | Readable<boolean> | Whether the user is signed in | | isLoading | Readable<boolean> | Whether auth state is loading |

Actions

| Function | Returns | Description | |----------|---------|-------------| | openSignIn() | Promise<void> | Open sign-in modal | | openSignUp() | Promise<void> | Open sign-up modal | | signOut() | Promise<void> | Sign out | | getToken() | string \| null | Get current access token |

Components

| Component | Description | |-----------|-------------| | <SignedIn> | Renders slot only when signed in | | <SignedOut> | Renders slot only when signed out | | <UserButton> | Avatar dropdown with sign-out |

Documentation

authon.dev/docs

License

MIT