diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 067eea3c2d5d..6fc41300cc37 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -30,12 +30,12 @@ import { useFolderStore } from "./stores/foldersStore"; export default function App() { useTrackLastVisitedPath(); const isLoading = useFlowsManagerStore((state) => state.isLoading); - const { isAuthenticated, login, setUserData, getUser, logout } = - useContext(AuthContext); + const { 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); + const isAuthenticated = useAuthStore((state) => state.isAuthenticated); useGetVersionQuery(); const cookies = new Cookies(); diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx index 2dc76ff588d5..972b96eb46b0 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -4,9 +4,8 @@ import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedAdminRoute = ({ children }) => { - const { isAdmin, isAuthenticated, logout, userData } = - useContext(AuthContext); - + const { isAdmin, logout, userData } = useContext(AuthContext); + const isAuthenticated = useAuthStore((state) => state.isAuthenticated); const autoLogin = useAuthStore((state) => state.autoLogin); if (!isAuthenticated) { diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx index 8450248a9dee..039894e5f768 100644 --- a/src/frontend/src/components/authGuard/index.tsx +++ b/src/frontend/src/components/authGuard/index.tsx @@ -1,8 +1,11 @@ +import useAuthStore from "@/stores/authStore"; import { useContext } from "react"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedRoute = ({ children }) => { - const { isAuthenticated, logout } = useContext(AuthContext); + const { logout } = useContext(AuthContext); + const isAuthenticated = useAuthStore((state) => state.isAuthenticated); + if (!isAuthenticated) { logout(); } else { diff --git a/src/frontend/src/components/authLoginGuard/index.tsx b/src/frontend/src/components/authLoginGuard/index.tsx index 97fe96f3c77c..5357c505ceca 100644 --- a/src/frontend/src/components/authLoginGuard/index.tsx +++ b/src/frontend/src/components/authLoginGuard/index.tsx @@ -1,11 +1,9 @@ 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 } = useContext(AuthContext); const autoLogin = useAuthStore((state) => state.autoLogin); + const isAuthenticated = useAuthStore((state) => state.isAuthenticated); if (autoLogin === true) { window.location.replace("/"); diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index a47023949773..1ae2adeb98f8 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -23,7 +23,6 @@ import { AuthContextType } from "../types/contexts/auth"; const initialValue: AuthContextType = { isAdmin: false, setIsAdmin: () => false, - isAuthenticated: false, accessToken: null, login: () => {}, logout: () => new Promise(() => {}), @@ -44,9 +43,6 @@ export function AuthProvider({ children }): React.ReactElement { const [accessToken, setAccessToken] = useState( cookies.get(LANGFLOW_ACCESS_TOKEN) ?? null, ); - const [isAuthenticated, setIsAuthenticated] = useState( - !!cookies.get(LANGFLOW_ACCESS_TOKEN), - ); const [isAdmin, setIsAdmin] = useState(false); const [userData, setUserData] = useState(null); const setLoading = useAlertStore((state) => state.setLoading); @@ -97,7 +93,7 @@ export function AuthProvider({ children }): React.ReactElement { function login(newAccessToken: string, autoLogin: string) { cookies.set(LANGFLOW_AUTO_LOGIN_OPTION, autoLogin, { path: "/" }); setAccessToken(newAccessToken); - setIsAuthenticated(true); + useAuthStore.getState().setIsAuthenticated(true); getUser(); } @@ -112,7 +108,7 @@ export function AuthProvider({ children }): React.ReactElement { setIsAdmin(false); setUserData(null); setAccessToken(null); - setIsAuthenticated(false); + useAuthStore.getState().setIsAuthenticated(false); setAllFlows([]); setSelectedFolder(null); navigate("/login"); @@ -134,7 +130,6 @@ export function AuthProvider({ children }): React.ReactElement { value={{ isAdmin, setIsAdmin, - isAuthenticated, accessToken, login, logout, diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx index 13e996c4a6c3..c6ce32c30d2e 100644 --- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx @@ -18,7 +18,7 @@ export default function LoginAdminPage() { const [inputState, setInputState] = useState(CONTROL_LOGIN_STATE); - const { login, isAuthenticated, setUserData } = useContext(AuthContext); + const { login } = useContext(AuthContext); const setLoading = useAlertStore((state) => state.setLoading); const { password, username } = inputState; diff --git a/src/frontend/src/stores/authStore.ts b/src/frontend/src/stores/authStore.ts index 4c049baa8356..cc193130d8a9 100644 --- a/src/frontend/src/stores/authStore.ts +++ b/src/frontend/src/stores/authStore.ts @@ -1,4 +1,5 @@ // authStore.js +import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants"; import useFlowsManagerStore from "@/stores/flowsManagerStore"; import { AuthStoreType } from "@/types/zustand/auth"; import { useNavigate } from "react-router-dom"; @@ -19,8 +20,8 @@ const cookies = new Cookies(); const useAuthStore = create((set, get) => ({ isAdmin: false, - isAuthenticated: !!cookies.get("access_token_lf"), - accessToken: cookies.get("access_token_lf") ?? null, + isAuthenticated: !!cookies.get(LANGFLOW_ACCESS_TOKEN), + accessToken: cookies.get(LANGFLOW_ACCESS_TOKEN) ?? null, userData: null, autoLogin: false, apiKey: cookies.get("apikey_tkn_lflw"), diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index 44bde014acca..cbfbe6895769 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -3,7 +3,6 @@ import { Users } from "../api"; export type AuthContextType = { isAdmin: boolean; setIsAdmin: (isAdmin: boolean) => void; - isAuthenticated: boolean; accessToken: string | null; login: (accessToken: string, autoLogin: string) => void; logout: () => Promise;