fix: LC-313 logout fix (#205)

* feat: update authentication and error handling in ApiClient and queryClient

* test: update test config

* feat: add requestManager for aborting requests and update onSuccess function

* refactor: remove unused error types and BaseErrorBoundary component

* fix: handle request cancellation and remove isSilentError function

* fix: update request interceptor to use requestManager for aborting requests and handle logout and token refresh

apps/web/app/api/api-client.ts

@@ -1,38 +1,54 @@
 import { useAuthStore } from "~/modules/Auth/authStore";
 import { API } from "./generated-api";
 
+export const requestManager = {
+  controller: new AbortController(),
+
+  abortAll() {
+    this.controller.abort();
+  },
+};
+
 export const ApiClient = new API({
   baseURL: import.meta.env.VITE_API_URL,
   secure: true,
   withCredentials: true,
 });
 
+ApiClient.instance.interceptors.request.use((config) => {
+  const isAuthEndpoint =
+    config.url?.includes("/login") ||
+    config.url?.includes("/refresh") ||
+    config.url?.includes("/register");
+
+  if (!isAuthEndpoint && !useAuthStore.getState().isLoggedIn) {
+    config.signal = requestManager.controller.signal;
+  }
+
+  return config;
+});
+
 ApiClient.instance.interceptors.response.use(
   (response) => response,
   async (error) => {
-    const originalRequest = error.config;
-
-    const isLoginRequest = originalRequest.url.includes("/login");
-    const isRefreshRequest = originalRequest.url.includes("/refresh");
-
-    if (error.response?.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-
-      if (
-        !isLoginRequest &&
-        !isRefreshRequest &&
-        useAuthStore.getState().isLoggedIn
-      ) {
-        try {
-          await ApiClient.api.authControllerRefreshTokens();
-          return ApiClient.instance(originalRequest);
-        } catch (refreshError) {
-          useAuthStore.getState().setLoggedIn(false);
-          return Promise.reject(refreshError);
-        }
-      }
+    if (error.config?.url?.includes("/logout")) {
+      return Promise.reject(error);
     }
 
+    if (
+      error.response?.status === 401 &&
+      !error.config._retry &&
+      useAuthStore.getState().isLoggedIn
+    ) {
+      error.config._retry = true;
+      try {
+        await ApiClient.api.authControllerRefreshTokens();
+        return ApiClient.instance(error.config);
+      } catch {
+        requestManager.abortAll();
+        return Promise.reject(error);
+      }
+    }
     return Promise.reject(error);
   }
 );

apps/web/app/api/mutations/useLogoutUser.ts

@@ -1,6 +1,6 @@
 import { useAuthStore } from "./../../modules/Auth/authStore";
 import { useMutation } from "@tanstack/react-query";
-import { ApiClient } from "../api-client";
+import { requestManager, ApiClient } from "../api-client";
 import { useToast } from "~/components/ui/use-toast";
 import { AxiosError } from "axios";
 import { queryClient } from "../queryClient";
@@ -13,13 +13,15 @@ export function useLogoutUser() {
 
   return useMutation({
     mutationFn: async () => {
+      requestManager.abortAll();
+
       const response = await ApiClient.api.authControllerLogout();
       setLoggedIn(false);
       return response.data;
     },
     onSuccess: () => {
       queryClient.clear();
-      navigate("/");
+      navigate("/auth/login");
     },
     onError: (error) => {
       if (error instanceof AxiosError) {

apps/web/app/api/queryClient.ts

@@ -1,10 +1,26 @@
 import { QueryClient } from "@tanstack/react-query";
-import { isAxiosError } from "axios";
+import { isAxiosError, isCancel } from "axios";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retry(failureCount, error) {
+      retry(failureCount, error: unknown) {
+        if (isCancel(error)) return false;
+
+        if (isAxiosError(error)) {
+          if (error.response?.status === 401) return false;
+        }
+
+        if (failureCount >= 3) return false;
+
+        return true;
+      },
+      throwOnError: (error) => !isCancel(error),
+    },
+    mutations: {
+      retry(failureCount, error: unknown) {
+        if (isCancel(error)) return false;
+
         if (isAxiosError(error)) {
           if (error.response?.status === 401) return false;
         }
@@ -13,6 +29,7 @@ export const queryClient = new QueryClient({
 
         return true;
       },
+      throwOnError: (error) => !isCancel(error),
     },
   },
 });

apps/web/app/utils/mocks/handlers/auth.ts

@@ -34,4 +34,10 @@ export const handlers = [
   http.get("/api/auth/current-user", () => {
     return HttpResponse.json(currentUser);
   }),
+  http.post("/api/auth/refresh", () => {
+    return HttpResponse.json({
+      accessToken: "mock-access-token",
+      refreshToken: "mock-refresh-token",
+    });
+  }),
 ];

apps/web/app/utils/mocks/handlers/course.ts

@@ -57,6 +57,7 @@ const availableCoursesHandler = withSearchParams(
 );
 
 export const handlers = [
+  http.get("/api/courses", availableCoursesHandler),
   http.get("/api/courses/available-courses", availableCoursesHandler),
   http.get("/api/courses/get-student-courses", () => {
     return HttpResponse.json(studentCourses);