メニュー
認証/認可の設計パターンガイド（フレームワーク非依存）。認証方式の選択基準、認証フロー設計、認可モデル（RBAC/ABAC）、トークン管理、セッション管理、OAuth/OIDC、API認証をカバー。認証フロー設計、認可モデル選択、ログイン/登録機能の設計時に使用。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | auth-design |
| description | 認証/認可の設計パターンガイド（フレームワーク非依存）。認証方式の選択基準、認証フロー設計、認可モデル（RBAC/ABAC）、トークン管理、セッション管理、OAuth/OIDC、API認証をカバー。認証フロー設計、認可モデル選択、ログイン/登録機能の設計時に使用。 |
認証（Authentication）と認可（Authorization）のフレームワーク非依存な設計ガイド。
認証 (AuthN): 「誰であるか」を確認する
→ ログイン、トークン検証、MFA
認可 (AuthZ): 「何ができるか」を判断する
→ 権限チェック、リソースアクセス制御
| 方式 | 適用場面 | 特徴 |
|---|---|---|
| セッションベース | 従来型 Web アプリ、SSR | サーバーで状態管理、Cookie で識別 |
| トークンベース (JWT) | SPA、モバイル、マイクロサービス | ステートレス、署名で検証 |
| パスキー / WebAuthn | セキュリティ重視のアプリ | フィッシング耐性、UX 良好 |
| API キー | サーバー間通信、外部 API | シンプル、ユーザー認証には不向き |
ブラウザベースの Web アプリ？
├→ SSR（サーバーサイドレンダリング）→ セッションベース
└→ SPA（クライアントレンダリング）→ トークンベース
├→ BFF パターン採用？→ セッション + BFF でトークン管理
└→ BFF なし → HttpOnly Cookie に JWT を保存
モバイルアプリ？→ トークンベース（セキュアストレージに保存）
サーバー間通信？→ API キー or OAuth Client Credentials
1. クライアント → 認証情報送信（email + password）
2. サーバー → 認証情報検証
3. サーバー → セッション/トークン発行
4. クライアント → セッション/トークン保存
5. 以降のリクエスト → セッション/トークンを付与
1. 入力バリデーション（形式、一意性）
2. パスワードハッシュ化（bcrypt / Argon2）
3. ユーザー作成
4. メール確認（必要に応じて）
5. 自動ログイン or ログインページへ
1. メールアドレス入力（ユーザー存在の有無を漏らさない）
2. リセットトークン生成（十分なエントロピー、有効期限あり）
3. リセット用リンクをメール送信
4. トークン検証 → 新パスワード設定
5. 既存セッション/トークンを無効化
認証要素の種類:
- 知識: パスワード、PIN
- 所持: TOTP アプリ、SMS、ハードウェアキー
- 生体: 指紋、顔認証
推奨: TOTP > SMS（SMS は SIM スワップリスクあり）
フロー:
1. 第1要素の認証成功
2. MFA チャレンジの発行
3. 第2要素の検証
4. 認証完了、セッション/トークン発行
構造: ユーザー → ロール → 権限
例:
admin → [users:read, users:write, users:delete, settings:write]
editor → [users:read, content:read, content:write]
viewer → [users:read, content:read]
適用場面:
- 権限が明確にグループ化できる
- ロール数が限定的（10個以下が目安）
構造: ポリシー = 主体属性 + リソース属性 + 環境属性 + アクション
例:
「部門マネージャーは、自部門のメンバーのデータのみ編集可能」
→ 主体.role == "manager" AND リソース.department == 主体.department
適用場面:
- 複雑な条件が必要（組織、時間、場所など）
- RBAC では表現しきれない細かい制御
構造: リソースの所有者/メンバーが操作可能
例:
- 自分のプロフィールのみ編集可能
- プロジェクトメンバーのみアクセス可能
実装:
1. リソース取得
2. リクエスト者とリソースの関係を検証
3. アクセス可否を判定
詳細: references/authorization-models.md
ペイロードに含めるもの:
- sub: ユーザー ID
- exp: 有効期限
- iat: 発行時刻
- iss: 発行者
- aud: 対象者
- roles/permissions: 権限情報（最小限）
含めてはいけないもの:
- パスワード
- 個人情報（メール、住所等）
- 大量のデータ（トークンサイズが増大）
アクセストークン: 短い有効期限（15分〜1時間）
リフレッシュトークン: 長い有効期限（7日〜30日）
リフレッシュフロー:
1. アクセストークン期限切れ
2. リフレッシュトークンで新しいアクセストークンを取得
3. リフレッシュトークンもローテーション（推奨）
保存場所:
- Web: HttpOnly + Secure + SameSite Cookie
- モバイル: セキュアストレージ
- ❌ localStorage / sessionStorage（XSS リスク）
設計原則:
- 十分なエントロピーのセッション ID
- HttpOnly + Secure + SameSite Cookie
- 適切な有効期限（アクティブ/非アクティブ）
- ログアウト時のサーバーサイド無効化
- セッション固定攻撃対策（認証後に再生成）
- 同時セッション数の制限（必要に応じて）
Authorization Code Flow（推奨）:
1. クライアント → 認可サーバーにリダイレクト
2. ユーザー → 認証 + 同意
3. 認可サーバー → Authorization Code を返却
4. クライアント（サーバーサイド）→ Code でトークン交換
5. アクセストークン + ID トークン取得
PKCE（Proof Key for Code Exchange）:
- SPA / モバイルアプリでは必須
- Authorization Code Flow + PKCE
使い分け:
- Authorization Code + PKCE: Web アプリ、モバイル
- Client Credentials: サーバー間通信（ユーザー不在）
- ❌ Implicit Flow: 非推奨（セキュリティリスク）
| 方式 | 用途 | 実装 |
|---|---|---|
| Bearer Token | ユーザー認証済み API | Authorization: Bearer {token} |
| API Key | 外部開発者向け API | ヘッダー or クエリパラメータ |
| mTLS | サーバー間の相互認証 | クライアント証明書 |
原則:
- 認証失敗の理由を詳細に返さない
❌ "パスワードが間違っています"
❌ "ユーザーが存在しません"
✅ "認証情報が正しくありません"
- レート制限でブルートフォースを防止
- アカウントロックアウトのポリシーを設定
- 認証試行をログに記録
Generate draw.io diagrams as .drawio files, optionally export to PNG/SVG/PDF with embedded XML
Figma MCP を使ってデザインを FE コードに変換するスキル。 Trigger when: Figma URL が共有された時、デザインからコンポーネント実装時、 UI 実装でデザイン参照が必要な時、"Figma", "デザイン", "UI実装" への言及時、 「このデザインを実装して」「Figma から」「デザイン通りに」と言われた時。 Always use with: /web-design-principles
プロジェクト全体の統括エージェント向けスキル。要件整理から技術選定・アーキテクチャ設計・タスク分解・委譲までをカバー。git worktreeを活用した並列開発オーケストレーション（featureブランチ管理、BE/FE統括への委譲、横断レビュー）も担う。プロジェクト全体を俯瞰し、適切なエージェント/スキルに委譲する。新規プロジェクト立ち上げ、技術選定、全体設計、タスク分解・委譲、並列開発時に使用。
Webデザイン実装の鉄則ガイド。CSS/レイアウト設計の原則を提供。 Trigger when: UI/UX実装時、CSS設計時、レイアウト実装時、レスポンシブ対応時、 アクセシビリティ確認時、"レイアウト", "CSS", "スタイル" への言及時。 /figma-to-code スキルと併用する場合に自動で参照される。
Codex CLIワーカーエージェントを起動してタスクを実行する。 Claude CodeがオーケストレーターとしてCodexを呼び出すハイブリッド構成。 トリガー: 「Codexで実行」「Codexに任せて」「並列でCodex」「高速に処理」
CSS の包括的なベストプラクティスガイド（フレームワーク非依存）。パフォーマンス最適化、保守性、シンプルなコード、親子要素の相対値設計、モダン CSS 機能（Container Queries、:has()、ネイティブネスティング、Cascade Layers）をカバー。CSS 設計・実装・レビュー時に使用。Tailwind CSS 等のユーティリティフレームワーク使用時は tailwind-css スキルを参照。