diff --git a/js/apps/admin-ui/src/context/whoami/WhoAmI.tsx b/js/apps/admin-ui/src/context/whoami/WhoAmI.tsx
index 2885fdb2a3..f6b287f046 100644
--- a/js/apps/admin-ui/src/context/whoami/WhoAmI.tsx
+++ b/js/apps/admin-ui/src/context/whoami/WhoAmI.tsx
@@ -79,6 +79,10 @@ export class WhoAmI {
   public isTemporary(): boolean {
     return this.#me?.temporary ?? false;
   }
+
+  public isEmpty(): boolean {
+    return !this.#me;
+  }
 }
 
 type WhoAmIProps = {
diff --git a/js/apps/admin-ui/src/root/AuthWall.tsx b/js/apps/admin-ui/src/root/AuthWall.tsx
index 710ee673db..0d68d68853 100644
--- a/js/apps/admin-ui/src/root/AuthWall.tsx
+++ b/js/apps/admin-ui/src/root/AuthWall.tsx
@@ -3,6 +3,8 @@ import { useMatches } from "react-router-dom";
 
 import { ForbiddenSection } from "../ForbiddenSection";
 import { useAccess } from "../context/access/Access";
+import { useWhoAmI } from "../context/whoami/WhoAmI";
+import { KeycloakSpinner } from "@keycloak/keycloak-ui-shared";
 
 function hasProp<K extends PropertyKey>(
   data: object,
@@ -14,6 +16,7 @@ function hasProp<K extends PropertyKey>(
 export const AuthWall = ({ children }: any) => {
   const matches = useMatches();
   const { hasAccess } = useAccess();
+  const { whoAmI } = useWhoAmI();
 
   const permissionNeeded = matches.flatMap(({ handle }) => {
     if (
@@ -31,9 +34,13 @@ export const AuthWall = ({ children }: any) => {
     return [handle.access] as AccessType[];
   });
 
-  return hasAccess(...permissionNeeded) ? (
-    children
-  ) : (
-    <ForbiddenSection permissionNeeded={permissionNeeded} />
-  );
+  if (whoAmI.isEmpty()) {
+    return <KeycloakSpinner />;
+  }
+
+  if (!hasAccess(...permissionNeeded)) {
+    return <ForbiddenSection permissionNeeded={permissionNeeded} />;
+  }
+
+  return children;
 };