インストール & セットアップ

インストール

npm install @authrim/sveltekit

Peer dependencies: svelte ^4.0.0 || ^5.0.0、@sveltejs/kit ^2.0.0。

セットアップ

ステップ1: 認証設定

src/lib/auth.ts を作成 — Authrimクライアントのシングルトンファクトリ：

src/lib/auth.ts

import { createAuthrim, type AuthrimClient } from '@authrim/sveltekit';

let auth: AuthrimClient | null = null;

export async function getAuth(): Promise<AuthrimClient> {
  if (auth) return auth;

  auth = await createAuthrim({
    issuer: import.meta.env.PUBLIC_AUTHRIM_ISSUER,
    clientId: import.meta.env.PUBLIC_AUTHRIM_CLIENT_ID,
    authMode: 'server',
  });

  return auth;
}

export function clearAuth(): void {
  if (auth) {
    auth.destroy();
    auth = null;
  }
}

ステップ2: サーバーフック

src/hooks.server.ts を作成 — サーバーサイドのハンドルフック：

src/hooks.server.ts

import { createAuthHandle } from '@authrim/sveltekit/server';
import { AUTHRIM_SESSION_SECRET } from '$env/static/private';

export const handle = createAuthHandle({
  sessionSecret: AUTHRIM_SESSION_SECRET,
});

リクエストごとにセッションCookieを読み取り、event.locals.auth を設定します。

AUTHRIM_SESSION_SECRET には、32バイト以上の高エントロピーなサーバー専用secretを指定してください。

ステップ3: TypeScript型定義

src/app.d.ts に追加：

src/app.d.ts

import type { ServerAuthContext } from '@authrim/sveltekit/server';

declare global {
  namespace App {
    interface Locals {
      auth?: ServerAuthContext;
    }
    interface PageData {
      auth: ServerAuthContext | null;
    }
  }
}

export {};

ステップ4: ルートレイアウト

サーバーレイアウト — SSRから認証コンテキストを渡す：

src/routes/+layout.server.ts

import { createAuthLoad } from '@authrim/sveltekit/server';

export const load = createAuthLoad();

クライアントレイアウト — SSRデータでAuthProviderを初期化：

src/routes/+layout.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { AuthProvider } from '@authrim/sveltekit/components';
  import type { AuthrimClient } from '@authrim/sveltekit';

  let { data, children } = $props();

  let auth: AuthrimClient | null = $state(null);

  onMount(async () => {
    const { getAuth } = await import('$lib/auth');
    auth = await getAuth();
  });
</script>

{#if auth}
  <AuthProvider
    {auth}
    initialSession={data.auth?.session ?? null}
    initialUser={data.auth?.user ?? null}
  >
    {@render children()}
  </AuthProvider>
{:else}
  <p>読み込み中...</p>
{/if}

Svelte 4

Svelte 4では、propsに export let data を使用し、{@render children()} の代わりに <slot /> を使用してください：

<script lang="ts">
  export let data;
  // ...
</script>
<!-- ... -->
<AuthProvider ...>
  <slot />
</AuthProvider>

ステップ5: Server-Mediated Session エンドポイント

authMode: 'server' が使う同一オリジンエンドポイントを作成します。Direct Auth artifactをSvelteKitサーバーでredeemし、HttpOnlyセッションCookieの設定、現在のセッション取得、ログアウト時のクリアを行います。

src/lib/server/authrim-handlers.ts

import { createDirectAuthSessionHandlers } from '@authrim/sveltekit/server';
import { PUBLIC_AUTHRIM_ISSUER, PUBLIC_AUTHRIM_CLIENT_ID } from '$env/static/public';
import { AUTHRIM_SESSION_SECRET } from '$env/static/private';

export const authrimHandlers = createDirectAuthSessionHandlers({
  issuer: PUBLIC_AUTHRIM_ISSUER,
  clientId: PUBLIC_AUTHRIM_CLIENT_ID,
  sessionSecret: AUTHRIM_SESSION_SECRET,
});

src/routes/authrim/session/exchange/+server.ts

import { authrimHandlers } from '$lib/server/authrim-handlers';

export const POST = authrimHandlers.exchange;

src/routes/authrim/session/+server.ts

import { authrimHandlers } from '$lib/server/authrim-handlers';

export const GET = authrimHandlers.session;

src/routes/authrim/session/logout/+server.ts

import { authrimHandlers } from '$lib/server/authrim-handlers';

export const POST = authrimHandlers.logout;

ステップ6: 最初のページ

ログインページを作成：

src/routes/login/+page.svelte

<script lang="ts">
  import { getAuthContext } from '@authrim/sveltekit';
  import { goto } from '$app/navigation';

  const auth = getAuthContext();
  const { isAuthenticated } = auth.stores;

  let loading = $state(false);
  let error = $state('');

  async function handlePasskeyLogin() {
    loading = true;
    error = '';

    const { data, error: err } = await auth.passkey.login();

    if (err) {
      error = err.message;
      loading = false;
      return;
    }

    goto('/');
  }
</script>

{#if $isAuthenticated}
  <p>ログイン済みです。<a href="/">ホームへ</a></p>
{:else}
  <button onclick={handlePasskeyLogin} disabled={loading}>
    {loading ? 'サインイン中...' : 'Passkeyでサインイン'}
  </button>

  {#if error}
    <p>{error}</p>
  {/if}
{/if}

Svelte 4

Svelte 4では、onclick の代わりに on:click を使用してください：

<button on:click={handlePasskeyLogin} disabled={loading}>

環境変数

変数	説明
PUBLIC_AUTHRIM_ISSUER	AuthrimサーバーURL（例：https://auth.example.com）
PUBLIC_AUTHRIM_CLIENT_ID	管理パネルのOAuthクライアントID
AUTHRIM_SESSION_SECRET	セッションCookieの暗号化・認証に使うサーバー専用secret

.env に追加：

PUBLIC_AUTHRIM_ISSUER=https://auth.example.com
PUBLIC_AUTHRIM_CLIENT_ID=my-app
AUTHRIM_SESSION_SECRET=replace-with-at-least-32-bytes-of-random-secret

プロジェクト構造

src/
├── app.d.ts                  # 型宣言
├── hooks.server.ts           # サーバーフック（createAuthHandle）
├── lib/
│   ├── auth.ts               # 認証クライアントシングルトン
│   └── server/
│       └── authrim-handlers.ts
└── routes/
    ├── +layout.server.ts     # SSR認証データ
    ├── +layout.svelte        # AuthProviderラッパー
    ├── +page.svelte           # ホームページ
    ├── login/
    │   └── +page.svelte       # ログインページ
    ├── signup/
    │   └── +page.svelte       # サインアップページ
    ├── callback/
    │   └── +page.svelte       # ソーシャルログインコールバック
    ├── authrim/
    │   └── session/
    │       ├── +server.ts
    │       ├── exchange/
    │       │   └── +server.ts
    │       └── logout/
    │           └── +server.ts
    └── account/
        └── +page.svelte       # アカウント設定

次のステップ

• サーバーサイド統合 — サーバーフックの詳細
• 認証 — 全認証方式
• コンポーネント — プリビルドSvelteコンポーネント