refactor: move isAuthenticated from context to zustand store" (langfl…

…ow-ai#2845)

* remove isAuthenticated from context and move it to zustand store

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* refactor: fix authentication logic in authStore.ts

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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();

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) {

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 {

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("/");

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<string | null>(
     cookies.get(LANGFLOW_ACCESS_TOKEN) ?? null,
   );
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
-    !!cookies.get(LANGFLOW_ACCESS_TOKEN),
-  );
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(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,

src/frontend/src/pages/AdminPage/LoginPage/index.tsx

@@ -18,7 +18,7 @@ export default function LoginAdminPage() {
 
   const [inputState, setInputState] =
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
-  const { login, isAuthenticated, setUserData } = useContext(AuthContext);
+  const { login } = useContext(AuthContext);
   const setLoading = useAlertStore((state) => state.setLoading);
 
   const { password, username } = inputState;

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<AuthStoreType>((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"),

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<void>;