From 9903b4408fbf1fa9da07a35a7370490e48c406fe Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:16:26 -0300 Subject: [PATCH] refactor: change logout and refresh token to use useQuery (#2999) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ (headerComponent/index.tsx): Add functionality to handle user logout in the header component 🔧 (api.tsx): Add useLogout and useRefreshAccessToken functions to handle user logout and access token refresh 🔧 (use-post-logout.ts): Implement useLogout function to handle user logout functionality 🔧 (use-post-refresh-access.ts): Implement useRefreshAccessToken function to handle access token refresh 🔧 (authStore.ts): Remove unnecessary imports and update the authStore functionality for user logout and access token management. Co-authored-by: anovazzi1 --- .../src/components/headerComponent/index.tsx | 21 +++++++++--- src/frontend/src/controllers/API/api.tsx | 33 +++++++++++++------ .../src/controllers/API/queries/auth/index.ts | 2 +- ...use-patch-logout.ts => use-post-logout.ts} | 2 +- .../queries/auth/use-post-refresh-access.ts | 2 +- src/frontend/src/stores/authStore.ts | 10 ------ 6 files changed, 43 insertions(+), 27 deletions(-) rename src/frontend/src/controllers/API/queries/auth/{use-patch-logout.ts => use-post-logout.ts} (94%) 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();