Show forbidden section only after whoAmI is set (keycloak#34589)

closes keycloak#34402 Signed-off-by: Christian Janker <[email protected]> (cherry picked from commit 6482e41) Signed-off-by: Erik Jan de Wit <[email protected]>
edewit · Dec 2, 2024 · c8f097b · c8f097b
1 parent 3400602
commit c8f097b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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;
 };