feat(fe): implement authentication and user profile management (!1) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(fe): implement authentication and user profile management

Description

Implement the Authentication & User Profile flow on the frontend application, adhering to the Claymorphism design guidelines and integrating seamlessly with the backend APIs.

Key Changes

Dependencies: Added axios, zustand, @tanstack/react-query, zod, react-hook-form, and @hookform/resolvers.
API Client & interceptor (src/lib/api-client.ts): Configured Axios with withCredentials: true and added response interceptors to handle token refresh automatically via HttpOnly cookies upon receiving a 401 Unauthorized response.
State Store (src/stores/auth-store.ts): Created a Zustand global store to handle user authentication state (user, isAuthenticated, and initialization flags).
Guarded Navigation: Developed AuthGuard (src/components/shared/AuthGuard.tsx) to protect private screens and updated src/components/layout.tsx to handle initial authentication checks on app boot.
Input Refactoring: Refactored the core Input component to support React.forwardRef for seamless validation registration with react-hook-form.
Claymorphism Screens: Created the following screens styled with dual-tone soft shadows and chunky borders:
- Login / Register: Handles validation (such as enforcing @gmail.com validation).
- Forgot / Reset Password: Requests and verifies UUID password reset tokens.
- User Profile & Sessions: Handles updating personal details, changing passwords, and listing/revoking active devices sessions (via /auth/sessions).

## Description
Implement the **Authentication & User Profile** flow on the frontend application, adhering to the Claymorphism design guidelines and integrating seamlessly with the backend APIs.

### Key Changes
- **Dependencies**: Added `axios`, `zustand`, `@tanstack/react-query`, `zod`, `react-hook-form`, and `@hookform/resolvers`.
- **API Client & interceptor** (`src/lib/api-client.ts`): Configured Axios with `withCredentials: true` and added response interceptors to handle token refresh automatically via HttpOnly cookies upon receiving a `401 Unauthorized` response.
- **State Store** (`src/stores/auth-store.ts`): Created a Zustand global store to handle user authentication state (`user`, `isAuthenticated`, and initialization flags).
- **Guarded Navigation**: Developed `AuthGuard` (`src/components/shared/AuthGuard.tsx`) to protect private screens and updated `src/components/layout.tsx` to handle initial authentication checks on app boot.
- **Input Refactoring**: Refactored the core `Input` component to support `React.forwardRef` for seamless validation registration with `react-hook-form`.
- **Claymorphism Screens**: Created the following screens styled with dual-tone soft shadows and chunky borders:
  - **Login / Register**: Handles validation (such as enforcing `@gmail.com` validation).
  - **Forgot / Reset Password**: Requests and verifies UUID password reset tokens.
  - **User Profile & Sessions**: Handles updating personal details, changing passwords, and listing/revoking active devices sessions (via `/auth/sessions`).