コンテンツにスキップ
Authrim

設定リファレンス

createAuthrimオプション

createAuthrim() 関数は AuthrimConfig オブジェクトを受け取ります：

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


const auth = await createAuthrim({
  // 必須
  issuer: 'https://auth.example.com',
  clientId: 'my-app',


  // オプション
  enableOAuth: false,
  storage: { ... },
  silentLoginRedirectUri: 'https://myapp.com/callback.html',
});

必須オプション

issuer

型必須説明
stringはいAuthrim IdP URL

AuthrimサーバーのベースURL。SDKはディスカバリー、トークンエンドポイント、Direct Authエンドポイント用のwell-knownパスを自動的に付加します。

issuer: 'https://auth.example.com'

clientId

型必須説明
stringはいOAuthクライアントID

Authrim管理パネルで登録したクライアントID。

clientId: 'my-application'

オプション

enableOAuth

型デフォルト説明
booleanfalseOAuth/OIDC機能を有効にする

true にすると auth.oauth 名前空間が利用可能になり、以下を提供：

  • auth.oauth.popup.login() — ポップアップベースのOAuthログイン
  • auth.oauth.silentAuth.check() — iframeベースのサイレント認証
  • auth.oauth.trySilentLogin() — トップレベルナビゲーションSSO
  • auth.oauth.handleSilentCallback() — SSOコールバックハンドラー
  • auth.oauth.buildAuthorizationUrl() — 認可URL手動構築
  • auth.oauth.handleCallback() — コールバック手動処理
// OAuth無効（デフォルト）
const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
});
// auth.oauth は undefined


// OAuth有効
const authWithOAuth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  enableOAuth: true,
});
// authWithOAuth.oauth が利用可能

storage

型デフォルト説明
StorageOptions下記参照ストレージ設定
interface StorageOptions {
  /** 保存アイテムのキープレフィックス（デフォルト: 'authrim'） */
  prefix?: string;
  /** ストレージバックエンド（デフォルト: 'sessionStorage'） */
  storage?: 'memory' | 'sessionStorage' | 'localStorage';
}

ストレージタイプ

タイプスコープ持続性セキュリティ
'memory'現在のタブタブを閉じる/遷移で消去最も安全（DOMアクセス不可）
'sessionStorage'現在のタブリロード後も保持、タブを閉じると消去XSS耐性（タブスコープ）
'localStorage'全タブブラウザ再起動後も永続XSS経由でアクセス可能
// 厳格なセキュリティ（SPA）
storage: { storage: 'memory' }


// デフォルト（ほとんどのアプリに推奨）
storage: { storage: 'sessionStorage' }


// 永続的（ログイン状態保持）
storage: { storage: 'localStorage', prefix: 'myapp-auth' }

silentLoginRedirectUri

型デフォルト説明
string${window.location.origin}/callback.htmlサイレントSSO用のリダイレクトURI

auth.oauth.trySilentLogin() と auth.oauth.handleSilentCallback() で使用されます。handleSilentCallback() を呼び出すページである必要があります。

silentLoginRedirectUri: 'https://myapp.com/auth/callback'

TypeScript: 条件付き型

Authrim の戻り値の型は enableOAuth に基づいて条件分岐します：

// enableOAuth: false（または省略）
// 型: AuthrimBase
const auth = await createAuthrim({
  issuer: '...',
  clientId: '...',
});
auth.passkey    // ✅ 利用可能
auth.emailCode  // ✅ 利用可能
auth.social     // ✅ 利用可能
auth.session    // ✅ 利用可能
auth.oauth      // ❌ undefined


// enableOAuth: true
// 型: AuthrimWithOAuth
const auth = await createAuthrim({
  issuer: '...',
  clientId: '...',
  enableOAuth: true,
});
auth.passkey    // ✅ 利用可能
auth.oauth      // ✅ 利用可能

API名前空間

ベース（常に利用可能）

名前空間説明
auth.passkeyPasskey（WebAuthn）認証
auth.emailCodeEmail Code（OTP）認証
auth.socialソーシャルプロバイダー認証
auth.sessionセッション管理
auth.signInサインインショートカット
auth.signUpサインアップショートカット
auth.signOut()サインアウト
auth.on()イベントサブスクリプション

OAuth（enableOAuth: true）

名前空間説明
auth.oauth.popupポップアップベースのOAuthログイン
auth.oauth.silentAuthiframeベースのサイレント認証
auth.oauth.trySilentLogin()トップレベルナビゲーションSSO
auth.oauth.handleSilentCallback()SSOコールバックハンドラー
auth.oauth.buildAuthorizationUrl()認可URL手動構築
auth.oauth.handleCallback()コールバック手動処理

ショートカット

SDKは一般的な操作のショートカットメソッドを提供します：

// ショートカット: auth.signIn.passkey()
// 同等: auth.passkey.login()
const { data, error } = await auth.signIn.passkey();


// ショートカット: auth.signIn.social('google')
// 同等: auth.social.loginWithPopup('google')
const { data, error } = await auth.signIn.social('google');


// ショートカット: auth.signUp.passkey({ email })
// 同等: auth.passkey.signUp({ email })
const { data, error } = await auth.signUp.passkey({ email: '[email protected]' });

最小構成

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
});

フル構成

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  enableOAuth: true,
  storage: {
    prefix: 'myapp',
    storage: 'sessionStorage',
  },
  silentLoginRedirectUri: 'https://myapp.com/callback',
});

次のステップ