コンテンツにスキップ
Authrim

イベント

概要

SDKは認証状態が変化したとき — ログイン、ログアウト、セッション期限切れ、トークン更新、エラー — にイベントを発行します。これらのイベントにサブスクライブして、UIの更新、アナリティクスの記録、副作用のトリガーを行えます。

イベントのサブスクライブ

auth.on() でイベントハンドラーを登録します：

const unsubscribe = auth.on('auth:login', (payload) => {
  console.log('ログインしました:', payload.user);
  console.log('方法:', payload.method);
});


// 後で: サブスクライブ解除
unsubscribe();

auth.on() はサブスクライブ解除関数を返します。呼び出すとハンドラーが削除されます。

イベントリファレンス

auth:login

認証成功後（すべての方法）に発行：

auth.on('auth:login', (payload) => {
  // payload.session: Session
  // payload.user: User
  // payload.method: 'passkey' | 'emailCode' | 'social'
});

以下の後に発火：

  • auth.passkey.login() または auth.passkey.signUp()
  • auth.emailCode.verify()
  • auth.social.loginWithPopup() または auth.social.handleCallback()

auth:logout

サインアウト後に発行：

auth.on('auth:logout', (payload) => {
  // payload.redirectUri?: string（RPイニシエイテッドログアウトの場合）
});

auth.signOut() の後に発火します。

session:changed

セッション状態が変化したときに発行：

auth.on('session:changed', (payload) => {
  // payload.session: Session | null
  // payload.user: User | null


  if (payload.session) {
    updateHeader(payload.user);
  } else {
    showLoginButton();
  }
});

session:expired

セッションが期限切れまたは取り消されたときに発行：

auth.on('session:expired', (payload) => {
  // payload.reason: 'timeout' | 'revoked' | 'logout'


  switch (payload.reason) {
    case 'timeout':
      showMessage('セッションが期限切れです。再度サインインしてください。');
      break;
    case 'revoked':
      showMessage('管理者によりセッションが終了されました。');
      break;
    case 'logout':
      // 通常のログアウト — auth:logoutで処理済み
      break;
  }
});

token:refreshed

トークンが更新されたときに発行：

auth.on('token:refreshed', (payload) => {
  // payload.session: Session（更新されたセッション情報）
  console.log('トークン更新完了。新しい有効期限:', payload.session.expiresAt);
});

auth:error

認証エラー発生時に発行：

auth.on('auth:error', (payload) => {
  // payload.error: AuthError
  console.error('認証エラー:', payload.error.message);


  // エラートラッキングサービスに送信
  trackError({
    code: payload.error.code,
    message: payload.error.message,
    severity: payload.error.severity,
  });
});

イベント一覧

イベントペイロード発火タイミング
auth:login{ session, user, method }ログイン成功後
auth:logout{ redirectUri? }サインアウト後
session:changed{ session, user }セッション状態変化
session:expired{ reason }セッション期限切れ/取り消し
token:refreshed{ session }トークン自動更新
auth:error{ error }認証エラー

パターン

UI状態管理

// 認証状態に基づいてナビゲーションヘッダーを更新
auth.on('auth:login', ({ user }) => {
  document.getElementById('user-name').textContent = user.name;
  document.getElementById('auth-section').classList.add('authenticated');
});


auth.on('auth:logout', () => {
  document.getElementById('auth-section').classList.remove('authenticated');
});


auth.on('session:expired', () => {
  showModal('セッション期限切れ', '再度サインインしてください。');
});

アナリティクス

auth.on('auth:login', ({ method, user }) => {
  analytics.track('login', {
    method,
    userId: user.id,
  });
});


auth.on('auth:logout', () => {
  analytics.track('logout');
});


auth.on('auth:error', ({ error }) => {
  analytics.track('auth_error', {
    code: error.code,
    message: error.message,
  });
});

複数ハンドラー

同じイベントに複数のハンドラーを登録できます：

// ハンドラー1: UI更新
auth.on('auth:login', ({ user }) => {
  updateUI(user);
});


// ハンドラー2: アナリティクス
auth.on('auth:login', ({ method }) => {
  analytics.track('login', { method });
});


// ログイン時に両方のハンドラーが発火

クリーンアップ

コンポーネントやページのアンマウント時は必ずサブスクライブを解除します：

const handlers = [
  auth.on('auth:login', handleLogin),
  auth.on('auth:logout', handleLogout),
  auth.on('session:expired', handleExpired),
];


// クリーンアップ
function cleanup() {
  handlers.forEach(unsubscribe => unsubscribe());
}


// 例: ページ遷移時にクリーンアップ
window.addEventListener('beforeunload', cleanup);

次のステップ