コンテンツにスキップ
Authrim

サンプルアプリ

概要

example-sveltekit プロジェクトは @authrim/sveltekit の完全な動作デモです。SvelteKit 2 と Svelte 5 で構築され、主要な認証フロー（Passkey、Email Code、ソーシャルログイン）に加え、サーバーサイドセッション管理、保護ルート、UIコンポーネントライブラリの実装を紹介します。

ソースコード: github.com/authrim/example-sveltekit

プロジェクト構成

example-sveltekit/
├── src/
│   ├── app.d.ts              # TypeScriptグローバル型定義
│   ├── app.html              # HTMLテンプレート
│   ├── hooks.server.ts       # サーバー認証ハンドラー
│   ├── lib/
│   │   ├── auth.ts           # Authrimクライアント（シングルトン）
│   │   └── config.ts         # 環境設定
│   └── routes/
│       ├── +layout.svelte    # ルートレイアウト（AuthProvider）
│       ├── +layout.server.ts # サーバーサイド認証データ
│       ├── +page.svelte      # ホームページ
│       ├── login/
│       │   └── +page.svelte  # ログインページ
│       ├── signup/
│       │   └── +page.svelte  # サインアップページ
│       ├── callback/
│       │   └── +page.svelte  # OAuthコールバックハンドラー
│       └── account/
│           ├── +page.svelte      # アカウント設定（保護ページ）
│           └── +page.server.ts   # 認証ガード
├── .env.example              # 環境変数テンプレート
├── svelte.config.js          # SvelteKit設定（Cloudflareアダプター）
├── vite.config.ts            # Vite設定
└── wrangler.toml             # Cloudflare Pagesデプロイ設定

設定

環境変数

.env.example をコピーして値を設定：

Terminal window
PUBLIC_AUTHRIM_ISSUER=https://your-tenant.authrim.com
PUBLIC_AUTHRIM_CLIENT_ID=your-client-id

管理パネルでの設定

Authrimクライアント設定に以下を登録します：

設定値
許可されたリダイレクトURIhttp://localhost:5173/callback
許可されたオリジンhttp://localhost:5173

主要ファイルの解説

src/lib/auth.ts — クライアントシングルトン

認証クライアントを一度だけ初期化し、アプリ全体で再利用：

import { createAuthrim, type AuthrimClient } from '@authrim/sveltekit';
import { getAuthConfig } from './config.js';


let authClient: AuthrimClient | null = null;


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


  const config = getAuthConfig();
  authClient = await createAuthrim({
    issuer: config.issuer,
    clientId: config.clientId,
  });


  return authClient;
}


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

src/hooks.server.ts — サーバー認証ハンドラー

SvelteKitのhandleフックでサーバーサイドセッション管理を設定：

import { createAuthHandle } from '@authrim/sveltekit/server';
import { env } from '$env/dynamic/public';


export const handle = createAuthHandle({
  issuer: env.PUBLIC_AUTHRIM_ISSUER || '',
  clientId: env.PUBLIC_AUTHRIM_CLIENT_ID || '',
  callbackPaths: ['/callback'],
});

src/routes/+layout.server.ts — SSR用認証データ

全ページに認証データを提供：

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


export const load = createAuthLoad();

src/routes/+layout.svelte — ルートレイアウト

クライアントサイドで認証クライアントを初期化し、AuthProvider で全ページをラップ：

<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);
  let isInitializing = $state(true);


  onMount(async () => {
    try {
      const { getAuth } = await import('$lib/auth.js');
      auth = await getAuth();
    } catch (e) {
      console.error('[Authrim] Failed to initialize auth:', e);
    } finally {
      isInitializing = false;
    }
  });
</script>


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

ポイント：

  • SSR問題を避けるため、クライアントは onMount 内で動的インポート
  • AuthProvider にSSRデータ（initialSession、initialUser）を渡してハイドレーション不一致を防止
  • 子ルートは getAuthContext() で認証クライアントにアクセス可能

ページ別ウォークスルー

ホームページ — src/routes/+page.svelte

認証ストアを読み取って現在の状態を表示：

const { session, user, isAuthenticated, loadingState } = auth.stores;
  • 認証済み — ユーザーアバター、名前、メール、セッションID、セッション有効期限、アカウント設定リンクを表示
  • 未認証 — ウェルカムカードとサインイン・サインアップボタンを表示
  • 機能一覧 — Passkey、Email Code、ソーシャルログイン、セッション管理、Passkey管理、サーバーサイドバリデーション

ログインページ — src/routes/login/+page.svelte

3つの認証方法を提供：

Passkey（条件付きUI）

onMount(async () => {
  const isAvailable = await auth.passkey.isConditionalUIAvailable();
  if (isAvailable) {
    auth.passkey.login({ conditional: true }).then((result) => {
      if (result.data) goto(redirectTo);
    });
  }
});

ページ読み込み時に条件付きUIを開始 — ブラウザの自動入力に利用可能なPasskeyが表示されます。明示的な「Passkeyでサインイン」ボタンも利用可能。

Email Code

EmailCodeForm を使った2ステップフロー：

// ステップ1: コード送信
const result = await auth.emailCode.send(email, { action: 'login' });
if (!result.error) emailStep = 'code';


// ステップ2: コード検証
const result = await auth.emailCode.verify(email, code);
if (!result.error) goto(redirectTo);

ソーシャルログイン

const result = await auth.social.loginWithPopup(provider, { redirectTo });

Google、GitHub、Appleに対応。各プロバイダーはポップアップウィンドウで認証します。

サインアップページ — src/routes/signup/+page.svelte

PasskeyとEmail Codeによるマルチメソッドサインアップ：

// Passkeyサインアップ
const result = await auth.passkey.signUp({ name: name.trim() });


// Email Codeサインアップ
const result = await auth.emailCode.send(email, {
  action: 'signup',
  name: name.trim(),
});

ソーシャルサインアップは同じ auth.social.loginWithPopup() フローを使用。

コールバックページ — src/routes/callback/+page.svelte

OAuth/ソーシャルログインのコールバックを処理：

onMount(async () => {
  if (auth.social.hasCallbackParams()) {
    const result = await auth.social.handleCallback();
    if (result.error) {
      error = result.error.message;
    } else {
      goto(result.data?.redirectTo || '/');
    }
  }
});

アカウント設定 — src/routes/account/

requireAuth() による保護ルート：

+page.server.ts
import { requireAuth } from '@authrim/sveltekit/server';


export const load = requireAuth({
  loginUrl: '/login',
  redirectParam: 'redirectTo',
});

未認証ユーザーは自動的に /login?redirectTo=/account にリダイレクトされます。

ページの内容：

  • ユーザープロフィール（アバター、名前、メール）
  • Passkey管理（登録、一覧、削除）— PasskeyList / PasskeyRegisterButton を使用
  • セッション管理（一覧、取消）— SessionList を使用
  • サインアウトボタン

ユーザーフロー

flowchart LR
    home["/ 
(ホーム)"]
    login["/login
(ログイン)"]
    signup["/signup
(サインアップ)"]
    callback["/callback
(コールバック)"]
    account["/account
(アカウント)"]

    home -->|"未サインイン"| login
    home -->|"未サインイン"| signup
    login -->|"Passkey / Email Code"| home
    login -->|"ソーシャルログイン"| callback --> home
    signup -->|"Passkey / Email Code"| home
    home -->|"アカウント設定"| account
    account -->|"サインアウト"| home

使用UIコンポーネント

サンプルアプリは @authrim/sveltekit/ui のコンポーネントを使用：

コンポーネント使用場所用途
CardLogin, Signup, Homeコンテナレイアウト
Button全ページアクション
InputSignup名前入力
EmailCodeFormLogin, Signupメール + OTP 2ステップフォーム
SocialLoginButtonsLogin, Signupプロバイダーボタン
PasskeyConditionalInputLogin自動入力ベースのPasskey選択
OTPInputSignup6桁コード入力
ResendCodeButtonSignupカウントダウン付き再送信
PasskeyListAccount登録済みPasskey一覧
PasskeyRegisterButtonAccount新規Passkey登録
SessionListAccountアクティブセッション一覧
AuthError全ページエラー表示
SpinnerHome, Callbackローディング表示

ローカルで実行する

Terminal window
git clone https://github.com/authrim/example-sveltekit.git
cd example-sveltekit
pnpm install
cp .env.example .env
# .envをAuthrimテナントURLとクライアントIDで編集
pnpm dev

ブラウザで http://localhost:5173 を開きます。

Cloudflare Pagesへのデプロイ

アプリはCloudflare Pages用に設定済み：

Terminal window
pnpm build
npx wrangler pages deploy .svelte-kit/cloudflare

Cloudflareダッシュボードで環境変数を設定：

変数値
PUBLIC_AUTHRIM_ISSUERhttps://your-tenant.authrim.com
PUBLIC_AUTHRIM_CLIENT_IDyour-client-id

Authrimクライアント設定で、本番URLを許可されたリダイレクトURIとオリジンに追加してください。

次のステップ