Basic認証

期間、1day-1week-2weekくらい？

## 調査：クライアントサイド疑似認証の実装方針

sdpf-theme での実装パターンを踏襲しつつ、このプロジェクト（Vite + React）に適用する方法を整理します。

1. コンポーネント構成:
* AuthGuard (または LoginGate)
コンポーネントを作成し、アプリ全体（または特定ルート）をラップする。
* ローカルストレージ (localStorage) や セッションストレージ (sessionStorage) に認証状態を保存。

2. 認証ロジック:
* 初回アクセス時: パスワード入力画面を表示。
* 入力されたパスワードと、環境変数（VITE_APP_PASSWORD
等）またはハードコードされたハッシュ値を比較。
* 一致: ストレージにフラグを立て、本来のコンテンツ（children）をレンダリング。
* 不一致: エラーメッセージを表示。

3. Storybookへの適用:
* Storybookは独立したアプリとしてビルドされるため、メインアプリの AuthGuard
とは別に、Storybook用のデコレーター（preview.tsx で設定）として認証画面を挟む必要があります。
* あるいは、Storybook自体は見せても良いが、中の特定の機密コンポーネントだけ隠す、というよりは「St
orybook全体へのアクセス制限」が目的かと思いますので、preview.tsx
で全ストーリーをラップするのが確実です。

提案する実装ステップ

コードは書かずに調査のみという指示ですので、以下の手順が可能であることを報告します。

1. 環境変数の準備: .env にパスワードを設定（ビルド時に埋め込まれるため、真の機密性はなし）。
2. `AuthGate` コンポーネントの作成:
* パスワード入力フォームを持つ単純なReactコンポーネント。
* src/components/AuthGate/AuthGate.jsx
3. アプリへの適用:
* src/App.jsx の最上位で を使用。
4. Storybookへの適用:
* .storybook/preview.tsx の decorators
に認証ロジックを追加し、認証未済の場合はストーリーの代わりにログイン画面を表示する。

---

# Issue #19 詳細定義: クライアントサイド簡易認証（擬似ログイン）の実装

GitHub
Pages等の静的ホスティング環境において、簡易的なアクセス制限（Basic認証相当）を実現するための実装方針で
す。
サーバーサイド認証が利用できないため、Reactコンポーネントによる「擬似的なログインゲート」を実装します
。

1. 目的とスコープ
* 目的: 関係者以外からの閲覧を簡易的に防ぐ（URLを知っていてもパスワードが必要）。
* 対象: アプリケーション全体、および Storybook。
* セキュリティレベル:
低。パスワードはビルド後のJSに含まれるか、環境変数として埋め込まれるため、技術的な知識があれば突破
可能です。「鍵のかかっていないドアに『立入禁止』の札を下げる」程度の効果と想定してください。

2. 実装方針

##### A. 認証コンポーネント (AuthGate)
アプリケーションのコンテンツを表示する前に、パスワード入力を要求するラッパーコンポーネントを作成します
。

* 機能:
* sessionStorage を確認し、認証済みフラグがあれば子要素 (children) を表示。
* 未認証の場合はパスワード入力フォームを表示。
* パスワードが一致したら sessionStorage にフラグを保存し、リロードなしでコンテンツを表示。
* パスワード管理:
* 環境変数 VITE_BASIC_AUTH_PASSWORD で設定。
* 未設定の場合は認証をスキップ（開発環境の利便性のため）。

##### B. メインアプリへの適用 (src/App.jsx)
App コンポーネントの最上位、あるいは MainLayout をラップする形で AuthGate を配置します。

1 // イメージ
2 function App() {
3 return (
4
5
6 {/* ... アプリ本体 ... */}
7
8
9 );
10 }

##### C. Storybookへの適用 (.storybook/preview.tsx)
Storybook全体を保護するため、グローバルデコレーターとして認証ロジックを注入します。

1 // .storybook/preview.tsx イメージ
2 const withAuth = (Story) => {
3 const [isAuthenticated, setIsAuthenticated] = useState(false);
4
5 // ... 認証ロジック ...
6
7 if (!isAuthenticated) return setIsAuthenticated(true)} />;
8 return ;
9 };
10
11 export const decorators = [withAuth];

3. タスクリスト

- [ ] 環境変数 VITE_BASIC_AUTH_PASSWORD の定義と .env 設定
- [ ] src/components/AuthGate/ コンポーネントの実装
- [ ] UI: パスワード入力フィールド、送信ボタン
- [ ] Logic: 入力値検証、セッションストレージ管理
- [ ] src/App.jsx への AuthGate 導入
- [ ] .storybook/preview.tsx への認証デコレーター導入
- [ ] ビルドと動作確認（認証なし/あり の切り替え確認）

4. 注意点
* セキュリティ:
本格的な機密情報の保護には使用しないでください（APIキーや個人情報などがソースコードに含まれる場合、
この認証では守れません）。
* UX:
ページをリロードしたりタブを閉じたりすると、セッションストレージがクリアされ、再ログインが必要にな
る場合があります（localStorage
に変更すれば永続化可能ですが、セキュリティリスクは高まります）。今回は
sessionStorage（タブを閉じるまで有効）を推奨します。

Start by reading src/App.jsx, .storybook/preview.tsx, and the existing component structure to confirm where application and Storybook content are mounted. Then inspect the proposed src/components/AuthGate/AuthGate.jsx entry point and the VITE_BASIC_AUTH_PASSWORD configuration. Done means both targets consistently gate content, sessionStorage behavior works, and authenticated and unauthenticated builds are verified.

Written by the indexing model from the issue text.