コンテンツにスキップ
Authrim

設定 & 応用

createAuthrim 設定

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


const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  storage: {
    prefix: 'authrim_',
    storage: 'localStorage',  // 'memory' | 'sessionStorage' | 'localStorage'
  },
});

AuthrimConfig

オプション型デフォルト説明
issuerstring必須AuthrimサーバーURL
clientIdstring必須OAuthクライアントID
storageStorageOptions{}クライアントサイドストレージ設定

StorageOptions

オプション型デフォルト説明
prefixstring'authrim_'ストレージエントリのキープレフィックス
storageStorageType'localStorage'ストレージバックエンド
StorageType動作
'memory'メモリのみ — ページ更新で消失
'sessionStorage'タブ単位 — タブを閉じるとクリア
'localStorage'永続的 — タブ間で共有

コンテキストAPI

SDKはSvelteコンテキストを使用して認証クライアントをコンポーネント間で共有します。

コンテキストの設定

AuthProvider は内部で setAuthContext(auth) を呼び出します。手動セットアップの場合：

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


// Svelteコンポーネントの初期化内で
setAuthContext(auth);

コンテキストの読み取り

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


// 認証クライアントを取得（未設定時はスロー）
const auth = getAuthContext();


// コンテキストの存在確認
if (hasAuthContext()) {
  const auth = getAuthContext();
}
// ✅ 正しい — コンポーネント初期化時に呼び出し
const auth = getAuthContext();


onMount(() => {
  // ✅ ここでauthを使用
  auth.session.get();
});


function handleClick() {
  // ✅ ここでauthを使用
  auth.passkey.login();
}
// ❌ 間違い — onMount内でgetAuthContext
onMount(() => {
  const auth = getAuthContext(); // スロー！
});

プロバイダー（上級者向け）

高度なカスタマイズ用に、HTTPクライアント、暗号プロバイダー、ストレージをオーバーライドできます：

import {
  BrowserHttpClient,
  BrowserCryptoProvider,
  createBrowserStorage,
} from '@authrim/sveltekit';
プロバイダー用途
BrowserHttpClientAuthrimサーバーへのリクエスト
BrowserCryptoProviderPKCEコード検証子/チャレンジの生成
createBrowserStorage()クライアントサイドストレージの抽象化

クリーンアップ

認証クライアントが不要になったら destroy() でクリーンアップ：

auth.destroy();

イベントリスナーを削除し、タイマーをクリアします。AuthProvider はコンポーネント破棄時に自動的に呼び出します。

AuthProvider を使用していない場合は、手動で destroy() を呼び出してください：

<script lang="ts">
  import { onDestroy } from 'svelte';
  import { getAuthContext } from '@authrim/sveltekit';


  const auth = getAuthContext();


  onDestroy(() => {
    auth.destroy();
  });
</script>

TypeScript型

すべての型は @authrim/sveltekit からエクスポートされています：

import type {
  // 設定
  AuthrimConfig,
  StorageOptions,
  StorageType,


  // クライアント
  AuthrimClient,


  // レスポンス
  AuthResponse,
  AuthError,
  AuthSessionData,


  // 名前空間
  PasskeyNamespace,
  EmailCodeNamespace,
  SocialNamespace,
  SessionNamespace,
  ConsentNamespace,
  DeviceFlowNamespace,
  CIBANamespace,
  LoginChallengeNamespace,


  // ストア
  AuthStores,
  AuthLoadingState,


  // イベント
  AuthEventName,
  AuthEventPayloads,
  AuthEventHandler,


  // Core再エクスポート
  Session,
  User,
  SocialProvider,
  PasskeyLoginOptions,
  PasskeySignUpOptions,
  PasskeyRegisterOptions,
  PasskeyCredential,
  EmailCodeSendOptions,
  EmailCodeSendResult,
  EmailCodeVerifyOptions,
  SocialLoginOptions,
} from '@authrim/sveltekit';

サーバー型：

import type {
  ServerAuthContext,
  ServerSessionManager,
  ServerSessionManagerOptions,
  AuthHandleOptions,
  AuthLoadOptions,
} from '@authrim/sveltekit/server';

SSR注意事項

ハイドレーション安全性

AuthProvider は同期的SSR同期（_syncFromSSR()）を使用してハイドレーション不一致を防止します。ストアの値は最初のレンダリング前に設定されるため、$isAuthenticated は最初から正しい値を持ちます。

クライアント専用コード

createAuthrim() はブラウザAPI（fetch、crypto、localStorage）を使用します。必ず onMount 内または動的インポートで呼び出してください：

// ✅ 正しい — onMount内
onMount(async () => {
  const { getAuth } = await import('$lib/auth');
  auth = await getAuth();
});
// ❌ 間違い — サーバーでも実行される
import { getAuth } from '$lib/auth';
const auth = await getAuth(); // サーバーで失敗

環境変数

クライアントからアクセス可能な環境変数には PUBLIC_ プレフィックスを使用：

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

クライアントコードでは import.meta.env.PUBLIC_AUTHRIM_ISSUER でアクセス。

Svelte 4互換性

SDKコンポーネントは内部でSvelte 4構文を使用していますが、Svelte 4と5の両方のプロジェクトで動作します。アプリコードの構文マッピング：

機能Svelte 5（推奨）Svelte 4
Propslet { data } = $props()export let data
Statelet count = $state(0)let count = 0
Derivedconst doubled = $derived(count * 2)$: doubled = count * 2
Effects$effect(() => { ... })$: { ... }
イベント（リスン）onclick={handler}on:click={handler}
イベント（ディスパッチ）コールバックpropscreateEventDispatcher()
スロット（デフォルト）{@render children()}<slot />
スロット（名前付き）{#snippet name()}{/snippet}<div slot="name">
スロットpropsSnippetパラメータlet:propName

SDKコンポーネントのイベント

SDKコンポーネントはSvelte 4の createEventDispatcher でイベントをディスパッチします。Svelte 5プロジェクトでは両方の構文が動作します：

<!-- Svelte 5では両方動作 -->
<SignInButton on:success={handleSuccess} />
<SignInButton onsuccess={handleSuccess} />

SDKコンポーネントのスロット

SDKコンポーネントは <slot> と <slot name="..."> を使用します。Svelte 5プロジェクトでは両方の構文が動作します：

<!-- Svelte 5 snippet構文 -->
<ProtectedRoute>
  <p>保護されたコンテンツ</p>
  {#snippet loading()}
    <p>読み込み中...</p>
  {/snippet}
</ProtectedRoute>


<!-- Svelte 4 slot構文（Svelte 5でも動作） -->
<ProtectedRoute>
  <p>保護されたコンテンツ</p>
  <p slot="loading">読み込み中...</p>
</ProtectedRoute>

トラブルシューティング

”getContext must be called during component initialization”

getAuthContext() がコンポーネント初期化外で呼び出されました。<script> ブロックのトップレベルに移動してください。

“Cannot read properties of null (reading ‘passkey’)”

認証クライアントが初期化されていません。AuthProvider がコンポーネントツリーをラップし、レンダリング前にクライアントが作成されていることを確認してください。

ログイン後もストアがnullのまま

イベントは自動的にストアを更新します。ストアが更新されない場合：

  1. 同じ AuthrimClient インスタンスを使用していることを確認（シングルトンパターン）
  2. AuthProvider がコンポーネントツリーのルートにあることを確認
  3. 2つ目のクライアントインスタンスを作成していないことを確認

SSRハイドレーション不一致

AuthProvider に initialSession と initialUser を渡していることを確認：

<AuthProvider
  {auth}
  initialSession={data.auth?.session ?? null}
  initialUser={data.auth?.user ?? null}
>

ソーシャルログインのコールバックが動作しない

  1. コールバックURLをAuthrim管理パネルに登録
  2. createAuthHandle() の callbackPaths にコールバックルートを含める
  3. コールバックページで auth.social.handleCallback() を呼び出していることを確認

Cookieが設定されない / セッションが失われる

createAuthHandle() のオプションを確認：

  • secure: true にはHTTPSが必要（ローカル開発では false を使用）
  • sameSite: 'strict' はクロスオリジンリダイレクトをブロック（OAuthフローには 'lax' を使用）
  • httpOnly: true はJavaScriptからのアクセスを防止（推奨）

次のステップ