🔐 認証システムの設計と実装

[Wanko-IT]

📋 タスク概要

優先度: 高
ステータス: 保留中
依存関係: プロジェクトリポジトリのセットアップ

🎯 説明

Firebase AuthenticationまたはAuth0を使用した包括的なユーザー管理機能を持つユーザー認証システムを実装します。

🏗️ 実装詳細

認証プロバイダーの選択肢

1. Firebase Authentication（推奨）

   • Google、GitHub、メール/パスワードログイン
   • 組み込みユーザー管理
   • React/Next.jsとの簡単な統合

2. Auth0（代替案）

   • エンタープライズグレードの認証
   • ソーシャルログインプロバイダー
   • 高度なセキュリティ機能

核となる機能

• ユーザー登録/ログイン

  • メール/パスワード認証
  • ソーシャルログイン（Google、GitHub、Discord）
  • メール確認
  • パスワードリセット機能

• セッション管理

  • JWTトークン処理
  • リフレッシュトークンローテーション
  • 期限切れ時の自動ログアウト

• ユーザープロフィール

  • プロフィール情報管理
  • アバターアップロード機能
  • アカウント設定

フロントエンド実装

// components/auth/AuthProvider.tsx
import { createContext, useContext, useEffect, useState } from 'react'
import { auth } from '@/lib/firebase'
import { User } from 'firebase/auth'

interface AuthContext {
  user: User | null
  loading: boolean
  login: (email: string, password: string) => Promise<void>
  logout: () => Promise<void>
  register: (email: string, password: string) => Promise<void>
}

const AuthContext = createContext<AuthContext | undefined>(undefined)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user)
      setLoading(false)
    })
    return unsubscribe
  }, [])

  return (
    <AuthContext.Provider value={{ user, loading, login, logout, register }}>
      {children}
    </AuthContext.Provider>
  )
}

バックエンドAPIエンドポイント

POST /api/auth/register      # ユーザー登録
POST /api/auth/login         # ログイン
POST /api/auth/logout        # ログアウト
POST /api/auth/refresh       # トークンリフレッシュ
GET  /api/auth/profile       # プロフィール取得
PUT  /api/auth/profile       # プロフィール更新
POST /api/auth/forgot-password  # パスワード忘れ
POST /api/auth/reset-password   # パスワードリセット

データベーススキーマ

-- ユーザーテーブル
CREATE TABLE users (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  firebase_uid VARCHAR UNIQUE NOT NULL,
  email VARCHAR UNIQUE NOT NULL,
  display_name VARCHAR,
  avatar_url VARCHAR,
  subscription_tier VARCHAR DEFAULT 'free',
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- ユーザーセッション
CREATE TABLE user_sessions (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id),
  refresh_token VARCHAR NOT NULL,
  expires_at TIMESTAMP NOT NULL,
  created_at TIMESTAMP DEFAULT NOW()
);

🧪 テスト戦略

1. ユニットテスト

   • 認証フロー関数
   • トークン検証ロジック
   • ユーザープロフィール操作

2. 統合テスト

   • 完全なログイン/ログアウトフロー
   • トークンリフレッシュメカニズム
   • パスワードリセットプロセス

3. E2Eテスト

   • ユーザー登録ワークフロー
   • ソーシャルログイン統合
   • 保護されたルートアクセス

📚 完了条件

• Firebase/Auth0統合設定完了
• メール確認付きユーザー登録
• ログイン/ログアウト機能
• ソーシャルログインプロバイダー（Google、GitHub）
• パスワードリセット機能
• JWTトークン管理
• 保護されたルートの実装
• ユーザープロフィール管理
• セッション永続化
• 包括的なエラーハンドリング
• セキュリティベストプラクティスの実装

🔗 関連タスク

有効化するタスク:

• ファイルストレージと管理システム
• 使用量追跡と課金システム
• チームおよびエンタープライズ機能

📝 セキュリティ考慮事項

• HTTPS強制
• CSRF保護
• 認証エンドポイントのレート制限
• 安全なトークンストレージ
• 入力検証とサニタイゼーション
• 失敗回数に基づくアカウントロックアウト