diff --git a/js/apps/account-ui/src/root/Root.tsx b/js/apps/account-ui/src/root/Root.tsx
index 8527a544fb..55c79daf89 100644
--- a/js/apps/account-ui/src/root/Root.tsx
+++ b/js/apps/account-ui/src/root/Root.tsx
@@ -1,4 +1,8 @@
-import { KeycloakProvider, environment } from "@keycloak/keycloak-ui-shared";
+import {
+  AccountEnvironment,
+  KeycloakProvider,
+  environment,
+} from "@keycloak/keycloak-ui-shared";
 import { Page, Spinner } from "@patternfly/react-core";
 import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
@@ -7,7 +11,7 @@ import { PageNav } from "./PageNav";
 
 export const Root = () => {
   return (
-    <KeycloakProvider environment={environment}>
+    <KeycloakProvider environment={environment as AccountEnvironment}>
       <Page header={<Header />} sidebar={<PageNav />} isManagedSidebar>
         <Suspense fallback={<Spinner />}>
           <Outlet />
diff --git a/js/libs/ui-shared/src/context/KeycloakContext.tsx b/js/libs/ui-shared/src/context/KeycloakContext.tsx
index d19660ff41..3d2768f563 100644
--- a/js/libs/ui-shared/src/context/KeycloakContext.tsx
+++ b/js/libs/ui-shared/src/context/KeycloakContext.tsx
@@ -49,7 +49,10 @@ export const KeycloakProvider = <T extends BaseEnvironment>({
   const [error, setError] = useState<unknown>();
   const keycloak = useMemo(() => {
     const keycloak = new Keycloak({
-      url: environment.authUrl,
+      url:
+        "authServerUrl" in environment
+          ? (environment.authServerUrl as string)
+          : environment.authUrl,
       realm: environment.realm,
       clientId: environment.clientId,
     });