diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 09f663fc5..067eea3c2 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -22,6 +22,7 @@ import useTrackLastVisitedPath from "./hooks/use-track-last-visited-path"; import Router from "./routes"; import { Case } from "./shared/components/caseComponent"; import useAlertStore from "./stores/alertStore"; +import useAuthStore from "./stores/authStore"; import { useDarkStore } from "./stores/darkStore"; import useFlowsManagerStore from "./stores/flowsManagerStore"; import { useFolderStore } from "./stores/foldersStore"; @@ -29,8 +30,9 @@ import { useFolderStore } from "./stores/foldersStore"; export default function App() { useTrackLastVisitedPath(); const isLoading = useFlowsManagerStore((state) => state.isLoading); - const { isAuthenticated, login, setUserData, setAutoLogin, getUser, logout } = + const { isAuthenticated, login, setUserData, getUser, logout } = useContext(AuthContext); + const setAutoLogin = useAuthStore((state) => state.setAutoLogin); const setLoading = useAlertStore((state) => state.setLoading); const refreshStars = useDarkStore((state) => state.refreshStars); const dark = useDarkStore((state) => state.dark); diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx index 96c404af3..2dc76ff58 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -1,11 +1,14 @@ +import useAuthStore from "@/stores/authStore"; import { useContext } from "react"; import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedAdminRoute = ({ children }) => { - const { isAdmin, isAuthenticated, logout, userData, autoLogin } = + const { isAdmin, isAuthenticated, logout, userData } = useContext(AuthContext); + const autoLogin = useAuthStore((state) => state.autoLogin); + if (!isAuthenticated) { logout(); } else if ((userData && !isAdmin) || autoLogin) { diff --git a/src/frontend/src/components/authLoginGuard/index.tsx b/src/frontend/src/components/authLoginGuard/index.tsx index ed12d0f54..97fe96f3c 100644 --- a/src/frontend/src/components/authLoginGuard/index.tsx +++ b/src/frontend/src/components/authLoginGuard/index.tsx @@ -1,9 +1,11 @@ +import useAuthStore from "@/stores/authStore"; import { useContext } from "react"; import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedLoginRoute = ({ children }) => { - const { isAuthenticated, autoLogin } = useContext(AuthContext); + const { isAuthenticated } = useContext(AuthContext); + const autoLogin = useAuthStore((state) => state.autoLogin); if (autoLogin === true) { window.location.replace("/"); diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index bcd169bac..ed034a778 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 useAuthStore from "@/stores/authStore"; import useAlertStore from "../../stores/alertStore"; import { useDarkStore } from "../../stores/darkStore"; import useFlowStore from "../../stores/flowStore"; @@ -34,7 +35,8 @@ export default function Header(): JSX.Element { const notificationCenter = useAlertStore((state) => state.notificationCenter); const location = useLocation(); - const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext); + const { logout, isAdmin, userData } = useContext(AuthContext); + const autoLogin = useAuthStore((state) => state.autoLogin); const navigate = useNavigate(); const removeFlow = useFlowsManagerStore((store) => store.removeFlow); diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 9fa875339..a47023949 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -3,6 +3,7 @@ import { LANGFLOW_API_TOKEN, LANGFLOW_AUTO_LOGIN_OPTION, } from "@/constants/constants"; +import useAuthStore from "@/stores/authStore"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { createContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -29,8 +30,6 @@ const initialValue: AuthContextType = { userData: null, setUserData: () => {}, authenticationErrorCount: 0, - autoLogin: false, - setAutoLogin: () => {}, setApiKey: () => {}, apiKey: null, storeApiKey: () => {}, @@ -50,7 +49,6 @@ export function AuthProvider({ children }): React.ReactElement { ); const [isAdmin, setIsAdmin] = useState(false); const [userData, setUserData] = useState(null); - const [autoLogin, setAutoLogin] = useState(false); const setLoading = useAlertStore((state) => state.setLoading); const [apiKey, setApiKey] = useState( cookies.get(LANGFLOW_API_TOKEN), @@ -104,7 +102,7 @@ export function AuthProvider({ children }): React.ReactElement { } async function logout() { - if (autoLogin) { + if (useAuthStore.getState().autoLogin) { return; } try { @@ -143,8 +141,6 @@ export function AuthProvider({ children }): React.ReactElement { setUserData, userData, authenticationErrorCount: 0, - setAutoLogin, - autoLogin, setApiKey, apiKey, storeApiKey, diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 11dcf971d..12a69264a 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -2,6 +2,7 @@ import { LANGFLOW_ACCESS_TOKEN, LANGFLOW_AUTO_LOGIN_OPTION, } 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"; @@ -19,8 +20,9 @@ const api: AxiosInstance = axios.create({ }); function ApiInterceptor() { + const autoLogin = useAuthStore((state) => state.autoLogin); const setErrorData = useAlertStore((state) => state.setErrorData); - let { accessToken, logout, authenticationErrorCount, autoLogin } = + let { accessToken, logout, authenticationErrorCount } = useContext(AuthContext); const cookies = new Cookies(); const setSaveLoading = useFlowsManagerStore((state) => state.setSaveLoading); diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx index 7971d8288..6916f06ea 100644 --- a/src/frontend/src/modals/apiModal/index.tsx +++ b/src/frontend/src/modals/apiModal/index.tsx @@ -4,6 +4,7 @@ import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; import { ReactNode, forwardRef, useContext, useEffect, useState } from "react"; // import "ace-builds/webpack-resolver"; +import useAuthStore from "@/stores/authStore"; import { cloneDeep } from "lodash"; import CodeTabsComponent from "../../components/codeTabsComponent"; import IconComponent from "../../components/genericIconComponent"; @@ -51,7 +52,8 @@ const ApiModal = forwardRef( const tweaksList = useTweaksStore((state) => state.tweaksList); const isThereTweaks = Object.keys(tweaksCode).length > 0; const [activeTweaks, setActiveTweaks] = useState(false); - const { autoLogin } = useContext(AuthContext); + const autoLogin = useAuthStore((state) => state.autoLogin); + const [open, setOpen] = mySetOpen !== undefined && myOpen !== undefined ? [myOpen, mySetOpen] diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx index 20598ba31..c932bb38e 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx @@ -1,5 +1,6 @@ import { usePostAddApiKey } from "@/controllers/API/queries/api-keys"; import { useGetProfilePicturesQuery } from "@/controllers/API/queries/files"; +import useAuthStore from "@/stores/authStore"; import { useContext, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import { CONTROL_PATCH_USER_STATE } from "../../../../constants/constants"; @@ -31,8 +32,6 @@ export const GeneralPage = () => { CONTROL_PATCH_USER_STATE, ); - const { autoLogin } = useContext(AuthContext); - const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const { userData, setUserData } = useContext(AuthContext); @@ -41,6 +40,7 @@ export const GeneralPage = () => { const hasApiKey = useStoreStore((state) => state.hasApiKey); const loadingApiKey = useStoreStore((state) => state.loadingApiKey); const { password, cnfPassword, profilePicture, apikey } = inputState; + const autoLogin = useAuthStore((state) => state.autoLogin); const { storeApiKey } = useContext(AuthContext); const setHasApiKey = useStoreStore((state) => state.updateHasApiKey); diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index 00550a69a..44bde014a 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -10,8 +10,6 @@ export type AuthContextType = { userData: Users | null; setUserData: (userData: Users | null) => void; authenticationErrorCount: number; - autoLogin: boolean; - setAutoLogin: (autoLogin: boolean) => void; apiKey: string | null; setApiKey: (apiKey: string | null) => void; storeApiKey: (apiKey: string) => void; diff --git a/src/frontend/src/types/zustand/auth/index.ts b/src/frontend/src/types/zustand/auth/index.ts index 942155c2e..70bbb131c 100644 --- a/src/frontend/src/types/zustand/auth/index.ts +++ b/src/frontend/src/types/zustand/auth/index.ts @@ -18,7 +18,6 @@ export interface AuthStoreType { setAuthenticationErrorCount: (authenticationErrorCount: number) => void; logout: () => Promise; // setUserData: (userData: Users | null) => void; - // setAutoLogin: (autoLogin: boolean) => void; // setIsAdmin: (isAdmin: boolean) => void; // setApiKey: (apiKey: string | null) => void;