コンテンツにスキップ
Authrim

概要

@authrim/sveltekit とは

@authrim/sveltekit は SvelteKit アプリケーション向けのフルスタック認証SDKです。@authrim/core をラップし、SvelteKit固有の統合機能 — サーバーフック、Svelteストア、プリビルドコンポーネント、ページテンプレート — を提供します。

flowchart TB
    subgraph Server ["Server (hooks.server.ts)"]
        direction LR
        Handle["createAuthHandle()"]
        SSM["ServerSessionManager"]
        Load["requireAuth() /
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クライアントエントリ — ファクトリ、型、コンテキストcreateAuthrim, AuthrimClient, AuthStores
@authrim/sveltekit/serverサーバーフック・ロードヘルパーcreateAuthHandle, requireAuth, createAuthLoad
@authrim/sveltekit/storesストアファクトリ（上級者向け）createAuthStores
@authrim/sveltekit/componentsコアSvelteコンポーネントAuthProvider, ProtectedRoute, SignInButton
@authrim/sveltekit/uiUIコンポーネントライブラリButton, Input, EmailCodeForm, PasskeyList
@authrim/sveltekit/ui/stylesテーマCSSimport '@authrim/sveltekit/ui/styles'
@authrim/sveltekit/ui/templatesページテンプレートLoginTemplate, ConsentTemplate

クライアントAPI名前空間

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

名前空間メソッド用途
auth.passkeylogin(), signUp(), register(), isSupported()WebAuthnパスキー認証
auth.emailCodesend(), verify(), hasPendingVerification()メールOTP認証
auth.socialloginWithPopup(), loginWithRedirect(), handleCallback()ソーシャルプロバイダー認証
auth.sessionget(), validate(), refresh(), isAuthenticated(), getUser(), clearCache()セッション管理
auth.consentgetData(), submit()OAuth同意画面
auth.deviceFlowsubmit()デバイス認可（RFC 8628）
auth.cibagetData(), approve(), reject()CIBAフロー
auth.loginChallengegetData()ログインチャレンジ画面
auth.signInpasskey(), social()ショートカットメソッド
auth.signUppasskey()ショートカットメソッド
auth.signOut()—サインアウト（リダイレクト指定可）
auth.storessession, user, isAuthenticated, loadingState, errorリアクティブSvelteストア
auth.on()—イベント購読

Svelte 4 / 5 互換性

項目詳細
Peer dependencysvelte ^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 SDKSvelteKit SDK
認証API✓✓（共通）
サーバーフック / SSR—✓
Svelteストア—✓
Svelteコンポーネント—✓
UIライブラリ & テンプレート—✓
SvelteKitルーティング統合—✓

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

次のステップ