コンテンツにスキップ
Authrim

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

インストール

Terminal window
npm install @authrim/sveltekit

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

セットアップ（5ステップ）

ステップ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,
  });


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


export const handle = createAuthHandle({
  callbackPaths: ['/callback'],
});

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

ステップ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}

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

ログインページを作成：

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}

環境変数

変数説明
PUBLIC_AUTHRIM_ISSUERAuthrimサーバーURL（例：https://auth.example.com）
PUBLIC_AUTHRIM_CLIENT_ID管理パネルのOAuthクライアントID

.env に追加：

Terminal window
PUBLIC_AUTHRIM_ISSUER=https://auth.example.com
PUBLIC_AUTHRIM_CLIENT_ID=my-app

プロジェクト構造

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

次のステップ