テーマ
Requirements: ソーシャルログインモーダル
概要
未認証ユーザーが投票・投票券購入を試みた際に表示されるモーダル。Facebook または Instagram アカウントによるソーシャル認証（NextAuth.js (Auth.js) / OAuth）を提供する。
配置
- 呼び出し元: 候補者詳細画面（無料/有料投票アクション） / 投票券購入モーダル（パッケージ選択）
ビジュアル仕様は
ui-design.md、技術設計（型定義・実装詳細）はdesign.mdを参照。
機能仕様
Feature 1: モーダル表示
Purpose: 未認証ユーザーの投票/購入要求を契機にログインモーダルを起動し、背景クリックでの閉じ操作を許可する。 Scope: ログインモーダルの開閉制御。
Acceptance Criteria (EARS)
- WHEN 候補者詳細画面で未認証ユーザーが投票を試みた、または投票券購入モーダルで未認証ユーザーがパッケージを選択した THEN システムはログインモーダルを表示する
- WHEN ユーザーが背景領域をクリックした THEN システムはモーダルを閉じる
- WHEN ユーザーがモーダル本体をクリックした THEN システムはモーダルを閉じない
Feature 2: 構成要素
Purpose: ユーザーが認証目的と選択肢を一画面で理解できる構成を提供する。 Scope: ログインモーダル内のコンテンツ。
Acceptance Criteria (EARS)
- THE SYSTEM SHALL モーダル内に以下の要素を含める:
- モーダルを閉じる手段
- 見出し「ログインが必要です」
- サブテキスト「投票するには、ソーシャルアカウントでログインしてください」
- Facebook ログインアクション「Facebookでログイン」
- Instagram ログインアクション「Instagramでログイン」
Feature 3: ログイン処理
Purpose: 各プロバイダーの OAuth 認証フローへ接続し、認証結果に応じた継続/エラー処理を行う。 Scope: 認証処理。
Acceptance Criteria (EARS)
- WHEN ユーザーが Facebook ログインアクションを実行した THEN システムは Facebook の OAuth 認証画面へ遷移する
- WHEN ユーザーが Instagram ログインアクションを実行した THEN システムは Instagram の OAuth 認証画面へ遷移する
- WHEN OAuth 認証が成功した THEN システムはユーザーを元の画面に戻し、保留中の投票/購入アクションを再開する
- IF OAuth 認証が失敗した THEN システムはエラーメッセージをユーザーに通知する
Feature 4: 認証成功後のアクション継続
Purpose: 認証成功時にモーダルを閉じ、保留されていた投票種別ごとに後続フローを自動継続させる。 Scope: 認証完了から元アクション再開までの遷移制御。
Acceptance Criteria (EARS)
- WHEN 認証が成功した THEN システムはモーダルを閉じ、保留中のアクションを実行する
- 保留中のアクションが「無料投票」の場合: 該当候補者へ無料投票を即時実行する
- 保留中のアクションが「有料投票（投票券購入）」の場合: 投票券購入モーダルが開いた状態を維持し、購入処理を継続する
Feature 5: ログイン処理中の挙動
Purpose: 認証処理中の二重実行を防ぎ、進行中であることをユーザーへ明示する。 Scope: ログインアクションの状態制御。
Acceptance Criteria (EARS)
- WHEN ログイン処理が進行中 THEN システムはプロバイダー選択アクションを無効化し、処理中であることをユーザーに伝達する
非機能要件
- アクセシビリティ:
- モーダルはフォーカストラップを提供し、Escキーで閉じることができる
- プロバイダー選択アクションは支援技術で識別可能なラベルを持つ
セキュリティ（OAuth、CSRF対策、セッション管理等）は
steering/tech.mdの「セキュリティポリシー（全画面共通）」を参照。
エッジケース
- モーダル多重起動: 同時に複数のログインモーダルが開かないよう排他制御する
- OAuth プロバイダー障害: タイムアウト時にユーザーに再試行を促す
- ユーザーがOAuth画面でキャンセル: 元の画面に戻り、保留中のアクションをクリアする
依存仕様
voting-flow/requirements.md（保留中の投票種別の扱い）