diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx index d6b4bda42..680c11ee1 100644 --- a/src/frontend/src/components/authGuard/index.tsx +++ b/src/frontend/src/components/authGuard/index.tsx @@ -1,24 +1,16 @@ import { LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS, LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV, - LANGFLOW_AUTO_LOGIN_OPTION, } from "@/constants/constants"; -import { - useLogout, - useRefreshAccessToken, -} from "@/controllers/API/queries/auth"; +import { useRefreshAccessToken } from "@/controllers/API/queries/auth"; +import { CustomNavigate } from "@/customization/components/custom-navigate"; import useAuthStore from "@/stores/authStore"; import { useEffect } from "react"; -import { Cookies } from "react-cookie"; export const ProtectedRoute = ({ children }) => { const isAuthenticated = useAuthStore((state) => state.isAuthenticated); - const hasToken = !!localStorage.getItem(LANGFLOW_AUTO_LOGIN_OPTION); - - const cookies = new Cookies(); - const refreshToken = cookies.get("refresh_token"); const { mutate: mutateRefresh } = useRefreshAccessToken(); - const { mutate: mutationLogout } = useLogout(); + const autoLogin = useAuthStore((state) => state.autoLogin); useEffect(() => { const envRefreshTime = LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV; @@ -29,19 +21,17 @@ export const ProtectedRoute = ({ children }) => { : envRefreshTime; const intervalFunction = () => { - if (isAuthenticated) { - mutateRefresh({ refresh_token: refreshToken }); - } + mutateRefresh(); }; - const intervalId = setInterval(intervalFunction, accessTokenTimer * 1000); - intervalFunction(); - - return () => clearInterval(intervalId); + if (!autoLogin && isAuthenticated) { + const intervalId = setInterval(intervalFunction, accessTokenTimer * 1000); + intervalFunction(); + return () => clearInterval(intervalId); + } }, [isAuthenticated]); - - if (!isAuthenticated && hasToken) { - mutationLogout(); + if (!isAuthenticated && !autoLogin) { + return ; } else { return children; } diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index ce04a80bc..f5c20314b 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -145,21 +145,18 @@ function ApiInterceptor() { error.config.headers[key] = value; } } - mutationRenewAccessToken( - {}, - { - onSuccess: async (data) => { - authenticationErrorCount = 0; - await remakeRequest(error); - authenticationErrorCount = 0; - }, - onError: (error) => { - console.error(error); - mutationLogout(); - return Promise.reject("Authentication error"); - }, + mutationRenewAccessToken(undefined, { + onSuccess: async () => { + authenticationErrorCount = 0; + await remakeRequest(error); + authenticationErrorCount = 0; }, - ); + onError: (error) => { + console.error(error); + mutationLogout(); + return Promise.reject("Authentication error"); + }, + }); } async function clearBuildVerticesState(error) { diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts b/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts index 9900e3169..e22a70d52 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts @@ -1,4 +1,5 @@ import { AuthContext } from "@/contexts/authContext"; +import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate"; import useAuthStore from "@/stores/authStore"; import { AxiosError } from "axios"; import { useContext } from "react"; @@ -23,7 +24,8 @@ export const useGetAutoLogin: useQueryFunctionType = ( const setAutoLogin = useAuthStore((state) => state.setAutoLogin); const isAuthenticated = useAuthStore((state) => state.isAuthenticated); const isLoginPage = location.pathname.includes("login"); - const { mutate: mutationLogout } = useLogout(); + const navigate = useCustomNavigate(); + const { mutateAsync: mutationLogout } = useLogout(); async function getAutoLoginFn(): Promise { try { @@ -41,8 +43,8 @@ export const useGetAutoLogin: useQueryFunctionType = ( setAutoLogin(false); if (!isLoginPage) { if (!isAuthenticated) { - mutationLogout(); - throw new Error("Unauthorized"); + await mutationLogout(); + navigate("/login"); } else { getUser(); } diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts index e35276c94..628adf3a0 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts @@ -1,9 +1,5 @@ -import { keepPreviousData, UseMutationResult } from "@tanstack/react-query"; -import { - useMutationFunctionType, - useQueryFunctionType, - Users, -} from "../../../../types/api"; +import { UseMutationResult } from "@tanstack/react-query"; +import { useMutationFunctionType, Users } from "../../../../types/api"; import { api } from "../../api"; import { getURL } from "../../helpers/constants"; import { UseRequestProcessor } from "../../services/request-processor"; @@ -35,7 +31,7 @@ export const useGetUsers: useMutationFunctionType = ( getUsersQueryParams, any, getUsersQueryParams - > = mutate(["useRefreshAccessToken"], getUsers, options); + > = mutate(["useGetUsers"], getUsers, options); return mutation; }; diff --git a/src/frontend/src/controllers/API/queries/auth/use-post-logout.ts b/src/frontend/src/controllers/API/queries/auth/use-post-logout.ts index c5b2d6596..80aa0c15a 100644 --- a/src/frontend/src/controllers/API/queries/auth/use-post-logout.ts +++ b/src/frontend/src/controllers/API/queries/auth/use-post-logout.ts @@ -1,7 +1,6 @@ import useAuthStore from "@/stores/authStore"; import { useMutationFunctionType } from "@/types/api"; -import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate"; import { api } from "../../api"; import { getURL } from "../../helpers/constants"; import { UseRequestProcessor } from "../../services/request-processor"; @@ -10,7 +9,6 @@ export const useLogout: useMutationFunctionType = ( options?, ) => { const { mutate } = UseRequestProcessor(); - const navigate = useCustomNavigate(); const logout = useAuthStore((state) => state.logout); async function logoutUser(): Promise { @@ -25,7 +23,6 @@ export const useLogout: useMutationFunctionType = ( const mutation = mutate(["useLogout"], logoutUser, { onSuccess: () => { logout(); - navigate("/login"); }, onError: (error) => { console.error(error); 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 6a71cd03c..a72d810ee 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 @@ -1,24 +1,31 @@ -import { LoginType, changeUser, useMutationFunctionType } from "@/types/api"; -import { UseMutationResult } from "@tanstack/react-query"; +import { LANGFLOW_REFRESH_TOKEN } from "@/constants/constants"; +import { useMutationFunctionType } from "@/types/api"; +import { Cookies } from "react-cookie"; import { api } from "../../api"; import { getURL } from "../../helpers/constants"; import { UseRequestProcessor } from "../../services/request-processor"; +interface IRefreshAccessToken { + access_token: string; + refresh_token: string; + token_type: string; +} -export const useRefreshAccessToken: useMutationFunctionType = ( - options?, -) => { +export const useRefreshAccessToken: useMutationFunctionType< + undefined, + undefined | void, + IRefreshAccessToken +> = (options?) => { const { mutate } = UseRequestProcessor(); + const cookies = new Cookies(); + + async function refreshAccess(): Promise { + const res = await api.post(`${getURL("REFRESH")}`); + cookies.set(LANGFLOW_REFRESH_TOKEN, res.data.refresh_token, { path: "/" }); - async function refreshAccess(): Promise { - const res = await api.post(`${getURL("REFRESH")}`); return res.data; } - const mutation: UseMutationResult = mutate( - ["useRefreshAccessToken"], - refreshAccess, - options, - ); + const mutation = mutate(["useRefreshAccessToken"], refreshAccess, options); return mutation; }; diff --git a/src/frontend/src/modals/userManagementModal/index.tsx b/src/frontend/src/modals/userManagementModal/index.tsx index 594bf30e4..f4ebaf791 100644 --- a/src/frontend/src/modals/userManagementModal/index.tsx +++ b/src/frontend/src/modals/userManagementModal/index.tsx @@ -42,7 +42,6 @@ export default function UserManagementModal({ }: inputHandlerEventType): void { setInputState((prev) => ({ ...prev, [name]: value })); } - console.log(data); useEffect(() => { if (open) {