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

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

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;