diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index d40fba4bd6..323be31ee9 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -19,6 +19,7 @@ import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
 import { api } from '../../services/api';
+import { $authToken, $baseUrl, $projectId } from 'services/api/client';
 
 const DEFAULT_CONFIG = {};
 
@@ -29,12 +30,18 @@ interface Props {
     imageName: string;
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
+  apiUrl?: string;
+  token?: string;
+  projectId?: string;
 }
 
 const App = ({
   config = DEFAULT_CONFIG,
   headerComponent,
   selectedImage,
+  apiUrl,
+  token,
+  projectId,
 }: Props) => {
   const language = useAppSelector(languageSelector);
 
@@ -47,6 +54,31 @@ const App = ({
     return false;
   }, []);
 
+  useEffect(() => {
+    // configure API client token
+    if (token) {
+      $authToken.set(token);
+    }
+
+    // configure API client base url
+    if (apiUrl) {
+      $baseUrl.set(apiUrl);
+    }
+
+    // configure API client project header
+    if (projectId) {
+      $projectId.set(projectId);
+    }
+
+    return () => {
+      // Reset the API client token and base url on unmount
+      $baseUrl.set(undefined);
+      $authToken.set(undefined);
+      $projectId.set(undefined);
+      dispatch(api.util.resetApiState());
+    };
+  }, [apiUrl, token, projectId, dispatch]);
+
   useEffect(() => {
     i18n.changeLanguage(language);
   }, [language]);
@@ -66,12 +98,6 @@ const App = ({
     handlePreselectedImage(selectedImage);
   }, [handlePreselectedImage, selectedImage]);
 
-  useEffect(() => {
-    return () => {
-      dispatch(api.util.resetApiState());
-    };
-  });
-
   return (
     <ErrorBoundary
       onReset={handleReset}
diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 322ee3fd2b..3687936370 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -10,7 +10,6 @@ import React, {
 } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
-import { $authToken, $baseUrl, $projectId } from 'services/api/client';
 import { socketMiddleware } from 'services/events/middleware';
 import Loading from '../../common/components/Loading/Loading';
 import '../../i18n';
@@ -42,21 +41,6 @@ const InvokeAIUI = ({
   selectedImage,
 }: Props) => {
   useEffect(() => {
-    // configure API client token
-    if (token) {
-      $authToken.set(token);
-    }
-
-    // configure API client base url
-    if (apiUrl) {
-      $baseUrl.set(apiUrl);
-    }
-
-    // configure API client project header
-    if (projectId) {
-      $projectId.set(projectId);
-    }
-
     // reset dynamically added middlewares
     resetMiddlewares();
 
@@ -71,14 +55,7 @@ const InvokeAIUI = ({
     } else {
       addMiddleware(socketMiddleware());
     }
-
-    return () => {
-      // Reset the API client token and base url on unmount
-      $baseUrl.set(undefined);
-      $authToken.set(undefined);
-      $projectId.set(undefined);
-    };
-  }, [apiUrl, token, middleware, projectId]);
+  }, [middleware]);
 
   return (
     <React.StrictMode>
@@ -90,6 +67,9 @@ const InvokeAIUI = ({
                 config={config}
                 headerComponent={headerComponent}
                 selectedImage={selectedImage}
+                apiUrl={apiUrl}
+                token={token}
+                projectId={projectId}
               />
             </AppDndContext>
           </ThemeLocaleProvider>