diff --git a/js/apps/account-ui/src/root/KeycloakContext.tsx b/js/apps/account-ui/src/root/KeycloakContext.tsx
index 7be6bc6f8002..2ce84d9c9cc9 100644
--- a/js/apps/account-ui/src/root/KeycloakContext.tsx
+++ b/js/apps/account-ui/src/root/KeycloakContext.tsx
@@ -41,15 +41,17 @@ export const KeycloakProvider = ({
   const calledOnce = useRef(false);
   const [init, setInit] = useState(false);
   const [error, setError] = useState<unknown>();
-  const keycloak = useMemo(
-    () =>
-      new Keycloak({
-        url: environment.authUrl,
-        realm: environment.realm,
-        clientId: environment.clientId,
-      }),
-    [environment],
-  );
+  const keycloak = useMemo(() => {
+    const keycloak = new Keycloak({
+      url: environment.authUrl,
+      realm: environment.realm,
+      clientId: environment.clientId,
+    });
+
+    keycloak.onAuthLogout = () => keycloak.login();
+
+    return keycloak;
+  }, [environment]);
 
   useEffect(() => {
     // only needed in dev mode
@@ -57,13 +59,12 @@ export const KeycloakProvider = ({
       return;
     }
 
-    const init = () => {
-      return keycloak.init({
+    const init = () =>
+      keycloak.init({
         onLoad: "check-sso",
         pkceMethod: "S256",
         responseMode: "query",
       });
-    };
 
     init()
       .then(() => setInit(true))
diff --git a/js/apps/admin-ui/src/keycloak.ts b/js/apps/admin-ui/src/keycloak.ts
index d8fe5d3a1797..76925593faaf 100644
--- a/js/apps/admin-ui/src/keycloak.ts
+++ b/js/apps/admin-ui/src/keycloak.ts
@@ -8,6 +8,8 @@ export const keycloak = new Keycloak({
   clientId: environment.clientId,
 });
 
+keycloak.onAuthLogout = () => keycloak.login();
+
 export async function initKeycloak() {
   const authenticated = await keycloak.init({
     onLoad: "check-sso",