コンポーネント

概要

@authrim/sveltekit/components は認証パターンのための5つのコアコンポーネントを提供します：

コンポーネント	用途
`AuthProvider`	コンテキストプロバイダー — 認証インスタンスをアプリに提供
`ProtectedRoute`	ルートガード — 未認証ユーザーをリダイレクト
`SignInButton`	Passkeyまたはソーシャルサインイン（状態管理込み）
`SignOutButton`	ローディング状態付きサインアウト
`UserProfile`	現在のユーザー情報を表示

AuthProvider

アプリをラップし、Svelteコンテキスト経由で認証クライアントを提供します。SSRセッション同期も処理します。

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

  let { data, children } = $props();
  let auth: AuthrimClient | null = $state(null);

  // 認証クライアントを初期化...
</script>

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

Props

Prop	型	デフォルト	説明
`auth`	`AuthrimClient`	必須	Authrimクライアントインスタンス
`initialSession`	`Session \| null`	`null`	ハイドレーション用SSRセッション
`initialUser`	`User \| null`	`null`	ハイドレーション用SSRユーザー

動作

setAuthContext(auth) でコンテキストを設定 — すべての子コンポーネントで getAuthContext() が利用可能に
auth._syncFromSSR() を同期的に呼び出し、最初のレンダリング前にストアを設定
マウント時にバックグラウンドでセッションを再検証（オプション）
破棄時に auth.destroy() を呼び出してイベントリスナーとタイマーをクリーンアップ

コンテキストAPI

AuthProvider の子コンポーネント内で：

import { getAuthContext } from '@authrim/sveltekit';

const auth = getAuthContext();
// auth.passkey, auth.stores, auth.on() 等にアクセス

ProtectedRoute

ユーザーが認証済みの場合のみコンテンツを表示。オプションでログインページにリダイレクト。

<script lang="ts">
  import { ProtectedRoute } from '@authrim/sveltekit/components';
</script>

<ProtectedRoute redirectTo="/login">
  <h1>ダッシュボード</h1>
  <p>保護されたコンテンツです。</p>
</ProtectedRoute>

Props

Prop	型	デフォルト	説明
`redirectTo`	`string \| undefined`	—	未認証ユーザーのリダイレクト先
`includeReturnPath`	`boolean`	`true`	現在のパスをクエリパラメータに追加
`returnPathParam`	`string`	`'redirectTo'`	クエリパラメータ名
`class`	`string`	`''`	CSSクラス

スロット

スロット	表示条件	Props
デフォルト	ユーザーが認証済み	—
`loading`	セッション確認中	—
`unauthenticated`	未認証で `redirectTo` なし	—

<ProtectedRoute redirectTo="/login">
  <!-- 認証済みコンテンツ -->
  <h1>おかえりなさい</h1>

  {#snippet loading()}
    <div class="spinner">セッション確認中...</div>
  {/snippet}

  {#snippet unauthenticated()}
    <p>続けるにはサインインしてください。</p>
  {/snippet}
</ProtectedRoute>

Svelte 4では、snippetの代わりに名前付きスロットを使用してください：

<ProtectedRoute redirectTo="/login">
  <h1>おかえりなさい</h1>
  <div slot="loading">セッション確認中...</div>
  <div slot="unauthenticated">サインインしてください。</div>
</ProtectedRoute>

SignInButton

ローディング状態を内蔵したPasskeyまたはソーシャルサインインボタン。

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

<SignInButton
  method="passkey"
  onsuccess={() => goto('/')}
  onerror={(e) => console.error(e.detail.message)}
/>

<SignInButton
  method="social"
  provider="google"
  onsuccess={() => goto('/')}
/>

Props

Prop	型	デフォルト	説明
`method`	`'passkey' \| 'social'`	`'passkey'`	認証方式
`provider`	`SocialProvider`	—	`method='social'` 時に必須
`disabled`	`boolean`	`false`	無効状態
`class`	`string`	`''`	CSSクラス

イベント

イベント	ペイロード	説明
`success`	`{ session: Session; user: User }`	サインイン成功
`error`	`AuthError`	サインイン失敗
`loading`	`AuthLoadingState`	ローディング状態変更

カスタムコンテンツ

<SignInButton method="passkey">
  🔑 Passkeyでサインイン
</SignInButton>

SignOutButton

ローディング状態とオプションのトークン失効付きサインアウトボタン。

<script lang="ts">
  import { SignOutButton } from '@authrim/sveltekit/components';
</script>

<SignOutButton
  redirectUri="/goodbye"
  revokeTokens={true}
  onsuccess={() => console.log('サインアウト完了')}
/>

Props

Prop	型	デフォルト	説明
`redirectUri`	`string \| undefined`	—	サインアウト後のリダイレクト先
`revokeTokens`	`boolean`	`false`	サインアウト時にトークンを失効
`disabled`	`boolean`	`false`	無効状態
`class`	`string`	`''`	CSSクラス

イベント

イベント	ペイロード	説明
`success`	`void`	サインアウト成功
`error`	`AuthError`	サインアウト失敗
`loading`	`AuthLoadingState`	ローディング状態変更

UserProfile

現在のユーザーのアバター、名前、メールアドレスを表示。

<script lang="ts">
  import { UserProfile } from '@authrim/sveltekit/components';
</script>

<UserProfile showAvatar={true} showEmail={true} />

Props

Prop	型	デフォルト	説明
`showAvatar`	`boolean`	`true`	アバター画像を表示
`showEmail`	`boolean`	`true`	メールアドレスを表示
`class`	`string`	`''`	CSSクラス

スロット

スロット	Props	説明
デフォルト	`{ user }`	カスタムレイアウト
`avatar`	`{ user }`	カスタムアバター
`info`	`{ user }`	カスタム情報セクション
`unauthenticated`	—	未認証時に表示

<UserProfile>
  {#snippet avatar({ user })}
    <div class="custom-avatar">
      {user.displayName?.charAt(0) ?? '?'}
    </div>
  {/snippet}

  {#snippet info({ user })}
    <div>
      <strong>{user.displayName}</strong>
      <span>{user.email}</span>
    </div>
  {/snippet}
</UserProfile>

デフォルトスタイリング

アバター: 40×40px、円形、フォールバックアイコン付き
名前: font-weight: 500
メール: 小さいテキスト、不透明度70%
コンテナ: flex row レイアウト

次のステップ

UIライブラリ — フォームや入力を含むコンポーネントカタログ
ページテンプレート — ログイン、サインアップ、設定の完成ページ
ストア & イベント — リアクティブな状態管理