refactor: change login/auto_login to use UseQuery

src/frontend/src/App.tsx

@@ -14,7 +14,7 @@ import {
   LANGFLOW_AUTO_LOGIN_OPTION,
 } from "./constants/constants";
 import { AuthContext } from "./contexts/authContext";
-import { autoLogin } from "./controllers/API";
+import { useAutoLogin } from "./controllers/API/queries/auth";
 import { useGetHealthQuery } from "./controllers/API/queries/health";
 import { useGetVersionQuery } from "./controllers/API/queries/version";
 import { setupAxiosDefaults } from "./controllers/API/utils";
@@ -36,6 +36,7 @@ export default function App() {
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const dark = useDarkStore((state) => state.dark);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const { mutate: mutateAutoLogin } = useAutoLogin();
 
   useGetVersionQuery();
   const cookies = new Cookies();
@@ -61,37 +62,40 @@ export default function App() {
     const abortController = new AbortController();
     const isLoginPage = location.pathname.includes("login");
 
-    autoLogin(abortController.signal)
-      .then(async (user) => {
-        if (user && user["access_token"]) {
-          user["refresh_token"] = "auto";
-          login(user["access_token"], "auto");
-          setUserData(user);
-          setAutoLogin(true);
-          fetchAllData();
-        }
-      })
-      .catch(async (error) => {
-        if (error.name !== "CanceledError") {
-          setAutoLogin(false);
-          if (
-            cookies.get(LANGFLOW_AUTO_LOGIN_OPTION) === "auto" &&
-            isAuthenticated
-          ) {
-            logout();
-            return;
-          }
-
-          if (isAuthenticated && !isLoginPage) {
-            getUser();
+    mutateAutoLogin(
+      { abortSignal: abortController.signal },
+      {
+        onSuccess: (user) => {
+          if (user && user["access_token"]) {
+            user["refresh_token"] = "auto";
+            login(user["access_token"], "auto");
+            setUserData(user);
+            setAutoLogin(true);
             fetchAllData();
-          } else {
-            setLoading(false);
-            useFlowsManagerStore.setState({ isLoading: false });
           }
-        }
-      });
+        },
+        onError: (error) => {
+          if (error.name !== "CanceledError") {
+            setAutoLogin(false);
+            if (
+              cookies.get(LANGFLOW_AUTO_LOGIN_OPTION) === "auto" &&
+              isAuthenticated
+            ) {
+              logout();
+              return;
+            }
 
+            if (isAuthenticated && !isLoginPage) {
+              getUser();
+              fetchAllData();
+            } else {
+              setLoading(false);
+              useFlowsManagerStore.setState({ isLoading: false });
+            }
+          }
+        },
+      },
+    );
     /*
       Abort the request as it isn't needed anymore, the component being
       unmounted. It helps avoid, among other things, the well-known "can't

src/frontend/src/controllers/API/index.ts

@@ -387,45 +387,6 @@ export async function postCustomComponentUpdate(
   });
 }
 
-export async function onLogin(user: LoginType) {
-  try {
-    const response = await api.post(
-      `${BASE_URL_API}login`,
-      new URLSearchParams({
-        username: user.username,
-        password: user.password,
-      }).toString(),
-      {
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      },
-    );
-
-    if (response.status === 200) {
-      const data = response?.data;
-      return data;
-    }
-  } catch (error) {
-    throw error;
-  }
-}
-
-export async function autoLogin(abortSignal) {
-  try {
-    const response = await api.get(`${BASE_URL_API}auto_login`, {
-      signal: abortSignal,
-    });
-
-    if (response.status === 200) {
-      const data = response?.data;
-      return data;
-    }
-  } catch (error) {
-    throw error;
-  }
-}
-
 export async function renewAccessToken() {
   try {
     return await api.post(`${BASE_URL_API}refresh`);

src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts

@@ -1,20 +1,32 @@
-import { keepPreviousData } from "@tanstack/react-query";
-import { Users, useQueryFunctionType } from "../../../../types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { useMutationFunctionType } from "../../../../types/api";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useGetAutoLogin: useQueryFunctionType<undefined, Users> = () => {
-  const { query } = UseRequestProcessor();
+interface AutoLoginParams {
+  abortSignal: AbortSignal;
+}
 
-  const getIsAutoLogin = async () => {
-    const response = await api.get<Users>(`${getURL("AUTOLOGIN")}`);
-    return response["data"];
+export const useAutoLogin: useMutationFunctionType<undefined, any> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  const autoLoginFn = async ({
+    abortSignal,
+  }: AutoLoginParams): Promise<any> => {
+    const res = await api.get(`${getURL("AUTOLOGIN")}`, {
+      signal: abortSignal,
+    });
+    return res.data;
   };
 
-  const queryResult = query(["useGetAutoLogin"], getIsAutoLogin, {
-    placeholderData: keepPreviousData,
-  });
+  const mutation: UseMutationResult = mutate(
+    ["useAutoLogin"],
+    autoLoginFn,
+    options,
+  );
 
-  return queryResult;
+  return mutation;
 };

src/frontend/src/controllers/API/queries/auth/use-post-login-user.ts

@@ -9,7 +9,7 @@ export const useLoginUser: useMutationFunctionType<undefined, LoginType> = (
 ) => {
   const { mutate } = UseRequestProcessor();
 
-  async function updateUser({ password, username }: LoginType): Promise<any> {
+  async function loginUserFn({ password, username }: LoginType): Promise<any> {
     const res = await api.post(
       `${getURL("LOGIN")}`,
       new URLSearchParams({
@@ -27,7 +27,7 @@ export const useLoginUser: useMutationFunctionType<undefined, LoginType> = (
 
   const mutation: UseMutationResult<LoginType, any, LoginType> = mutate(
     ["useLoginUser"],
-    updateUser,
+    loginUserFn,
     options,
   );
 

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

@@ -1,11 +1,11 @@
+import { useLoginUser } from "@/controllers/API/queries/auth";
 import { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
 import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
 import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
 import { AuthContext } from "../../../contexts/authContext";
-import { onLogin } from "../../../controllers/API";
 import useAlertStore from "../../../stores/alertStore";
 import { LoginType } from "../../../types/api";
 import {
@@ -29,26 +29,27 @@ export default function LoginAdminPage() {
     setInputState((prev) => ({ ...prev, [name]: value }));
   }
 
+  const { mutate } = useLoginUser();
+
   function signIn() {
     const user: LoginType = {
       username: username,
       password: password,
     };
-    onLogin(user)
-      .then((user) => {
-        console.log("admin page");
 
+    mutate(user, {
+      onSuccess: (data) => {
         setLoading(true);
-
-        login(user.access_token, "login");
+        login(data.access_token, "login");
         navigate("/admin/");
-      })
-      .catch((error) => {
+      },
+      onError: (error) => {
         setErrorData({
           title: SIGNIN_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
-      });
+      },
+    });
   }
 
   return (

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

@@ -1,3 +1,4 @@
+import { useLoginUser } from "@/controllers/API/queries/auth";
 import * as Form from "@radix-ui/react-form";
 import { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -7,7 +8,6 @@ import { Input } from "../../components/ui/input";
 import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants";
 import { CONTROL_LOGIN_STATE } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { onLogin } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { LoginType } from "../../types/api";
@@ -32,23 +32,28 @@ export default function LoginPage(): JSX.Element {
     setInputState((prev) => ({ ...prev, [name]: value }));
   }
 
+  const { mutate } = useLoginUser();
+
   function signIn() {
     const user: LoginType = {
       username: username.trim(),
       password: password.trim(),
     };
-    onLogin(user)
-      .then((user) => {
+
+    mutate(user, {
+      onSuccess: (data) => {
+        console.log("admin page");
         setLoading(true);
-        login(user.access_token, "login");
-        navigate("/");
-      })
-      .catch((error) => {
+        login(data.access_token, "login");
+        navigate("/admin/");
+      },
+      onError: (error) => {
         setErrorData({
           title: SIGNIN_ERROR_ALERT,
           list: [error["response"]["data"]["detail"]],
         });
-      });
+      },
+    });
   }
 
   return (

src/frontend/src/stores/authStore.ts

@@ -2,22 +2,11 @@
 import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { AuthStoreType } from "@/types/zustand/auth";
-import { useNavigate } from "react-router-dom";
 import Cookies from "universal-cookie";
 import { create } from "zustand";
-import {
-  getGlobalVariables,
-  getLoggedUser,
-  requestLogout,
-} from "../controllers/API";
-import useAlertStore from "../stores/alertStore";
 import { useFolderStore } from "../stores/foldersStore";
-import { useGlobalVariablesStore } from "../stores/globalVariablesStore/globalVariables";
-import { useStoreStore } from "../stores/storeStore";
-import { Users } from "../types/api";
 
 const cookies = new Cookies();
-
 const useAuthStore = create<AuthStoreType>((set, get) => ({
   isAdmin: false,
   isAuthenticated: !!cookies.get(LANGFLOW_ACCESS_TOKEN),