Keycloakが使用できないときにメールとパスワードでの認証を追加

[TkymHrt]

概要

Keycloakが使用できない場合の対応として、メールアドレスとパスワードによる認証機能を追加しました。
（Cloudflare Access 使うならいらないのか？それだとKeycloakくん解雇ってこと？？？）
（NUTFES-Accountの活用も含めて検討しないとコストになりそう）

実装詳細

認証システムの拡張

• NextAuth設定の変更: [...nextauth].tsでCredentialsプロバイダーを追加
• 環境変数による認証モード切り替え: AUTH_MODE環境変数でkeycloak/credentialsを選択
• フォールバック機能: Keycloak環境変数が不足している場合、自動的にCredentials認証に切り替え

セキュリティ対策

• bcryptjsライブラリ導入: パスワードのハッシュ化に使用（ストレッチング回数12回）
• 複数管理者対応: ADMIN_USERS環境変数で複数のメール:ハッシュペアを設定可能
• 入力検証: メールアドレス形式チェックとパスワード必須チェック

UI/UX改善

• ログインフォーム追加: Credentials認証時の専用ログインフォーム
• Buttonコンポーネント拡張: disabledとfullWidthプロパティを追加
• レスポンシブデザイン: モバイル対応のログインフォーム
• エラーハンドリング: 認証失敗時の適切なエラーメッセージ表示

設定ファイル更新

• 環境変数追加: 開発環境用の認証設定をadmin.envに追加
• TypeScript設定: moduleResolutionをbundlerに更新

画面スクリーンショット等

Credentials認証モード時のログイン画面

• 管理ページにアクセスすると、メールアドレスとパスワードの入力フォームが表示される
• 認証失敗時は「メールアドレスまたはパスワードが違います」のエラーメッセージを表示
• ログイン中は「ログイン中...」の状態表示

テスト項目

認証機能テスト

• Keycloak認証が正常に動作すること（既存機能の回帰テスト）
• Credentials認証でログインできること
• 不正なメールアドレス・パスワードでログインが拒否されること
• 環境変数AUTH_MODE=credentials時にCredentialsログインフォームが表示されること
• 環境変数AUTH_MODE=keycloakかつKeycloak設定不備時にCredentialsにフォールバックすること

UI/UX テスト

• ログインフォームのデザインが適切に表示されること
• モバイル端末でレスポンシブ表示が正常に動作すること
• ログアウト機能が正常に動作すること
• 認証なしで管理画面にアクセスした場合、適切にログイン画面にリダイレクトされること

セキュリティテスト

• bcryptでハッシュ化されたパスワードが正しく検証されること
• セッション管理が適切に動作すること
• 複数管理者アカウント（ADMIN_USERS形式）が正常に動作すること

備考

パスワードハッシュの生成方法

1. 単一管理者の場合

# 1. bcryptjsをインストール（グローバルまたはプロジェクト内）
npm install -g bcryptjs
# または
cd view-admin && npm install

# 2. パスワードハッシュを生成
node -e "console.log(require('bcryptjs').hashSync('your-actual-password', 12))"

# 例: パスワードが "admin123" の場合
node -e "console.log(require('bcryptjs').hashSync('admin123', 12))"
# 出力例: $2a$12$4tQJ4NfyN8ETiGhMepg4D.4cGY.28rW5Xyg.PovwVg/ypRc90MWIq

2. 複数管理者の場合

# 管理者1のハッシュ生成
node -e "console.log('admin1@example.com:' + require('bcryptjs').hashSync('password1', 12))"

# 管理者2のハッシュ生成
node -e "console.log('admin2@example.com:' + require('bcryptjs').hashSync('password2', 12))"

環境変数の設定方法

開発環境（admin.env）

# 認証モード設定
AUTH_MODE=credentials

# 単一管理者の場合
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD_HASH=$2a$12$4tQJ4NfyN8ETiGhMepg4D.4cGY.28rW5Xyg.PovwVg/ypRc90MWIq

# 複数管理者の場合（上記の代わりに以下を使用）
ADMIN_USERS=admin1@example.com:$2a$12$hash1,admin2@example.com:$2a$12$hash2

本番環境設定

admin-prod.envに追加

# Keycloakを優先、障害時のフォールバック用
AUTH_MODE=keycloak

# 緊急時アクセス用（Keycloak障害時のみ使用）
ADMIN_EMAIL=admin@nutfes.net
ADMIN_PASSWORD_HASH=$2a$12$[本番用のハッシュ値]