From 48e3cc3517b70105c821cc0823f3cb3a01af55df Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 22 Jul 2024 13:10:52 -0300 Subject: [PATCH] refactor: Migrate autoLogin control variable to Zustand store (#2843) * migrate autoLogin control variable to zustand store * refactor: remove autoLogin control variable from authContext The autoLogin control variable was removed from the authContext file to simplify the code and improve maintainability. The functionality related to auto login was migrated to the zustand store. This change ensures consistency and better organization of the authentication logic. * [autofix.ci] apply automated fixes * refactor: remove autoLogin control variable from authContext * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> --- src/frontend/src/App.tsx | 4 +++- src/frontend/src/components/authAdminGuard/index.tsx | 5 ++++- src/frontend/src/components/authLoginGuard/index.tsx | 4 +++- src/frontend/src/components/headerComponent/index.tsx | 4 +++- src/frontend/src/contexts/authContext.tsx | 8 ++------ src/frontend/src/controllers/API/api.tsx | 4 +++- src/frontend/src/modals/apiModal/index.tsx | 4 +++- .../src/pages/SettingsPage/pages/GeneralPage/index.tsx | 4 ++-- src/frontend/src/types/contexts/auth.ts | 2 -- src/frontend/src/types/zustand/auth/index.ts | 1 - 10 files changed, 23 insertions(+), 17 deletions(-) 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;