feat(m3): auth & user management with session, tests, and e2e

- Custom error classes (lib/errors.ts) and signed-cookie session (lib/auth/session.ts, HMAC-SHA256, httpOnly+sameSite=lax) - UserRepository + AuthService (bcrypt hashing, role/status checks, register/login/logout/getCurrentUser/updateProfile) - Auth helpers (getCurrentUser), user validator, API error handler - API routes: register (auto-login), login, logout, me, PATCH users/me, GET admin/migrations (admin-only guard) - middleware.ts redirects unauthenticated page access to /login - Screens: login (login/register toggle), profile, dashboard skeleton, home redirect - vitest: exclude e2e specs, setupFiles for SESSION_SECRET - playwright: run migrate before dev server, set SESSION_SECRET - Unit tests (UserRepository, AuthService, session), integration auth-flow, e2e auth.spec (register/login/logout/protected/401)
2026-06-25 00:36:42 +02:00
parent 40ff4fb909
commit 21b9f03e9d
27 changed files with 1578 additions and 10 deletions
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@ -0,0 +1,146 @@
+'use client';
+
+import { useEffect, useState, type FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import type { PublicUser } from '@/lib/auth/getCurrentUser';
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const [user, setUser] = useState<PublicUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [avatarUrl, setAvatarUrl] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/auth/me')
+      .then((res) => (res.ok ? res.json() : Promise.reject(res)))
+      .then((data: { user: PublicUser }) => {
+        setUser(data.user);
+        setName(data.user.name);
+        setEmail(data.user.email);
+        setAvatarUrl(data.user.avatarUrl ?? '');
+      })
+      .catch(() => router.push('/login'))
+      .finally(() => setLoading(false));
+  }, [router]);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setSaved(false);
+    const res = await fetch('/api/users/me', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, email, avatarUrl }),
+    });
+    if (res.ok) {
+      const data = (await res.json()) as { user: PublicUser };
+      setUser(data.user);
+      setSaved(true);
+    } else {
+      const data = (await res.json().catch(() => null)) as {
+        error?: { message?: string };
+      } | null;
+      setError(data?.error?.message ?? '更新に失敗しました');
+    }
+  }
+
+  async function onLogout() {
+    await fetch('/api/auth/logout', { method: 'POST' });
+    router.push('/login');
+  }
+
+  if (loading) {
+    return (
+      <main className="flex min-h-screen items-center justify-center">
+        <p>読み込み中...</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 p-8">
+      <div className="mx-auto max-w-md rounded-lg border bg-white p-8 shadow-sm">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">プロフィール</h1>
+          <button
+            type="button"
+            onClick={onLogout}
+            className="text-sm text-blue-600 hover:underline"
+          >
+            ログアウト
+          </button>
+        </div>
+
+        <form className="mt-6 space-y-4" onSubmit={onSubmit}>
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium">
+              表示名
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 w-full rounded border px-3 py-2"
+            />
+          </div>
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium">
+              メールアドレス
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 w-full rounded border px-3 py-2"
+            />
+          </div>
+          <div>
+            <label htmlFor="avatarUrl" className="block text-sm font-medium">
+              アイコン画像URL
+            </label>
+            <input
+              id="avatarUrl"
+              type="url"
+              value={avatarUrl}
+              onChange={(e) => setAvatarUrl(e.target.value)}
+              className="mt-1 w-full rounded border px-3 py-2"
+            />
+          </div>
+
+          {error && (
+            <p className="text-sm text-red-600" role="alert">
+              {error}
+            </p>
+          )}
+          {saved && (
+            <p className="text-sm text-green-600">プロフィールを更新しました</p>
+          )}
+
+          <button
+            type="submit"
+            className="w-full rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700"
+          >
+            保存
+          </button>
+        </form>
+
+        <button
+          type="button"
+          onClick={() => router.push('/dashboard')}
+          className="mt-4 w-full text-center text-sm text-blue-600 hover:underline"
+        >
+          ダッシュボードへ
+        </button>
+        <p className="mt-2 text-center text-xs text-gray-500">
+          ロール: {user?.role}
+        </p>
+      </div>
+    </main>
+  );
+}