Merge pull request #604 from Hexastack/fix/logout-unnecessarily-reloads-page

fix: logout

frontend/src/contexts/auth.context.tsx

@@ -1,30 +1,27 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+
 import getConfig from "next/config";
 import { useRouter } from "next/router";
-import { useState, useEffect, createContext, ReactNode } from "react";
+import { createContext, ReactNode, useEffect, useState } from "react";
 import {
-  useQueryClient,
-  useQuery,
   QueryObserverResult,
   RefetchOptions,
   UseMutateFunction,
+  useQuery,
+  useQueryClient,
 } from "react-query";
 
 import { Progress } from "@/app-components/displays/Progress";
 import { useLogout } from "@/hooks/entities/auth-hooks";
 import { useApiClient } from "@/hooks/useApiClient";
-import {
+import { CURRENT_USER_KEY, PUBLIC_PATHS } from "@/hooks/useAuth";
-  useLogoutRedirection,
-  CURRENT_USER_KEY,
-  PUBLIC_PATHS,
-} from "@/hooks/useAuth";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
@@ -55,7 +52,6 @@ const { publicRuntimeConfig } = getConfig();
 
 export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   const router = useRouter();
-  const { logoutRedirection } = useLogoutRedirection();
   const [search, setSearch] = useState("");
   const hasPublicPath = PUBLIC_PATHS.includes(router.pathname);
   const { i18n, t } = useTranslate();
@@ -67,10 +63,8 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
   };
   const { mutateAsync: logoutSession } = useLogout();
   const logout = async () => {
-    queryClient.removeQueries([CURRENT_USER_KEY]);
     updateLanguage(publicRuntimeConfig.lang.default);
     await logoutSession();
-    logoutRedirection();
     toast.success(t("message.logout_success"));
   };
   const authRedirection = async (isAuthenticated: boolean) => {
@@ -79,8 +73,10 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
       const nextPage = redirect && decodeURIComponent(redirect);
 
       if (nextPage?.startsWith("/")) {
-        router.push(nextPage);
+        await router.push(nextPage);
-      } else if (hasPublicPath) router.push(RouterType.HOME);
+      } else if (hasPublicPath) {
+        await router.push(RouterType.HOME);
+      }
     }
   };
   const { apiClient } = useApiClient();

frontend/src/hooks/entities/auth-hooks.ts

@@ -6,7 +6,6 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
-
 import { useEffect } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 
@@ -22,7 +21,7 @@ import { useSocket } from "@/websocket/socket-hooks";
 
 import { useFind } from "../crud/useFind";
 import { useApiClient } from "../useApiClient";
-import { useAuth } from "../useAuth";
+import { CURRENT_USER_KEY, useAuth, useLogoutRedirection } from "../useAuth";
 
 export const useLogin = (
   options?: Omit<
@@ -51,8 +50,10 @@ export const useLogout = (
     "mutationFn"
   >,
 ) => {
+  const queryClient = useQueryClient();
   const { apiClient } = useApiClient();
   const { socket } = useSocket();
+  const { logoutRedirection } = useLogoutRedirection();
 
   return useMutation({
     ...options,
@@ -61,7 +62,10 @@ export const useLogout = (
 
       return await apiClient.logout();
     },
-    onSuccess: () => {},
+    onSuccess: async () => {
+      queryClient.removeQueries([CURRENT_USER_KEY]);
+      await logoutRedirection();
+    },
   });
 };
 

frontend/src/hooks/useApiClient.ts

@@ -45,7 +45,7 @@ export const useAxiosInstance = () => {
     // Response Interceptor
     instance.interceptors.response.use(
       (resp) => resp,
-      (error) => {
+      async (error) => {
         if (!error.response) {
           // Optionally redirect to an error page or show a notification
           toast.error(t("message.network_error"));
@@ -53,7 +53,7 @@ export const useAxiosInstance = () => {
           return Promise.reject(new Error("Network error"));
         }
         if (error.response.status === 401) {
-          logoutRedirection(true);
+          await logoutRedirection(true);
         }
 
         return Promise.reject(error.response.data);