From b21d378eb4558db6e7387397741ce385ad7cc8b5 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 19 Jul 2024 16:57:49 -0300 Subject: [PATCH 1/5] migrate autoLogin control variable to zustand store --- 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 | 5 ++++- src/frontend/src/controllers/API/api.tsx | 5 ++++- src/frontend/src/modals/apiModal/index.tsx | 4 +++- .../src/pages/SettingsPage/pages/GeneralPage/index.tsx | 4 +++- src/frontend/src/types/zustand/auth/index.ts | 1 - 8 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 09f663fc5db..22d8dd49ec2 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -25,12 +25,14 @@ import useAlertStore from "./stores/alertStore"; import { useDarkStore } from "./stores/darkStore"; import useFlowsManagerStore from "./stores/flowsManagerStore"; import { useFolderStore } from "./stores/foldersStore"; +import useAuthStore from "./stores/authStore"; 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 96c404af350..6a6b3416e89 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -1,11 +1,14 @@ import { useContext } from "react"; import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; +import useAuthStore from "@/stores/authStore"; 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 ed12d0f542a..9a31f78d17c 100644 --- a/src/frontend/src/components/authLoginGuard/index.tsx +++ b/src/frontend/src/components/authLoginGuard/index.tsx @@ -1,9 +1,11 @@ import { useContext } from "react"; import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; +import useAuthStore from "@/stores/authStore"; 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 bcd169bacd6..56d8cb85a57 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -29,12 +29,15 @@ import { } from "../ui/dropdown-menu"; import { Separator } from "../ui/separator"; import MenuBar from "./components/menuBar"; +import useAuthStore from "@/stores/authStore"; 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/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 11dcf971d5b..70e60f66747 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -12,6 +12,8 @@ import { AuthContext } from "../../contexts/authContext"; import useAlertStore from "../../stores/alertStore"; import useFlowStore from "../../stores/flowStore"; import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests"; +import useAuthStore from "@/stores/authStore"; + // Create a new Axios instance const api: AxiosInstance = axios.create({ @@ -19,8 +21,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 7971d8288e8..0f9e793a7cb 100644 --- a/src/frontend/src/modals/apiModal/index.tsx +++ b/src/frontend/src/modals/apiModal/index.tsx @@ -28,6 +28,7 @@ import getTabsOrder from "./utils/get-tabs-order"; import { getValue } from "./utils/get-value"; import getWidgetCode from "./utils/get-widget-code"; import { createTabsArray } from "./utils/tabs-array"; +import useAuthStore from "@/stores/authStore"; const ApiModal = forwardRef( ( @@ -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 20598ba31c7..3892259636b 100644 --- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx @@ -19,6 +19,7 @@ import PasswordFormComponent from "./components/PasswordForm"; import ProfilePictureFormComponent from "./components/ProfilePictureForm"; import useGetProfilePictures from "./components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures"; import StoreApiKeyFormComponent from "./components/StoreApiKeyForm"; +import useAuthStore from "@/stores/authStore"; export const GeneralPage = () => { const setCurrentFlowId = useFlowsManagerStore( @@ -31,7 +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); @@ -41,6 +41,8 @@ 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/zustand/auth/index.ts b/src/frontend/src/types/zustand/auth/index.ts index 942155c2ec2..70bbb131cf0 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; From 365b1a9f61daa87370c66ad93c75dc0c0dc1a7ef Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 19 Jul 2024 17:02:33 -0300 Subject: [PATCH 2/5] 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. --- src/frontend/src/contexts/authContext.tsx | 4 ---- src/frontend/src/types/contexts/auth.ts | 2 -- 2 files changed, 6 deletions(-) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 9fa875339ef..00659d03d67 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -29,8 +29,6 @@ const initialValue: AuthContextType = { userData: null, setUserData: () => {}, authenticationErrorCount: 0, - autoLogin: false, - setAutoLogin: () => {}, setApiKey: () => {}, apiKey: null, storeApiKey: () => {}, @@ -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/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index 00550a69a2b..44bde014acc 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; From 7ad36b048b553a24453aa81ee09f0305f75b1c28 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 19 Jul 2024 20:04:37 +0000 Subject: [PATCH 3/5] [autofix.ci] apply automated fixes --- src/frontend/src/App.tsx | 2 +- src/frontend/src/components/authAdminGuard/index.tsx | 2 +- src/frontend/src/components/authLoginGuard/index.tsx | 4 ++-- src/frontend/src/components/headerComponent/index.tsx | 3 +-- src/frontend/src/controllers/API/api.tsx | 3 +-- src/frontend/src/modals/apiModal/index.tsx | 2 +- .../src/pages/SettingsPage/pages/GeneralPage/index.tsx | 4 +--- 7 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 22d8dd49ec2..067eea3c2d5 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -22,10 +22,10 @@ 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"; -import useAuthStore from "./stores/authStore"; export default function App() { useTrackLastVisitedPath(); diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx index 6a6b3416e89..2dc76ff588d 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -1,7 +1,7 @@ +import useAuthStore from "@/stores/authStore"; import { useContext } from "react"; import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; -import useAuthStore from "@/stores/authStore"; export const ProtectedAdminRoute = ({ children }) => { const { isAdmin, isAuthenticated, logout, userData } = diff --git a/src/frontend/src/components/authLoginGuard/index.tsx b/src/frontend/src/components/authLoginGuard/index.tsx index 9a31f78d17c..97fe96f3c77 100644 --- a/src/frontend/src/components/authLoginGuard/index.tsx +++ b/src/frontend/src/components/authLoginGuard/index.tsx @@ -1,10 +1,10 @@ +import useAuthStore from "@/stores/authStore"; import { useContext } from "react"; import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; -import useAuthStore from "@/stores/authStore"; export const ProtectedLoginRoute = ({ children }) => { - const { isAuthenticated} = useContext(AuthContext); + const { isAuthenticated } = useContext(AuthContext); const autoLogin = useAuthStore((state) => state.autoLogin); if (autoLogin === true) { diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 56d8cb85a57..ed034a77845 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"; @@ -29,7 +30,6 @@ import { } from "../ui/dropdown-menu"; import { Separator } from "../ui/separator"; import MenuBar from "./components/menuBar"; -import useAuthStore from "@/stores/authStore"; export default function Header(): JSX.Element { const notificationCenter = useAlertStore((state) => state.notificationCenter); @@ -38,7 +38,6 @@ export default function Header(): JSX.Element { const { logout, isAdmin, userData } = useContext(AuthContext); const autoLogin = useAuthStore((state) => state.autoLogin); - const navigate = useNavigate(); const removeFlow = useFlowsManagerStore((store) => store.removeFlow); const hasStore = useStoreStore((state) => state.hasStore); diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 70e60f66747..12a69264ae6 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"; @@ -12,8 +13,6 @@ import { AuthContext } from "../../contexts/authContext"; import useAlertStore from "../../stores/alertStore"; import useFlowStore from "../../stores/flowStore"; import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests"; -import useAuthStore from "@/stores/authStore"; - // Create a new Axios instance const api: AxiosInstance = axios.create({ diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx index 0f9e793a7cb..6916f06eaec 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"; @@ -28,7 +29,6 @@ import getTabsOrder from "./utils/get-tabs-order"; import { getValue } from "./utils/get-value"; import getWidgetCode from "./utils/get-widget-code"; import { createTabsArray } from "./utils/tabs-array"; -import useAuthStore from "@/stores/authStore"; const ApiModal = forwardRef( ( diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx index 3892259636b..c932bb38edd 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"; @@ -19,7 +20,6 @@ import PasswordFormComponent from "./components/PasswordForm"; import ProfilePictureFormComponent from "./components/ProfilePictureForm"; import useGetProfilePictures from "./components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures"; import StoreApiKeyFormComponent from "./components/StoreApiKeyForm"; -import useAuthStore from "@/stores/authStore"; export const GeneralPage = () => { const setCurrentFlowId = useFlowsManagerStore( @@ -32,7 +32,6 @@ export const GeneralPage = () => { CONTROL_PATCH_USER_STATE, ); - const setSuccessData = useAlertStore((state) => state.setSuccessData); const setErrorData = useAlertStore((state) => state.setErrorData); const { userData, setUserData } = useContext(AuthContext); @@ -43,7 +42,6 @@ export const GeneralPage = () => { const { password, cnfPassword, profilePicture, apikey } = inputState; const autoLogin = useAuthStore((state) => state.autoLogin); - const { storeApiKey } = useContext(AuthContext); const setHasApiKey = useStoreStore((state) => state.updateHasApiKey); const setValidApiKey = useStoreStore((state) => state.updateValidApiKey); From 2cc8fbec0dcbb553273fd4b38958175747aa0bad Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 19 Jul 2024 17:05:24 -0300 Subject: [PATCH 4/5] refactor: remove autoLogin control variable from authContext --- src/frontend/src/contexts/authContext.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 00659d03d67..baa897c6fde 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -18,21 +18,22 @@ import { useGlobalVariablesStore } from "../stores/globalVariablesStore/globalVa import { useStoreStore } from "../stores/storeStore"; import { Users } from "../types/api"; import { AuthContextType } from "../types/contexts/auth"; +import useAuthStore from "@/stores/authStore"; const initialValue: AuthContextType = { isAdmin: false, setIsAdmin: () => false, isAuthenticated: false, accessToken: null, - login: () => {}, - logout: () => new Promise(() => {}), + login: () => { }, + logout: () => new Promise(() => { }), userData: null, - setUserData: () => {}, + setUserData: () => { }, authenticationErrorCount: 0, - setApiKey: () => {}, + setApiKey: () => { }, apiKey: null, - storeApiKey: () => {}, - getUser: () => {}, + storeApiKey: () => { }, + getUser: () => { }, }; export const AuthContext = createContext(initialValue); @@ -48,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), @@ -102,7 +102,7 @@ export function AuthProvider({ children }): React.ReactElement { } async function logout() { - if (autoLogin) { + if (useAuthStore.getState().autoLogin) { return; } try { From 65a649a63962b1d8aeaa97a90b986026f8985ced Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 19 Jul 2024 20:06:34 +0000 Subject: [PATCH 5/5] [autofix.ci] apply automated fixes --- src/frontend/src/contexts/authContext.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index baa897c6fde..a4702394977 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"; @@ -18,22 +19,21 @@ import { useGlobalVariablesStore } from "../stores/globalVariablesStore/globalVa import { useStoreStore } from "../stores/storeStore"; import { Users } from "../types/api"; import { AuthContextType } from "../types/contexts/auth"; -import useAuthStore from "@/stores/authStore"; const initialValue: AuthContextType = { isAdmin: false, setIsAdmin: () => false, isAuthenticated: false, accessToken: null, - login: () => { }, - logout: () => new Promise(() => { }), + login: () => {}, + logout: () => new Promise(() => {}), userData: null, - setUserData: () => { }, + setUserData: () => {}, authenticationErrorCount: 0, - setApiKey: () => { }, + setApiKey: () => {}, apiKey: null, - storeApiKey: () => { }, - getUser: () => { }, + storeApiKey: () => {}, + getUser: () => {}, }; export const AuthContext = createContext(initialValue);