Files
goodgo-platform/apps/web/lib/auth-store.ts
Ho Ngoc Hai ad8577e2bd
Some checks failed
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 1m5s
Deploy / Build API Image (push) Failing after 27s
Deploy / Build Web Image (push) Failing after 12s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 16s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 57s
Deploy / Deploy to Staging (push) Has been cancelled
Deploy / Rollback Staging (push) Has been cancelled
Deploy / Smoke Test Production (push) Has been cancelled
Deploy / Rollback Production (push) Has been cancelled
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 11s
Deploy / Smoke Test Staging (push) Has been cancelled
Deploy / Deploy to Production (push) Has been cancelled
Security Scanning / Trivy Scan — Web Image (push) Failing after 46s
Security Scanning / Trivy Filesystem Scan (push) Has been cancelled
Security Scanning / Security Gate (push) Has been cancelled
Security Scanning / Trivy Scan — AI Services Image (push) Has been cancelled
fix(web): stop flooding console with 401 ApiError during initial load
Five compounding problems caused hundreds of "Console ApiError:
Unauthorized" entries on every load of /dashboard (and friends) while
unauthenticated or while the auth cookie was stale:

1. QueryClient had `throwOnError: true` as a blanket default, so every
   401 from any react-query hook propagated to the nearest error
   boundary instead of staying in the query's `error` state. That
   also invited React to re-render and re-fire the boundary multiple
   times per failing query.

2. React Query retried all failures 3 times with exponential backoff,
   so a single 401 became four requests. 401 isn't fixable by retry,
   so this is just noise.

3. Dashboard layout rendered `<NotificationBell />` unconditionally,
   which polled /notifications/unread-count on mount even when no user
   was signed in → 401 on every mount.

4. Dashboard + Admin layouts had no redirect-to-login guard, so
   protected queries (market-report, heatmap, admin/dashboard, …) all
   mounted and fired against the API before the user ever saw the
   login screen.

5. Admin layout waited on `user` but had no way to distinguish "store
   still initialising" from "user genuinely absent" — so an expired
   cookie left the page stuck on a spinner while the same 401 storm
   played out in the background.

Fixes
- query-client.ts: `throwOnError` and `retry` are now predicates. Only
  5xx / network errors bubble to boundaries and are retried; 4xx
  (auth, validation, not-found) stay in query error state so the
  component can render an empty/auth placeholder.
- auth-store.ts: new `isInitialized` flag set in a finally block at
  the end of `initialize()`. Downstream guards use it to distinguish
  "still booting" from "definitely logged out".
- (dashboard)/layout.tsx: redirects to /login?next=<path> once
  initialised and unauthenticated, and renders a lightweight loading
  screen in the meantime so child queries never mount.
- (admin)/layout.tsx: same guard. Non-ADMIN logged-in users still
  bounce to /dashboard.
- notification-bell.tsx: short-circuits `fetchUnreadCount` when
  `isAuthenticated` is false.

Verified in dev: visiting /vi/dashboard unauthenticated now redirects
to /login?redirect=/dashboard with zero console errors and no
/analytics/… calls to the backend.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-19 09:41:35 +07:00

125 lines
3.5 KiB
TypeScript

import { create } from 'zustand';
import { ApiError } from './api-client';
import { authApi, type UserProfile, type LoginPayload, type RegisterPayload } from './auth-api';
function hasAuthCookie(): boolean {
if (typeof document === 'undefined') return false;
return document.cookie.includes('goodgo_authenticated=1');
}
interface AuthState {
user: UserProfile | null;
isAuthenticated: boolean;
isInitialized: boolean;
isLoading: boolean;
error: string | null;
login: (data: LoginPayload) => Promise<void>;
register: (data: RegisterPayload) => Promise<void>;
handleOAuthCallback: (accessToken: string, refreshToken: string, expiresIn?: number) => Promise<void>;
logout: () => Promise<void>;
refreshToken: () => Promise<boolean>;
fetchProfile: () => Promise<void>;
initialize: () => Promise<void>;
clearError: () => void;
}
export const useAuthStore = create<AuthState>((set, get) => ({
user: null,
isAuthenticated: false,
isInitialized: false,
isLoading: false,
error: null,
login: async (data) => {
set({ isLoading: true, error: null });
try {
await authApi.login(data);
set({ isAuthenticated: true, isLoading: false });
await get().fetchProfile();
} catch (e) {
const message = e instanceof ApiError ? e.message : 'Đăng nhập thất bại';
set({ isLoading: false, error: message });
throw e;
}
},
register: async (data) => {
set({ isLoading: true, error: null });
try {
await authApi.register(data);
set({ isAuthenticated: true, isLoading: false });
await get().fetchProfile();
} catch (e) {
const message = e instanceof ApiError ? e.message : 'Đăng ký thất bại';
set({ isLoading: false, error: message });
throw e;
}
},
handleOAuthCallback: async (accessToken, refreshToken, expiresIn) => {
set({ isLoading: true, error: null });
try {
await authApi.exchangeToken(accessToken, refreshToken, expiresIn);
set({ isAuthenticated: true, isLoading: false });
await get().fetchProfile();
} catch (e) {
const message = e instanceof ApiError ? e.message : 'Đăng nhập OAuth thất bại';
set({ isLoading: false, error: message });
throw e;
}
},
logout: async () => {
try {
await authApi.logout();
} catch {
// Clear state even if API call fails
}
set({ user: null, isAuthenticated: false, error: null });
},
refreshToken: async () => {
try {
await authApi.refresh();
set({ isAuthenticated: true });
return true;
} catch {
set({ user: null, isAuthenticated: false });
return false;
}
},
fetchProfile: async () => {
try {
const user = await authApi.getProfile();
set({ user, isAuthenticated: true });
} catch (e) {
if (e instanceof ApiError && e.status === 401) {
const refreshed = await get().refreshToken();
if (refreshed) {
try {
const user = await authApi.getProfile();
set({ user, isAuthenticated: true });
} catch {
set({ user: null, isAuthenticated: false });
}
}
}
}
},
initialize: async () => {
try {
if (!hasAuthCookie()) return;
set({ isAuthenticated: true });
await get().fetchProfile();
} finally {
// Always mark as initialized so downstream guards stop showing spinners.
set({ isInitialized: true });
}
},
clearError: () => set({ error: null }),
}));