lcbp3/specs/99-archives/history/2025-12-06_p1-frontend-plan.md

P1-Frontend: Setup & Authentication Plan

Goal

Finalize frontend setup and implement robust Authentication connecting to the NestJS Backend (P2-2 Refresh Token support).

Status Analysis

• P1-1 (Setup): ✅ Project structure, Tailwind, Shadcn/UI are already present.
• P1-2 (Auth): 🚧 lib/auth.ts exists but lacks refreshToken rotation logic. Types need verification.

Proposed Changes

1. Type Definitions (types/next-auth.d.ts)

• Add refreshToken, accessTokenExpires (optional), and error field to Session and JWT types.

2. Auth Configuration (lib/auth.ts)

• Update authorize to store refresh_token from Backend response.
• Implement refreshToken rotation logic in jwt callback:
  • Check if token is expired.
  • If expired, call backend POST /auth/refresh.
  • Update accessToken and refreshToken.
  • Handle refresh errors (Force sign out).

3. Login Page (app/(auth)/login/page.tsx)

• Polish Error Handling (Use Toasts instead of alerts).
• Ensure redirect works correctly.

4. Middleware (middleware.ts)

• Verify middleware protects dashboard routes.

Verification Plan

1. Manual Test: Login with valid credentials.
2. Inspection: Check LocalStorage/Cookies (NextAuth session cookie).
3. Token Rotation: Wait for short access token expiry (if configurable) or manually invalidate, and verify seamless refresh.