[Customer Portal][FE][Web] fix: Auth UX – idle timeout, token refresh error handling, upload cleanup

apps/customer-portal/webapp/package.json

@@ -29,6 +29,7 @@
     "prismjs": "^1.30.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-idle-timer": "^5.7.2",
     "react-router": "^7.1.5",
     "zod": "^4.3.6"
   },

apps/customer-portal/webapp/src/App.tsx

@@ -27,6 +27,7 @@ import CaseDetailsPage from "@pages/CaseDetailsPage";
 import NoveraChatPage from "@pages/NoveraChatPage";
 import CreateCasePage from "@pages/CreateCasePage";
 import AppLayout from "@layouts/AppLayout";
+import { AuthApiProvider } from "@context/AuthApiContext";
 import { ErrorBannerProvider } from "@context/error-banner/ErrorBannerContext";
 import { SuccessBannerProvider } from "@context/success-banner/SuccessBannerContext";
 import { LoaderProvider } from "@context/linear-loader/LoaderContext";
@@ -36,10 +37,11 @@ import AuthGuard from "./AuthGuard";
 export default function App(): JSX.Element {
   return (
     <BrowserRouter>
-      <LoaderProvider>
-        <ErrorBannerProvider>
-          <SuccessBannerProvider>
-          <Routes>
+      <AuthApiProvider>
+        <LoaderProvider>
+          <ErrorBannerProvider>
+            <SuccessBannerProvider>
+            <Routes>
           {/* Public Route */}
           <Route path="/login" element={<LoginPage />} />
 
@@ -111,6 +113,7 @@ export default function App(): JSX.Element {
           </SuccessBannerProvider>
         </ErrorBannerProvider>
       </LoaderProvider>
+      </AuthApiProvider>
     </BrowserRouter>
   );
 }

apps/customer-portal/webapp/src/api/useGetCaseAttachments.ts

@@ -20,7 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockCaseAttachments } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import type { CaseAttachmentsResponse } from "@models/responses";
 
 export interface UseGetCaseAttachmentsOptions {
@@ -41,7 +41,8 @@ export default function useGetCaseAttachments(
   options?: UseGetCaseAttachmentsOptions,
 ): UseQueryResult<CaseAttachmentsResponse, Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
   const { isMockEnabled } = useMockConfig();
   const { limit = 50, offset = 0, enabled: optionsEnabled = true } = options ?? {};
 
@@ -75,15 +76,11 @@ export default function useGetCaseAttachments(
           throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
         }
 
-        const idToken = await getIdToken();
         const params = new URLSearchParams();
         params.set("limit", String(limit));
         params.set("offset", String(offset));
         const requestUrl = `${baseUrl}/cases/${caseId}/attachments?${params.toString()}`;
-        const response = await fetch(requestUrl, {
-          method: "GET",
-          headers: addApiHeaders(idToken),
-        });
+        const response = await fetchFn(requestUrl, { method: "GET" });
 
         if (!response.ok) {
           throw new Error(

apps/customer-portal/webapp/src/api/useGetCaseComments.ts

@@ -20,7 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockCaseComments } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import type { CaseCommentsResponse } from "@models/responses";
 
 export interface UseGetCaseCommentsOptions {
@@ -42,7 +42,8 @@ export default function useGetCaseComments(
   options?: UseGetCaseCommentsOptions,
 ): UseQueryResult<CaseCommentsResponse, Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
   const { isMockEnabled } = useMockConfig();
   const { offset = 0, limit = 20 } = options ?? {};
 
@@ -77,16 +78,12 @@ export default function useGetCaseComments(
           throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
         }
 
-        const idToken = await getIdToken();
         const params = new URLSearchParams();
         if (offset !== undefined) params.set("offset", String(offset));
         if (limit !== undefined) params.set("limit", String(limit));
         const query = params.toString();
         const requestUrl = `${baseUrl}/cases/${caseId}/comments${query ? `?${query}` : ""}`;
-        const response = await fetch(requestUrl, {
-          method: "GET",
-          headers: addApiHeaders(idToken),
-        });
+        const response = await fetchFn(requestUrl, { method: "GET" });
 
         if (!response.ok) {
           throw new Error(

apps/customer-portal/webapp/src/api/useGetCaseDetails.ts

@@ -20,7 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockCaseDetails } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import type { CaseDetails } from "@models/responses";
 
 /**
@@ -35,7 +35,8 @@ export default function useGetCaseDetails(
   caseId: string,
 ): UseQueryResult<CaseDetails, Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
   const { isMockEnabled } = useMockConfig();
 
   return useQuery<CaseDetails, Error>({
@@ -56,12 +57,8 @@ export default function useGetCaseDetails(
           throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
         }
 
-        const idToken = await getIdToken();
         const requestUrl = `${baseUrl}/cases/${caseId}`;
-        const response = await fetch(requestUrl, {
-          method: "GET",
-          headers: addApiHeaders(idToken),
-        });
+        const response = await fetchFn(requestUrl, { method: "GET" });
 
         if (!response.ok) {
           throw new Error(

apps/customer-portal/webapp/src/api/useGetCasesFilters.ts

@@ -20,7 +20,7 @@ import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { mockCaseMetadata } from "@models/mockData";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import type { CaseMetadataResponse } from "@models/responses";
 
 /**
@@ -33,7 +33,8 @@ export default function useGetCasesFilters(
   projectId: string,
 ): UseQueryResult<CaseMetadataResponse, Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
   const { isMockEnabled } = useMockConfig();
 
   return useQuery<CaseMetadataResponse, Error>({
@@ -53,7 +54,6 @@ export default function useGetCasesFilters(
       }
 
       try {
-        const idToken = await getIdToken();
         const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
 
         if (!baseUrl) {
@@ -62,10 +62,7 @@ export default function useGetCasesFilters(
 
         const requestUrl = `${baseUrl}/projects/${projectId}/cases/filters`;
 
-        const response = await fetch(requestUrl, {
-          method: "GET",
-          headers: addApiHeaders(idToken),
-        });
+        const response = await fetchFn(requestUrl, { method: "GET" });
 
         if (!response.ok) {
           throw new Error(

apps/customer-portal/webapp/src/api/useGetChatHistory.ts

@@ -20,7 +20,7 @@ import { getMockChatHistory } from "@models/mockFunctions";
 import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import type { ChatHistoryResponse } from "@models/responses";
 
 /**
@@ -33,7 +33,8 @@ export function useGetChatHistory(
   projectId: string,
 ): UseQueryResult<ChatHistoryResponse, Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
   const { isMockEnabled } = useMockConfig();
 
   return useQuery<ChatHistoryResponse, Error>({
@@ -54,7 +55,6 @@ export function useGetChatHistory(
       }
 
       try {
-        const idToken = await getIdToken();
         const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
 
         if (!baseUrl) {
@@ -63,10 +63,7 @@ export function useGetChatHistory(
 
         const requestUrl = `${baseUrl}/projects/${projectId}/chat-history`;
 
-        const response = await fetch(requestUrl, {
-          method: "GET",
-          headers: addApiHeaders(idToken),
-        });
+        const response = await fetchFn(requestUrl, { method: "GET" });
 
         logger.debug(
           `[useGetChatHistory] Response status: ${response.status}`,

apps/customer-portal/webapp/src/api/useGetDeployments.ts

@@ -20,7 +20,7 @@ import { getMockDeployments } from "@models/mockFunctions";
 import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import type { DeploymentsResponse } from "@models/responses";
 
 /**
@@ -33,7 +33,8 @@ export function useGetDeployments(
   projectId: string,
 ): UseQueryResult<DeploymentsResponse, Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const fetchFn = useAuthApiClient();
   const { isMockEnabled } = useMockConfig();
 
   return useQuery<DeploymentsResponse, Error>({
@@ -54,7 +55,6 @@ export function useGetDeployments(
       }
 
       try {
-        const idToken = await getIdToken();
         const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
 
         if (!baseUrl) {
@@ -63,10 +63,7 @@ export function useGetDeployments(
 
         const requestUrl = `${baseUrl}/projects/${projectId}/deployments`;
 
-        const response = await fetch(requestUrl, {
-          method: "GET",
-          headers: addApiHeaders(idToken),
-        });
+        const response = await fetchFn(requestUrl, { method: "GET" });
 
         logger.debug(`[useGetDeployments] Response status: ${response.status}`);
 

apps/customer-portal/webapp/src/api/useGetDeploymentsProducts.ts

@@ -16,15 +16,17 @@
 
 import { useQuery, type UseQueryResult } from "@tanstack/react-query";
 import { useAsgardeo } from "@asgardeo/react";
+import { useAuthApiClient } from "@context/AuthApiContext";
 import { useMockConfig } from "@providers/MockConfigProvider";
 import { useLogger } from "@hooks/useLogger";
 import { ApiQueryKeys, API_MOCK_DELAY } from "@constants/apiConstants";
-import { addApiHeaders } from "@utils/apiUtils";
 import { getMockDeploymentProducts } from "@models/mockFunctions";
 import type { DeploymentProductItem } from "@models/responses";
 
+export type FetchFn = (url: string, init?: RequestInit) => Promise<Response>;
+
 export interface FetchDeploymentProductsOptions {
-  getIdToken: () => Promise<string>;
+  fetchFn: FetchFn;
   isMockEnabled: boolean;
 }
 
@@ -33,21 +35,20 @@ export interface FetchDeploymentProductsOptions {
  * useQueries when fetching products for multiple deployments.
  *
  * @param {string} deploymentId - The deployment ID.
- * @param {FetchDeploymentProductsOptions} options - getIdToken and isMockEnabled.
+ * @param {FetchDeploymentProductsOptions} options - fetchFn and isMockEnabled.
  * @returns {Promise<DeploymentProductItem[]>} Deployment products array.
  */
 export async function fetchDeploymentProducts(
   deploymentId: string,
   options: FetchDeploymentProductsOptions,
 ): Promise<DeploymentProductItem[]> {
-  const { getIdToken, isMockEnabled } = options;
+  const { fetchFn, isMockEnabled } = options;
 
   if (isMockEnabled) {
     await new Promise((resolve) => setTimeout(resolve, API_MOCK_DELAY));
     return getMockDeploymentProducts(deploymentId);
   }
 
-  const idToken = await getIdToken();
   const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
 
   if (!baseUrl) {
@@ -56,10 +57,7 @@ export async function fetchDeploymentProducts(
 
   const requestUrl = `${baseUrl}/deployments/${deploymentId}/products`;
 
-  const response = await fetch(requestUrl, {
-    method: "GET",
-    headers: addApiHeaders(idToken),
-  });
+  const response = await fetchFn(requestUrl, { method: "GET" });
 
   if (!response.ok) {
     throw new Error(
@@ -83,8 +81,9 @@ export function useGetDeploymentsProducts(
   deploymentId: string,
 ): UseQueryResult<DeploymentProductItem[], Error> {
   const logger = useLogger();
-  const { getIdToken, isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
   const { isMockEnabled } = useMockConfig();
+  const fetchFn = useAuthApiClient();
 
   return useQuery<DeploymentProductItem[], Error>({
     queryKey: [ApiQueryKeys.DEPLOYMENT_PRODUCTS, deploymentId, isMockEnabled],
@@ -93,7 +92,7 @@ export function useGetDeploymentsProducts(
         `Fetching deployment products for deployment ID: ${deploymentId}, mock: ${isMockEnabled}`,
       );
       const data = await fetchDeploymentProducts(deploymentId, {
-        getIdToken,
+        fetchFn,
         isMockEnabled,
       });
       logger.debug(