@authon/svelte

English | 한국어

@authon/svelte

Drop-in Svelte authentication with reactive stores — self-hosted Clerk alternative, Auth0 alternative

Prerequisites

Before installing the SDK, create an Authon project and get your API keys:

• Create a project at Authon Dashboard

  • Click "Create Project" and enter your app name
  • Select the authentication methods you want (Email/Password, OAuth providers, etc.)

• Get your API keys from Project Settings → API Keys

  • Publishable Key (pk_live_... or pk_test_...) — safe to use in client-side code
  • Secret Key (sk_live_... or sk_test_...) — server-side only, never expose to clients

• Configure OAuth providers (optional) in Project Settings → OAuth

  • Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
  • Set the redirect URL to https://api.authon.dev/v1/auth/oauth/redirect

Test vs Live keys: Use pk_test_... during development. Switch to pk_live_... before deploying to production. Test keys use a sandbox environment with no rate limits.

Install

npm install @authon/svelte

Quick Start

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { initAuthon } from '@authon/svelte';
  import { onDestroy } from 'svelte';

  const authon = initAuthon('pk_live_YOUR_PUBLISHABLE_KEY', {
    apiUrl: 'https://your-authon-server.com',
    theme: 'auto',
  });

  onDestroy(() => authon.destroy());
</script>

<slot />

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { getAuthon } from '@authon/svelte';
  const { user, isSignedIn, isLoading, openSignIn, signOut } = 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}

Common Tasks

Add Google OAuth Login

<script lang="ts">
  import { getAuthon } from '@authon/svelte';
  const { client } = getAuthon();
</script>

<button on:click={() => client.signInWithOAuth('google')}>Sign in with Google</button>

Protect a Route

<!-- src/routes/dashboard/+page.svelte -->
<script lang="ts">
  import { getAuthon } from '@authon/svelte';
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';

  const { isSignedIn, isLoading } = getAuthon();

  onMount(() => {
    if (!$isLoading && !$isSignedIn) goto('/sign-in');
  });
</script>

{#if $isSignedIn}
  <h1>Dashboard</h1>
{/if}

Get Current User

<script lang="ts">
  import { getAuthon } from '@authon/svelte';
  const { user, isLoading } = getAuthon();
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else if $user}
  <p>Email: {$user.email}</p>
  <p>Name: {$user.displayName}</p>
{:else}
  <p>Not signed in</p>
{/if}

Add Email/Password Auth

<script lang="ts">
  import { getAuthon } from '@authon/svelte';
  const { client } = getAuthon();
  let email = '';
  let password = '';

  async function handleSignIn() {
    await client.signInWithEmail(email, password);
  }
</script>

<form on:submit|preventDefault={handleSignIn}>
  <input bind:value={email} type="email" placeholder="Email" />
  <input bind:value={password} type="password" placeholder="Password" />
  <button type="submit">Sign in</button>
</form>

Handle Sign Out

<script lang="ts">
  import { getAuthon } from '@authon/svelte';
  const { signOut } = getAuthon();
</script>

<button on:click={signOut}>Sign Out</button>

Environment Variables

Variable	Required	Description
PUBLIC_AUTHON_API_URL	Yes	Your Authon server URL
PUBLIC_AUTHON_PUBLISHABLE_KEY	Yes	Project publishable key

API Reference

Setup

Function	Description
initAuthon(key, config?)	Create store and set in Svelte context (call in root layout)
getAuthon()	Get AuthonStore from context (call in child components)
createAuthonStore(key, config?)	Low-level store factory (without context)

AuthonStore

Property / Method	Type
user	Readable<AuthonUser | null>
isSignedIn	Readable<boolean>
isLoading	Readable<boolean>
client	Authon
signOut()	Promise<void>
openSignIn()	Promise<void>
openSignUp()	Promise<void>
getToken()	string | null
web3GetNonce(...)	Web3 nonce request
web3Verify(...)	Web3 sign-in
passwordlessSendCode(...)	Send magic link or OTP
passwordlessVerifyCode(...)	Verify OTP
passkeyRegister(...)	Register passkey
passkeyAuthenticate(...)	Auth with passkey
destroy()	Cleanup

Comparison

Feature	Authon	Clerk	Auth.js
Self-hosted	Yes	No	Partial
Pricing	Free	$25/mo+	Free
OAuth providers	10+	20+	80+
ShadowDOM modal	Yes	No	No
MFA/Passkeys	Yes	Yes	Plugin
Web3 auth	Yes	No	No

License

MIT