diff --git a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
index d3c929a69448..cb91881d0222 100644
--- a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
+++ b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
@@ -17,12 +17,15 @@ import { SyncSchema } from "core/domain/catalog";
 import { SourceDefinition } from "core/resources/SourceDefinition";
 import { Source } from "core/resources/Source";
 import { Routes } from "pages/routes";
-import useRouter from "../useRouter";
 import { Destination } from "core/resources/Destination";
 import useWorkspace from "./useWorkspace";
 import { Operation } from "core/domain/connection/operation";
-import { equal } from "utils/objects";
 import { useAnalytics } from "hooks/useAnalytics";
+import useRouter from "hooks/useRouter";
+import { useGetService } from "core/servicesProvider";
+import { RequestMiddleware } from "core/request/RequestMiddleware";
+
+import { equal } from "utils/objects";
 
 export type ValuesProps = {
   schedule: ScheduleProperties | null;
@@ -65,8 +68,13 @@ type UpdateStateConnection = {
 
 function useConnectionService(): ConnectionService {
   const config = useConfig();
+  const middlewares = useGetService<RequestMiddleware[]>(
+    "DefaultRequestMiddlewares"
+  );
 
-  return useMemo(() => new ConnectionService(config.apiUrl), [config]);
+  return useMemo(() => new ConnectionService(config.apiUrl, middlewares), [
+    config,
+  ]);
 }
 
 export const useConnectionLoad = (
diff --git a/airbyte-webapp/src/packages/cloud/services/useDefaultRequestMiddlewares.tsx b/airbyte-webapp/src/packages/cloud/services/useDefaultRequestMiddlewares.tsx
index 9ab2a4d103d8..20cc9b381831 100644
--- a/airbyte-webapp/src/packages/cloud/services/useDefaultRequestMiddlewares.tsx
+++ b/airbyte-webapp/src/packages/cloud/services/useDefaultRequestMiddlewares.tsx
@@ -5,5 +5,5 @@ import { useGetService } from "core/servicesProvider";
  * This hook is responsible for registering RequestMiddlewares used in BaseRequest
  */
 export const useDefaultRequestMiddlewares = (): RequestMiddleware[] => {
-  return useGetService("DefaultRequestMiddlewares");
+  return useGetService<RequestMiddleware[]>("DefaultRequestMiddlewares");
 };