Overview
The frontend is a blank placeholder (<div>HomePage</div>). Before any UI can be built, an API client layer must exist so components can make authenticated requests to the NestJS backend. Without a shared client, every component would duplicate auth header logic, and silent token refresh would need to be reimplemented everywhere.
Background
The NestJS backend runs at http://localhost:6004 (configurable via NEXT_PUBLIC_API_URL env var). The backend uses JWT access tokens (short-lived) and refresh tokens (stored as an httpOnly cookie or returned in the response body).
Files to create:
frontend/lib/api.ts — axios instance with base URL and interceptors
Client setup:
- Base URL from
NEXT_PUBLIC_API_URL env
- Request interceptor: attach access token from Zustand store (or localStorage) as
Authorization: Bearer {token} header
- Response interceptor: on 401, call
POST /api/auth/refresh to get a new access token, then retry the original request once
- On refresh failure (401 again), call
logout() from the Zustand auth store and redirect to /login
Acceptance Criteria
Overview
The frontend is a blank placeholder (
<div>HomePage</div>). Before any UI can be built, an API client layer must exist so components can make authenticated requests to the NestJS backend. Without a shared client, every component would duplicate auth header logic, and silent token refresh would need to be reimplemented everywhere.Background
The NestJS backend runs at
http://localhost:6004(configurable viaNEXT_PUBLIC_API_URLenv var). The backend uses JWT access tokens (short-lived) and refresh tokens (stored as an httpOnly cookie or returned in the response body).Files to create:
frontend/lib/api.ts— axios instance with base URL and interceptorsClient setup:
NEXT_PUBLIC_API_URLenvAuthorization: Bearer {token}headerPOST /api/auth/refreshto get a new access token, then retry the original request oncelogout()from the Zustand auth store and redirect to/loginAcceptance Criteria
frontend/lib/api.tsNEXT_PUBLIC_API_URLenvironment variableAuthorizationheader when a token is present/login