SDK

Svelte SDK

@authon/svelte — Authon認証のためのSvelteストアとコンポーネント。SvelteKitに対応。

インストール

bash

npm install @authon/svelte

初期化

src/lib/authon.ts

import { initAuthon } from "@authon/svelte";

export const authon = initAuthon({
  publishableKey: import.meta.env.PUBLIC_AUTHON_KEY,
});

SvelteKitフック

src/hooks.server.ts

import { authonHandle } from "@authon/svelte/sveltekit";

export const handle = authonHandle({
  secretKey: process.env.AUTHON_SECRET_KEY,
  publicRoutes: ["/", "/about"],
});

コンポーネント

+page.svelte

<script lang="ts">
  import { SignedIn, SignedOut, UserButton } from "@authon/svelte";
  import { user } from "@authon/svelte/stores";
</script>

<SignedIn>
  <p>Welcome, {$user?.displayName}!</p>
  <UserButton />
</SignedIn>

<SignedOut>
  <a href="/sign-in">Sign in</a>
</SignedOut>

ストア

typescript

import { user, isSignedIn, isLoaded, authonClient } from "@authon/svelte/stores";

// Reactive stores
$user        // User | null
$isSignedIn  // boolean
$isLoaded    // boolean

// Call auth methods
$authonClient.openSignIn();
$authonClient.signOut();