diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index ff83341a7c3..8eebda19a60 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -11,6 +11,7 @@ import { } from "../../constants/constants"; import { AuthContext } from "../../contexts/authContext"; +import { useLogout } from "@/controllers/API/queries/auth"; import useAuthStore from "@/stores/authStore"; import useAlertStore from "../../stores/alertStore"; import { useDarkStore } from "../../stores/darkStore"; @@ -35,10 +36,13 @@ export default function Header(): JSX.Element { const notificationCenter = useAlertStore((state) => state.notificationCenter); const location = useLocation(); - const { logout, userData } = useContext(AuthContext); + const { userData } = useContext(AuthContext); const isAdmin = useAuthStore((state) => state.isAdmin); const autoLogin = useAuthStore((state) => state.autoLogin); + const { mutate: mutationLogout } = useLogout(); + const logout = useAuthStore((state) => state.logout); + const navigate = useNavigate(); const removeFlow = useFlowsManagerStore((store) => store.removeFlow); const hasStore = useStoreStore((state) => state.hasStore); @@ -83,6 +87,17 @@ export default function Header(): JSX.Element { LOCATIONS_TO_RETURN.some((path) => location.pathname.includes(path)) && visitedFlowPathBefore(); + const handleLogout = () => { + mutationLogout(undefined, { + onSuccess: () => { + logout(); + }, + onError: (error) => { + console.error(error); + }, + }); + }; + return (
@@ -275,9 +290,7 @@ export default function Header(): JSX.Element { { - logout(); - }} + onClick={handleLogout} > Log Out diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 211b69dc5a7..d6a89901c29 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -1,18 +1,15 @@ -import { - LANGFLOW_ACCESS_TOKEN, - LANGFLOW_AUTO_LOGIN_OPTION, -} from "@/constants/constants"; +import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants"; import useAuthStore from "@/stores/authStore"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios"; import { useContext, useEffect } from "react"; import { Cookies } from "react-cookie"; -import { renewAccessToken } from "."; import { BuildStatus } from "../../constants/enums"; import { AuthContext } from "../../contexts/authContext"; import useAlertStore from "../../stores/alertStore"; import useFlowStore from "../../stores/flowStore"; import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests"; +import { useLogout, useRefreshAccessToken } from "./queries/auth"; // Create a new Axios instance const api: AxiosInstance = axios.create({ @@ -22,10 +19,12 @@ const api: AxiosInstance = axios.create({ function ApiInterceptor() { const autoLogin = useAuthStore((state) => state.autoLogin); const setErrorData = useAlertStore((state) => state.setErrorData); - let { accessToken, logout, authenticationErrorCount } = - useContext(AuthContext); + let { accessToken, authenticationErrorCount } = useContext(AuthContext); const cookies = new Cookies(); const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading); + const { mutate: mutationLogout } = useLogout(); + const { mutate: mutationRenewAccessToken } = useRefreshAccessToken(); + const logout = useAuthStore((state) => state.logout); useEffect(() => { const interceptor = api.interceptors.response.use( @@ -127,7 +126,14 @@ function ApiInterceptor() { if (authenticationErrorCount > 3) { authenticationErrorCount = 0; - logout(); + mutationLogout(undefined, { + onSuccess: () => { + logout(); + }, + onError: (error) => { + console.error(error); + }, + }); return false; } @@ -137,10 +143,17 @@ function ApiInterceptor() { async function tryToRenewAccessToken(error: AxiosError) { try { if (window.location.pathname.includes("/login")) return; - await renewAccessToken(); + mutationRenewAccessToken({}); } catch (error) { clearBuildVerticesState(error); - logout(); + mutationLogout(undefined, { + onSuccess: () => { + logout(); + }, + onError: (error) => { + console.error(error); + }, + }); return Promise.reject("Authentication error"); } } diff --git a/src/frontend/src/controllers/API/queries/auth/index.ts b/src/frontend/src/controllers/API/queries/auth/index.ts index ea8f60cd738..1860d904ce9 100644 --- a/src/frontend/src/controllers/API/queries/auth/index.ts +++ b/src/frontend/src/controllers/API/queries/auth/index.ts @@ -2,9 +2,9 @@ export * from "./use-delete-users"; export * from "./use-get-autologin"; export * from "./use-get-user"; export * from "./use-get-users-page"; -export * from "./use-patch-logout"; export * from "./use-patch-reset-password"; export * from "./use-patch-update-user"; export * from "./use-post-add-user"; export * from "./use-post-login-user"; +export * from "./use-post-logout"; export * from "./use-post-refresh-access"; diff --git a/src/frontend/src/controllers/API/queries/auth/use-patch-logout.ts b/src/frontend/src/controllers/API/queries/auth/use-post-logout.ts similarity index 94% rename from src/frontend/src/controllers/API/queries/auth/use-patch-logout.ts rename to src/frontend/src/controllers/API/queries/auth/use-post-logout.ts index 893d752d173..df0005f57a4 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-patch-logout.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-post-logout.ts @@ -22,7 +22,7 @@ export const useLogout: useMutationFunctionType = ( if (autoLogin) { return {}; } - const res = await api.patch(`${getURL("LOGOUT")}`); + const res = await api.post(`${getURL("LOGOUT")}`); return res.data; } diff --git a/src/frontend/src/controllers/API/queries/auth/use-post-refresh-access.ts b/src/frontend/src/controllers/API/queries/auth/use-post-refresh-access.ts index 5a6c344964e..6a71cd03c24 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-post-refresh-access.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-post-refresh-access.ts @@ -15,7 +15,7 @@ export const useRefreshAccessToken: useMutationFunctionType = ( } const mutation: UseMutationResult = mutate( - ["useRefrshAccessToken"], + ["useRefreshAccessToken"], refreshAccess, options, ); diff --git a/src/frontend/src/stores/authStore.ts b/src/frontend/src/stores/authStore.ts index cc193130d8a..9ac3f9b419d 100644 --- a/src/frontend/src/stores/authStore.ts +++ b/src/frontend/src/stores/authStore.ts @@ -2,19 +2,9 @@ import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { AuthStoreType } from "@/types/zustand/auth"; -import { useNavigate } from "react-router-dom"; import Cookies from "universal-cookie"; import { create } from "zustand"; -import { - getGlobalVariables, - getLoggedUser, - requestLogout, -} from "../controllers/API"; -import useAlertStore from "../stores/alertStore"; import { useFolderStore } from "../stores/foldersStore"; -import { useGlobalVariablesStore } from "../stores/globalVariablesStore/globalVariables"; -import { useStoreStore } from "../stores/storeStore"; -import { Users } from "../types/api"; const cookies = new Cookies();