diff --git a/src/backend/base/langflow/custom/custom_component/component.py b/src/backend/base/langflow/custom/custom_component/component.py
index af1dfe261..8df5f6c2b 100644
--- a/src/backend/base/langflow/custom/custom_component/component.py
+++ b/src/backend/base/langflow/custom/custom_component/component.py
@@ -9,6 +9,7 @@ from langflow.inputs.inputs import InputTypes
 from langflow.schema.artifact import get_artifact_type, post_process_raw
 from langflow.schema.data import Data
 from langflow.schema.message import Message
+from langflow.services.tracing.schema import Log
 from langflow.template.field.base import UNDEFINED, Output
 
 from .custom_component import CustomComponent
@@ -38,6 +39,7 @@ class Component(CustomComponent):
     inputs: List[InputTypes] = []
     outputs: List[Output] = []
     code_class_base_inheritance: ClassVar[str] = "Component"
+    _output_logs: dict[str, Log] = {}
 
     def __init__(self, **data):
         self._inputs: dict[str, InputTypes] = {}
diff --git a/src/frontend/src/controllers/API/helpers/constants.ts b/src/frontend/src/controllers/API/helpers/constants.ts
index 0276e73c6..871707887 100644
--- a/src/frontend/src/controllers/API/helpers/constants.ts
+++ b/src/frontend/src/controllers/API/helpers/constants.ts
@@ -7,6 +7,11 @@ export const URLs = {
   VERSION: `version`,
   MESSAGES: `monitor/messages`,
   STORE: `store`,
+  USERS: "users",
+  LOGOUT: `logout`,
+  LOGIN: `login`,
+  AUTOLOGIN: "auto_login",
+  REFRESH: "refresh",
   BUILD: `build`,
 } as const;
 
diff --git a/src/frontend/src/controllers/API/queries/auth/index.ts b/src/frontend/src/controllers/API/queries/auth/index.ts
new file mode 100644
index 000000000..49ecf2dc4
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/index.ts
@@ -0,0 +1 @@
+export * from "./use-get-user";
diff --git a/src/frontend/src/controllers/API/queries/auth/use-add-user.ts b/src/frontend/src/controllers/API/queries/auth/use-add-user.ts
new file mode 100644
index 000000000..11af8fd61
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-add-user.ts
@@ -0,0 +1,30 @@
+import { Users, useMutationFunctionType } from "@/types/api";
+import { UserInputType } from "@/types/components";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export const useAddUser: useMutationFunctionType<UserInputType> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  const addUserFunction = async (
+    user: UserInputType,
+  ): Promise<Array<Users>> => {
+    const res = await api.post(`${getURL("USERS")}`, user);
+    return res.data;
+  };
+
+  const mutation: UseMutationResult<Array<Users>, any, UserInputType> = mutate(
+    ["useAddUser"],
+    async (payload: UserInputType) => {
+      const res = await addUserFunction(payload);
+      return res;
+    },
+    options,
+  );
+
+  return mutation;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts b/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts
new file mode 100644
index 000000000..9eedf558f
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts
@@ -0,0 +1,25 @@
+import { useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface DeleteUserParams {
+  user_id: string;
+}
+
+export const useDeleteMessages: useMutationFunctionType<DeleteUserParams> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  const deleteMessage = async ({ user_id }: DeleteUserParams): Promise<any> => {
+    const res = await api.delete(`${getURL("USERS")}/${user_id}`);
+    return res.data;
+  };
+
+  const mutation: UseMutationResult<DeleteUserParams, any, DeleteUserParams> =
+    mutate(["useDeleteMessages"], deleteMessage, options);
+
+  return mutation;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts b/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts
new file mode 100644
index 000000000..f1f9a63bb
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts
@@ -0,0 +1,20 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import { Users, useQueryFunctionType } 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();
+
+  const getIsAutoLogin = async () => {
+    const response = await api.get<Users>(`${getURL("AUTOLOGIN")}`);
+    return response["data"];
+  };
+
+  const queryResult = query(["useGetAutoLogin"], getIsAutoLogin, {
+    placeholderData: keepPreviousData,
+  });
+
+  return queryResult;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-user.ts b/src/frontend/src/controllers/API/queries/auth/use-get-user.ts
new file mode 100644
index 000000000..a5d368106
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-get-user.ts
@@ -0,0 +1,20 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import { Users, useQueryFunctionType } from "../../../../types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export const useGetUserData: useQueryFunctionType<undefined, Users> = () => {
+  const { query } = UseRequestProcessor();
+
+  const getUserData = async () => {
+    const response = await api.get<Users>(`${getURL("USERS")}/whoami`);
+    return response["data"];
+  };
+
+  const queryResult = query(["useGetUserData"], getUserData, {
+    placeholderData: keepPreviousData,
+  });
+
+  return queryResult;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts
new file mode 100644
index 000000000..96a0e9ada
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts
@@ -0,0 +1,33 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import { Users, useQueryFunctionType } from "../../../../types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface getUsersPageQueryParams {
+  skip: number;
+  limit: number;
+}
+
+export const useGetUserPage: useQueryFunctionType<
+  getUsersPageQueryParams,
+  Users
+> = ({ skip, limit }) => {
+  const { query } = UseRequestProcessor();
+
+  async function getUsersPage(): Promise<Array<Users>> {
+    const res = await api.get(
+      `${getURL("USERS")}/?skip=${skip}&limit=${limit}`,
+    );
+    if (res.status === 200) {
+      return res.data;
+    }
+    return [];
+  }
+
+  const queryResult = query(["useGetUserPage"], getUsersPage, {
+    placeholderData: keepPreviousData,
+  });
+
+  return queryResult;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-login-user.ts b/src/frontend/src/controllers/API/queries/auth/use-login-user.ts
new file mode 100644
index 000000000..d97395b03
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-login-user.ts
@@ -0,0 +1,33 @@
+import { LoginType, changeUser, useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export const useLoginUser: useMutationFunctionType<LoginType> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  async function updateUser({ password, username }: LoginType): Promise<any> {
+    const res = await api.post(
+      `${getURL("LOGIN")}`,
+      new URLSearchParams({
+        username: username,
+        password: password,
+      }).toString(),
+      {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      },
+    );
+    return res.data;
+  }
+
+  const mutation: UseMutationResult<LoginType, any, LoginType> = mutate(
+    ["useLoginUser"],
+    updateUser,
+    options,
+  );
+
+  return mutation;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-logout.ts b/src/frontend/src/controllers/API/queries/auth/use-logout.ts
new file mode 100644
index 000000000..7119ae88f
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-logout.ts
@@ -0,0 +1,26 @@
+import {
+  changeUser,
+  resetPasswordType,
+  useMutationFunctionType,
+} from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export const useLogout: useMutationFunctionType<undefined> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  async function logoutUser(): Promise<any> {
+    const res = await api.patch(`${getURL("LOGOUT")}`);
+    return res.data;
+  }
+
+  const mutation: UseMutationResult<undefined, any, undefined> = mutate(
+    ["useLogout"],
+    logoutUser,
+    options,
+  );
+
+  return mutation;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts b/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts
new file mode 100644
index 000000000..c330a0ca9
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts
@@ -0,0 +1,22 @@
+import { LoginType, changeUser, useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export const useRefrshAccessToken: useMutationFunctionType = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  async function refreshAccess(): Promise<any> {
+    const res = await api.post(`${getURL("REFRESH")}`);
+    return res.data;
+  }
+
+  const mutation: UseMutationResult = mutate(
+    ["useRefrshAccessToken"],
+    refreshAccess,
+    options,
+  );
+
+  return mutation;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts b/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts
new file mode 100644
index 000000000..899fe44b0
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts
@@ -0,0 +1,39 @@
+import {
+  changeUser,
+  resetPasswordType,
+  useMutationFunctionType,
+} from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface resetPasswordParams {
+  user_id: string;
+  password: resetPasswordType;
+}
+
+export const useResetPassword: useMutationFunctionType<resetPasswordParams> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  async function resetPassword({
+    user_id,
+    password,
+  }: resetPasswordParams): Promise<any> {
+    const res = await api.patch(
+      `${getURL("USERS")}/${user_id}/reset-password`,
+      password,
+    );
+    return res.data;
+  }
+
+  const mutation: UseMutationResult<
+    resetPasswordParams,
+    any,
+    resetPasswordParams
+  > = mutate(["useResetPassword"], resetPassword, options);
+
+  return mutation;
+};
diff --git a/src/frontend/src/controllers/API/queries/auth/use-update-user.ts b/src/frontend/src/controllers/API/queries/auth/use-update-user.ts
new file mode 100644
index 000000000..5cf671e50
--- /dev/null
+++ b/src/frontend/src/controllers/API/queries/auth/use-update-user.ts
@@ -0,0 +1,26 @@
+import { changeUser, useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface UpdateUserParams {
+  user_id: string;
+  user: changeUser;
+}
+
+export const useUpdateUser: useMutationFunctionType<UpdateUserParams> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
+
+  async function updateUser({ user_id, user }: UpdateUserParams): Promise<any> {
+    const res = await api.patch(`${getURL("USERS")}/${user_id}`, user);
+    return res.data;
+  }
+
+  const mutation: UseMutationResult<UpdateUserParams, any, UpdateUserParams> =
+    mutate(["useUpdateUser"], updateUser, options);
+
+  return mutation;
+};
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index 9b93b3da1..c805325fa 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -259,6 +259,10 @@ export type MutationFunctionType = (
   options?: Omit<UseMutationOptions<any, any>, "mutationFn" | "mutationKey">,
 ) => UseMutationResult<any, any, any, any>;
 
-export type useMutationFunctionType<Variables, Data = any, Error = any> = (
+export type useMutationFunctionType<
+  Variables = any,
+  Data = any,
+  Error = any,
+> = (
   options?: Omit<UseMutationOptions<Data, Error>, "mutationFn" | "mutationKey">,
 ) => UseMutationResult<Data, Error, Variables>;