Shadboard starter-kit (Next.js 15 + React 19 + shadcn/ui + Tailwind 4) Sprint 4.a — Admin Dashboard: - Auth: NextAuth.js v5, login page, middleware, token rotation - Dashboard: KPI cards, Recharts stock chart, quick actions - Members: TanStack Table (search/sort/paginate), add/edit forms - Distributions: multi-step form, real-time quota check, history - Stock: batch management, recall dialog, bar chart - Reports: monthly/member-list/recall, PDF/CSV download, preview Sprint 4.b — Member Portal: - Separate route group with top-nav layout (mobile-first) - Quota dashboard with radial SVG progress indicators - Distribution history with month filter - Profile/settings with password change Cross-cutting: - i18n: German (default) + English via next-intl - Dark + light mode (next-themes, user-togglable) - Playwright E2E tests (6/6 green) - Docker multi-stage build (node:22-alpine) - API proxy via Next.js rewrites Tech: Next.js 15.2.8, React 19, Tailwind 4, NextAuth v5, TanStack Table, Recharts, Zod, React Hook Form, Playwright
3.3 KiB
E2E Funktionscheck — Sprint 4 Phases 1-3
Date: 2026-06-12 Server: localhost:3000 (Next.js dev) Backend: Mock on :8080 returning 401 (real backend not available) Test Framework: Playwright 1.60.0, Chromium
Results
| # | Test | Status | Time | Notes |
|---|---|---|---|---|
| 1 | Login page loads | ✅ PASS | 3.5s | Page renders correctly |
| 2 | Auth redirect works | ✅ PASS | 3.3s | /dashboard → 307 redirect to /login in 115ms |
| 3 | Login error handling | ✅ PASS | 7.4s | Invalid credentials show error feedback |
| 4 | 404 page | ✅ PASS | 3.3s | Unknown routes redirect to login (auth required) |
| 5 | No console errors | ✅ PASS | 3.2s | Zero critical JS errors on accessible pages |
| 6 | Visual structure | ✅ PASS | 3.3s | Login page layout renders correctly |
Total: 6/6 passed (25.2s)
Fix Applied — Auth Middleware Deadlock
The previous run had all 6 tests failing due to a frontend deadlock. The fix addressed:
Changes Made
-
src/lib/auth.ts— AddedfetchWithTimeout()helper with 5s AbortController timeoutauthorize()now catches fetch errors (timeout/unreachable) and returnsnullgracefullyjwtcallback token refresh also uses the timeout wrapper- Added
trustHost: trueto NextAuth config (prevents host header validation issues)
-
src/middleware.ts— Updated matcher to explicitly exclude auth pages- Added
/register,/forgot-passwordto public routes list - Matcher regex now excludes:
login|register|forgot-password|api/auth|_next/static|_next/image|favicon.ico|images
- Added
-
.env.local— AddedAUTH_URL=http://localhost:3000- Prevents NextAuth self-resolution issues in dev
Root Cause
The Next-Auth v5 auth() middleware wrapped ALL routes. When the backend at :8080 wasn't
reachable (or returned unexpected responses), the middleware's session resolution would hang
for the full TCP timeout (60s), making even public pages like /login unreachable.
Verification
# Login page loads fast
$ curl -s -o /dev/null -w "%{http_code} in %{time_total}s" http://localhost:3000/login
200 in 0.129s
# Protected route redirects instantly (no hang)
$ curl -s -o /dev/null -w "%{http_code} in %{time_total}s" http://localhost:3000/dashboard
307 in 0.115s
Console Errors
- Server-side:
CredentialsSigninerror logged when test 03 submits invalid credentials — expected behavior - Client-side: Zero critical JavaScript errors detected on accessible pages
Environment
- Node.js: Running (confirmed)
- Next.js: 15.2.8 (dev mode)
- Next-Auth: v5 (beta)
- Playwright: 1.60.0
- Mock Backend: Node.js HTTP server on :8080 (401 for all requests)
- Postgres: Running in Docker (cannamanage-db-local)
Conclusion
Frontend health: ✅ OPERATIONAL — all public routes load without backend dependency
The auth middleware deadlock has been resolved. The frontend now gracefully degrades when the backend is unavailable — login page renders, protected routes redirect to login quickly, and login attempts against the mock backend fail fast with an error message.