feat(client): implement silent refresh token, swagger types, and zod schemas (!3) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(client): implement silent refresh token, swagger types, and zod schemas

Features & Enhancements: HTTP Client Silent Refresh, Swagger Types & Zod Schemas

Overview

This pull request completes the core networking, data modeling, and form validation foundations of the frontend application in full alignment with the backend Express/Prisma/Swagger API specifications and @AGENTS.md guidelines. It also resolves a React hydration mismatch issue on the root layout.

Key Changes

1. HTTP Client & Authentication Interceptor (`src/lib/api-client.ts`)

Credentials Support: Configured Axios instance with withCredentials: true to seamlessly transmit and receive HttpOnly cookies (accessToken, refreshToken).
Silent Refresh Token Mechanism:
- Automatically captures 401 Unauthorized responses via Axios response interceptors.
- Implemented a concurrency-safe failedQueue to hold simultaneous requests during active token refreshing and prevent parallel duplicate refresh calls.
- Invokes POST /auth/refresh using cookie credentials with a localStorage fallback.
- Automatically updates the Authorization header and replays all pending requests upon success.
- Added infinite loop prevention for authentication endpoints (/auth/login, /auth/refresh, /auth/register).
- Gracefully purges cached tokens and dispatches an auth:unauthorized event if the refresh token expires or fails.

2. TypeScript Types Matching Backend Specifications (`src/types/`)

auth.ts: Complete models for UserRole, User, AuthTokens, MeDto, Role, Permission, and UserUsageDto (quota vs usage tracking).
crawl-job.ts: Defines 8 job statuses (PENDING through EXPIRED), CrawlMode, CrawlPage, CrawlAsset, CrawlJobLog, and query/diff DTOs.
crawl-schedule.ts: Models for automated scheduling frequencies (DAILY, WEEKLY, MONTHLY, CUSTOM), timezones, and cron execution configurations.
extraction-template.ts: Interfaces for CSS selector extraction rules and domain mapping.
export.ts: Types for export files (CSV, JSON, XLSX, MARKDOWN, ZIP) and status tracking.
dashboard.ts: Aggregated metric definitions across jobs, pages, schedules, and exports.
index.ts: Unified barrel exports ensuring backwards compatibility with existing components.

3. Zod Validation Schemas (`src/schemas/`)

auth.schema.ts: Strict validation for Login, Register (strong password rules + confirmation refine), Update Profile, and Change Password.
crawl-job.schema.ts: Validates crawl task creation with custom superRefine handling both standard startUrl crawling and bulk URL_LIST modes.
crawl-schedule.schema.ts: Enforces valid 5-part cron expressions when CUSTOM frequency is selected.
extraction-template.schema.ts: Validates CSS selectors and domain regex patterns.
export.schema.ts: Validates format selection and query parameters.
index.ts: Centralized exports for all schemas and inferred TypeScript types.

4. Hydration & Code Quality Fixes

Root Layout (src/app/layout.tsx): Added suppressHydrationWarning to the <body> element to suppress hydration mismatches caused by browser extensions injecting DOM attributes (such as ColorZilla's cz-shortcut-listen="true").
ESLint & React 19 Compliance: Replaced synchronous setState in effects with useSyncExternalStore and lazy state initializers; ignored .agents/** directory in ESLint configuration.

## Features & Enhancements: HTTP Client Silent Refresh, Swagger Types & Zod Schemas

### Overview
This pull request completes the core networking, data modeling, and form validation foundations of the frontend application in full alignment with the backend Express/Prisma/Swagger API specifications and `@AGENTS.md` guidelines. It also resolves a React hydration mismatch issue on the root layout.

---

### Key Changes

#### 1. HTTP Client & Authentication Interceptor (`src/lib/api-client.ts`)
- **Credentials Support**: Configured Axios instance with `withCredentials: true` to seamlessly transmit and receive HttpOnly cookies (`accessToken`, `refreshToken`).
- **Silent Refresh Token Mechanism**:
  - Automatically captures `401 Unauthorized` responses via Axios response interceptors.
  - Implemented a concurrency-safe `failedQueue` to hold simultaneous requests during active token refreshing and prevent parallel duplicate refresh calls.
  - Invokes `POST /auth/refresh` using cookie credentials with a `localStorage` fallback.
  - Automatically updates the `Authorization` header and replays all pending requests upon success.
  - Added infinite loop prevention for authentication endpoints (`/auth/login`, `/auth/refresh`, `/auth/register`).
  - Gracefully purges cached tokens and dispatches an `auth:unauthorized` event if the refresh token expires or fails.

#### 2. TypeScript Types Matching Backend Specifications (`src/types/`)
- **`auth.ts`**: Complete models for `UserRole`, `User`, `AuthTokens`, `MeDto`, `Role`, `Permission`, and `UserUsageDto` (quota vs usage tracking).
- **`crawl-job.ts`**: Defines 8 job statuses (`PENDING` through `EXPIRED`), `CrawlMode`, `CrawlPage`, `CrawlAsset`, `CrawlJobLog`, and query/diff DTOs.
- **`crawl-schedule.ts`**: Models for automated scheduling frequencies (`DAILY`, `WEEKLY`, `MONTHLY`, `CUSTOM`), timezones, and cron execution configurations.
- **`extraction-template.ts`**: Interfaces for CSS selector extraction rules and domain mapping.
- **`export.ts`**: Types for export files (`CSV`, `JSON`, `XLSX`, `MARKDOWN`, `ZIP`) and status tracking.
- **`dashboard.ts`**: Aggregated metric definitions across jobs, pages, schedules, and exports.
- **`index.ts`**: Unified barrel exports ensuring backwards compatibility with existing components.

#### 3. Zod Validation Schemas (`src/schemas/`)
- **`auth.schema.ts`**: Strict validation for Login, Register (strong password rules + confirmation refine), Update Profile, and Change Password.
- **`crawl-job.schema.ts`**: Validates crawl task creation with custom `superRefine` handling both standard `startUrl` crawling and bulk `URL_LIST` modes.
- **`crawl-schedule.schema.ts`**: Enforces valid 5-part cron expressions when `CUSTOM` frequency is selected.
- **`extraction-template.schema.ts`**: Validates CSS selectors and domain regex patterns.
- **`export.schema.ts`**: Validates format selection and query parameters.
- **`index.ts`**: Centralized exports for all schemas and inferred TypeScript types.

#### 4. Hydration & Code Quality Fixes
- **Root Layout (`src/app/layout.tsx`)**: Added `suppressHydrationWarning` to the `<body>` element to suppress hydration mismatches caused by browser extensions injecting DOM attributes (such as ColorZilla's `cz-shortcut-listen="true"`).
- **ESLint & React 19 Compliance**: Replaced synchronous `setState` in effects with `useSyncExternalStore` and lazy state initializers; ignored `.agents/**` directory in ESLint configuration.