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();