# 通知設計書 33-ログイン有効期限切れ

## 概要

本ドキュメントは、Actual Budget アプリケーションにおける「ログイン有効期限切れ」通知の設計仕様を記述する。この通知は、ユーザーのログインセッションが有効期限切れになった場合に表示され、再ログインを促すものである。

### 本通知の処理概要

**業務上の目的・背景**：セキュリティ上の理由から、ログインセッションには有効期限が設定されている。有効期限が切れた状態でアプリを使用し続けると、データ同期の失敗やアクセス権限の問題が発生する可能性がある。この通知により、ユーザーに再ログインを促し、セキュアな状態でアプリを継続使用できるようにする。

**通知の送信タイミング**：以下のいずれかの状況で表示される。
1. アプリ起動時またはフォーカス時に `userData.tokenExpired` が `true` の場合
2. 同期処理中に `token-expired` エラーが発生した場合

**通知の受信者**：ログインセッションが期限切れになったユーザー本人。

**通知内容の概要**：ログインが期限切れになったことを示すエラーメッセージと、ログイン画面への遷移ボタンが表示される。この通知は sticky（自動消去されない）として設定される。

**期待されるアクション**：ユーザーは「Go to login」ボタンを押してログイン画面に遷移し、再度認証を行う。

## 通知種別

アプリ内通知（トースト通知 - エラータイプ）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（即時表示） |
| 優先度 | 高 |
| リトライ | 無 |

### 送信先決定ロジック

- `userData.tokenExpired === true` の場合に表示
- 同期処理で `token-expired` エラーが発生した場合に表示
- 同一IDの通知が既に表示されている場合は重複表示しない

## 通知テンプレート

### アプリ内通知の場合

| 項目 | 内容 |
|-----|------|
| 通知タイプ | `error` |
| 通知ID | `login-expired` |
| 表示位置 | 画面右下（固定位置） |
| sticky | `true`（自動消去されない） |

### 本文テンプレート

```
Title: Login expired
Message: Login expired, please log in again.
[Go to login ボタン]
```

同期エラー時:
```
Title: Login expired
Message: Please login again.
[Go to login ボタン]
```

### 添付ファイル

該当なし

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| type | 通知タイプ | 固定値 `error` | Yes |
| id | 通知ID | 固定値 `login-expired` | Yes |
| title | 通知タイトル | 固定値 `Login expired` | Yes |
| message | 通知メッセージ | 固定値 | Yes |
| sticky | 自動消去無効フラグ | 固定値 `true` | Yes |
| button.title | ボタンラベル | 固定値 `Go to login` | Yes |
| button.action | ボタンアクション | `signOut` 関数 | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 状態変化 | userData.tokenExpired が true | アプリ起動/フォーカス時 | App.tsx の useEffect で検知 |
| 同期エラー | sync-event の error | subtype === 'token-expired' | sync-events.ts で検知 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 同一IDの通知が既に表示中 | `login-expired` IDで重複チェック |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[アプリ起動/同期処理] --> B{tokenExpired or token-expired エラー?}
    B -->|Yes| C[addNotification dispatch]
    B -->|No| D[通知なし]
    C --> E{同一ID通知が存在?}
    E -->|Yes| D
    E -->|No| F[Redux store に追加]
    F --> G[Notifications コンポーネントで表示]
    G --> H[ユーザーがボタン押下]
    H --> I[signOut 実行]
    I --> J[ログイン画面へ遷移]
    J --> K[通知消去]
    D --> L[終了]
    K --> L
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| - | - | 通知表示自体ではDB参照なし |

### ボタンアクション実行時の更新

「Go to login」ボタン押下時は `signOut` アクションが実行され、以下の処理が行われる：
- クライアント側のユーザー情報がクリアされる
- ログイン画面への遷移が行われる

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| signOut 失敗 | ネットワークエラー等 | エラーログ出力、ユーザーは手動でリロード |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0（リトライなし） |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし（同一ID重複防止あり） |
| 1日あたり上限 | 制限なし |

### 配信時間帯

制限なし（即時表示）

## セキュリティ考慮事項

- トークン期限切れの検知はクライアント側で行われる
- signOut実行後、認証情報は適切にクリアされる
- sticky通知のため、ユーザーが明示的にアクションを取るまで表示され続ける

## 備考

- この通知は sticky（自動消去されない）として設定される
- 同一ID（`login-expired`）の通知は重複して表示されない
- No.18「ログイン有効期限切れ（同期）」とは異なり、こちらはアプリ全体での期限切れを扱う

---

## コードリーディングガイド

本通知を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

ユーザーデータとトークン期限切れフラグの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | usersSlice.ts | `packages/desktop-client/src/users/usersSlice.ts` | UserData 型定義、tokenExpired フラグ |

**読解のコツ**: Redux の state 構造で `state.user.data.tokenExpired` がどのように設定されるかを追う。

#### Step 2: アプリ起動時の検知処理を理解する

アプリ起動時にトークン期限切れを検知する処理を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | App.tsx | `packages/desktop-client/src/components/App.tsx` | useEffect でのtokenExpired検知（139-159行目） |

**主要処理フロー**:
1. **139行目**: `useEffect` で `userData.tokenExpired` を監視
2. **140行目**: `tokenExpired` が true の場合に通知を発行
3. **141-157行目**: `addNotification` で通知を追加
4. **150-152行目**: `signOut` を呼び出すボタンアクションを設定

#### Step 3: 同期エラー時の検知処理を理解する

同期処理中のトークン期限切れエラーを検知する処理を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | sync-events.ts | `packages/desktop-client/src/sync-events.ts` | token-expired ハンドリング（347-360行目） |

**主要処理フロー**:
- **347行目**: `case 'token-expired':` で同期エラーをキャッチ
- **348-359行目**: 通知オブジェクトを構築
- **354-357行目**: `signOut` を呼び出すボタンアクションを設定

#### Step 4: signOut処理を理解する

ボタン押下時のサインアウト処理を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | usersSlice.ts | `packages/desktop-client/src/users/usersSlice.ts` | signOut アクション実装 |

### プログラム呼び出し階層図

```
App.tsx (起動時)
    │
    ├─ useEffect(() => { ... }, [userData?.tokenExpired])
    │      │
    │      └─ if (tokenExpired)
    │             └─ dispatch(addNotification({...}))
    │                    └─ Redux store 更新
    │                           └─ Notifications.tsx 表示
    │
sync-events.ts (同期時)
    │
    ├─ listen('sync-event', ...)
    │      │
    │      └─ case 'token-expired':
    │             └─ store.dispatch(addNotification({...}))
    │
Notifications.tsx
    │
    └─ ButtonWithLoading ('Go to login')
           │
           └─ onClick: signOut()
                  └─ ログイン画面遷移
```

### データフロー図

```
[入力]                           [処理]                         [出力]

userData.tokenExpired ────▶ App.tsx useEffect ──────────▶ 通知表示
          │
sync-event (token-expired) ─▶ sync-events.ts ──────────▶ 通知表示
                                    │
                                    └─▶ addNotification dispatch
                                           │
                                           └─▶ Redux store

'Go to login' ボタン押下 ───▶ signOut() ─────────────▶ ログイン画面遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| App.tsx | `packages/desktop-client/src/components/App.tsx` | ソース | アプリ起動時の tokenExpired 検知 |
| sync-events.ts | `packages/desktop-client/src/sync-events.ts` | ソース | 同期時の token-expired エラー検知 |
| usersSlice.ts | `packages/desktop-client/src/users/usersSlice.ts` | ソース | signOut アクション、userData 管理 |
| notificationsSlice.ts | `packages/desktop-client/src/notifications/notificationsSlice.ts` | ソース | 通知の Redux slice 定義 |
| Notifications.tsx | `packages/desktop-client/src/components/Notifications.tsx` | ソース | 通知表示コンポーネント |
