概要

@authrim/sveltekit とは

@authrim/sveltekit は SvelteKit アプリケーション向けのフルスタック認証SDKです。Authrimのブラウザ/コアプロトコルクライアントをラップし、SvelteKit固有の統合機能 — server-mediated Direct Auth session、サーバーフック、Svelteストア、プリビルドコンポーネント、ページテンプレート、Handoff SSOヘルパー、tenant discovery — を提供します。

flowchart TB
    subgraph Server ["Server (hooks.server.ts)"]
        direction LR
        Handle["createAuthHandle()"]
        SSM["ServerSessionManager"]
        Load["requireAuth() /<br>createAuthLoad()"]
    end

    subgraph Client ["Client (ブラウザ)"]
        direction LR
        Auth["AuthrimClient"]
        Stores["Svelte Stores"]
        Components["Components"]
        UI["UI Library"]
    end

    subgraph Core ["@authrim/core"]
        direction LR
        CoreAuth["OIDC / OAuth"]
        CoreCrypto["PKCE / WebAuthn"]
    end

    Handle --> SSM
    SSM --> Load
    Load -->|SSRデータ| Auth
    Auth --> Stores
    Auth --> Core
    Stores --> Components
    Components --> UI

パッケージエクスポート

エクスポートパス	用途	主なインポート
`@authrim/sveltekit`	クライアントエントリ — ファクトリ、型、コンテキスト、tenant discovery	`createAuthrim`, `AuthrimClient`, `AuthStores`, `TenantDiscoveryClient`
`@authrim/sveltekit/server`	サーバーフック、セッションハンドラー、ロードヘルパー、Handoff SSO	`createAuthHandle`, `createDirectAuthSessionHandlers`, `requireAuth`, `createAuthLoad`, `verifyHandoffToken`, `createHandoffHandler`
`@authrim/sveltekit/stores`	ストアファクトリ（上級者向け）	`createAuthStores`
`@authrim/sveltekit/components`	コアSvelteコンポーネント	`AuthProvider`, `ProtectedRoute`, `SignInButton`
`@authrim/sveltekit/ui`	UIコンポーネントライブラリ	`Button`, `Input`, `EmailCodeForm`, `PasskeyList`
`@authrim/sveltekit/ui/styles`	テーマCSS	`import '@authrim/sveltekit/ui/styles'`
`@authrim/sveltekit/ui/templates`	ページテンプレート	`LoginTemplate`, `ConsentTemplate`

クライアントAPI名前空間

AuthrimClient は名前空間を通じて認証機能を提供します：

名前空間	メソッド	用途
`auth.passkey`	`login()`, `signUp()`, `register()`, `isSupported()`	WebAuthnパスキー認証
`auth.emailCode`	`send()`, `verify()`, `hasPendingVerification()`	Email Code認証
`auth.social`	`loginWithPopup()`, `loginWithRedirect()`, `handleCallback()`	ソーシャルプロバイダー認証
`auth.session`	`get()`, `validate()`, `refresh()`, `isAuthenticated()`, `getUser()`, `clearCache()`	セッション管理
`auth.consent`	`getData()`, `submit()`	OAuth同意画面
`auth.deviceFlow`	`submit()`	デバイス認可（RFC 8628）
`auth.ciba`	`getData()`, `approve()`, `reject()`	CIBAフロー
`auth.loginChallenge`	`getData()`	ログインチャレンジ画面
`auth.stepUp`	`start()`, `getAction()`, `complete()`, `resend()`, `cancel()`	Canonical Step-Upアクション
`auth.customerProfiles`	`getWithElevationGrant()`, `updateDelegated()`	Customer Profile protected resource API
`auth.devices`	`list()`, `rename()`, `unlink()`	セルフサービスのdevice inventory
`auth.signIn`	`passkey()`, `social()`	ショートカットメソッド
`auth.signUp`	`passkey()`	ショートカットメソッド
`auth.signOut()`	—	サインアウト（リダイレクト指定可）
`auth.fetch()`	—	cookie-session/token-session API呼び出し向けのprofile-aware fetchヘルパー
`auth.stores`	`session`, `user`, `isAuthenticated`, `loadingState`, `error`	リアクティブSvelteストア
`auth.on()`	—	イベント購読

Svelte 4 / 5 互換性

項目	詳細
Peer dependency	`svelte ^4.0.0 \|\| ^5.0.0`
SDK内部の構文	Svelte 4（`export let`, `<slot>`, `on:event`）
アプリコード	Svelte 5 runes を使用（`$state()`, `$props()`, `$derived()`, `$effect()`）
互換性	SDKコンポーネントはSvelte 5プロジェクトでそのまま動作

このドキュメントでは Svelte 5 runes をデフォルトとして使用しています。Svelte 4構文については設定を参照してください。

Web SDK との関係

@authrim/sveltekit は @authrim/web と同じコア認証APIを共有しつつ、SvelteKit固有の機能を追加しています：

機能	Web SDK	SvelteKit SDK
認証API	✓	✓（共通）
Server-mediated Direct Auth session	—	✓
サーバーフック / SSR	—	✓
Svelteストア	—	✓
Svelteコンポーネント	—	✓
UIライブラリ & テンプレート	—	✓
Smart Handoff SSOヘルパー	—	✓
Tenant discoveryヘルパー	—	✓
SvelteKitルーティング統合	—	✓

認証フローの詳細（WebAuthn内部動作、PKCEフロー等）についてはWeb SDKドキュメントを参照してください。

次のステップ

インストール & セットアップ — 導入手順
サーバーサイド統合 — サーバーフックとSSR
認証 — Passkey、メールコード、ソーシャルログイン