refactor: Migrate autoLogin control variable to Zustand store

src/frontend/src/App.tsx

@@ -22,15 +22,17 @@ 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";
 
 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);

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

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

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

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<boolean>(false);
   const [userData, setUserData] = useState<Users | null>(null);
-  const [autoLogin, setAutoLogin] = useState<boolean>(false);
   const setLoading = useAlertStore((state) => state.setLoading);
   const [apiKey, setApiKey] = useState<string | null>(
     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,

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

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]

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

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;

src/frontend/src/types/zustand/auth/index.ts

@@ -18,7 +18,6 @@ export interface AuthStoreType {
   setAuthenticationErrorCount: (authenticationErrorCount: number) => void;
   logout: () => Promise<void>;
   // setUserData: (userData: Users | null) => void;
-  // setAutoLogin: (autoLogin: boolean) => void;
   // setIsAdmin: (isAdmin: boolean) => void;
   // setApiKey: (apiKey: string | null) => void;