feat: enhance role management and token handling in case detail and token inspector components

Author: emmanuelknafo

sample-app/spa/src/app/components/case-detail/case-detail.component.ts

@@ -31,9 +31,22 @@ export class CaseDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    // ID token roles render immediately so the read-only banner is
+    // accurate before the access token round-trip completes.
     this.roles = this.authService.getRoles();
     this.canDownload = this.authService.canDownloadEvidence();
 
+    // Entra emits the `roles` claim on the access token by default —
+    // upgrade the role list and download capability once it arrives.
+    this.authService.getEffectiveRoles$().subscribe((roles) => {
+      if (roles.length > 0) {
+        this.roles = roles;
+      }
+    });
+    this.authService.canDownloadEvidence$().subscribe((canDownload) => {
+      this.canDownload = canDownload;
+    });
+
     const id = this.route.snapshot.paramMap.get('id');
     if (id) {
       this.evidenceService.getCaseById(id).subscribe({

sample-app/spa/src/app/components/token-inspector/token-inspector.component.html

@@ -29,7 +29,7 @@ <h3 class="ontario-h3">Access token</h3>
       {{ showAccessToken ? 'Hide' : 'Show' }} raw value
     </button>
     <button type="button" class="ontario-button ontario-button--tertiary"
-            (click)="refreshAccessToken()" [disabled]="loadingAccessToken">
+            (click)="refreshAccessToken(true)" [disabled]="loadingAccessToken">
       {{ loadingAccessToken ? 'Refreshing…' : 'Refresh' }}
     </button>
   </div>

sample-app/spa/src/app/components/token-inspector/token-inspector.component.ts

@@ -29,14 +29,25 @@ export class TokenInspectorComponent implements OnInit {
     this.refreshAccessToken();
   }
 
-  refreshAccessToken(): void {
+  refreshAccessToken(forceRefresh = false): void {
     this.loadingAccessToken = true;
-    this.authService.getAccessToken().subscribe((token) => {
+    if (forceRefresh) {
+      this.status = 'Requesting a fresh access token from Entra ID…';
+    }
+    const previousToken = this.accessToken;
+    this.authService.getAccessToken(forceRefresh).subscribe((token) => {
       this.accessToken = token;
       this.loadingAccessToken = false;
       if (!token) {
         this.status =
           'Could not silently acquire an access token. Sign out and sign back in if this persists.';
+        return;
+      }
+      if (forceRefresh) {
+        this.status =
+          token === previousToken
+            ? 'Entra returned the same access token (still valid in the cache).'
+            : 'Access token refreshed.';
       }
     });
   }

sample-app/spa/src/app/services/auth.service.ts

@@ -6,7 +6,7 @@ import {
   SilentRequest,
 } from '@azure/msal-browser';
 import { from, Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { catchError, map, shareReplay } from 'rxjs/operators';
 import { loginRequest } from '../auth-config';
 
 /**
@@ -49,6 +49,29 @@ export class AuthService {
     return Array.isArray(roles) ? roles.map((r) => String(r)) : [];
   }
 
+  /**
+   * Effective app roles for the user. Entra ID emits the `roles` claim
+   * on the API access token by default, and only on the ID token when
+   * the app registration explicitly opts in via optional claims. We
+   * therefore prefer the access token as the source of truth and fall
+   * back to the ID token claims when the access token is unavailable.
+   */
+  getEffectiveRoles$(): Observable<string[]> {
+    return this.getAccessToken().pipe(
+      map((token) => {
+        if (token) {
+          const claims = decodeJwtPayload(token);
+          const roles = claims?.['roles'];
+          if (Array.isArray(roles)) {
+            return roles.map((r) => String(r));
+          }
+        }
+        return this.getRoles();
+      }),
+      shareReplay({ bufferSize: 1, refCount: true }),
+    );
+  }
+
   hasAnyRole(...roles: string[]): boolean {
     if (roles.length === 0) {
       return false;
@@ -62,18 +85,36 @@ export class AuthService {
     return this.hasAnyRole(ROLE_CASE_READER, ROLE_CASE_ADMIN);
   }
 
+  /**
+   * Async variant of {@link canDownloadEvidence} that consults the
+   * access token roles. Use this in components — the synchronous
+   * helper only sees the ID token claims, which Entra often omits.
+   */
+  canDownloadEvidence$(): Observable<boolean> {
+    return this.getEffectiveRoles$().pipe(
+      map(
+        (roles) =>
+          roles.includes(ROLE_CASE_READER) || roles.includes(ROLE_CASE_ADMIN),
+      ),
+    );
+  }
+
   /**
    * Acquire the current API access token silently from the MSAL cache,
    * refreshing via the hidden iframe / refresh token when needed.
+   *
+   * @param forceRefresh When true, bypass the MSAL token cache and
+   *   request a freshly minted access token from Entra ID.
    */
-  getAccessToken(): Observable<string | null> {
+  getAccessToken(forceRefresh = false): Observable<string | null> {
     const account = this.getActiveAccount();
     if (!account) {
       return of(null);
     }
     const request: SilentRequest = {
       scopes: loginRequest.scopes,
       account,
+      forceRefresh,
     };
     return from(this.msalService.instance.acquireTokenSilent(request)).pipe(
       map((res: AuthenticationResult) => res.accessToken),
@@ -123,3 +164,33 @@ export class AuthService {
     }
   }
 }
+
+/**
+ * Decode the payload of a JWT (header.payload.signature) without
+ * verifying the signature. Used purely for reading non-sensitive
+ * claims (e.g. `roles`) on the client. The signature is validated
+ * server-side by the API.
+ */
+function decodeJwtPayload(token: string): Record<string, unknown> | null {
+  const parts = token.split('.');
+  if (parts.length < 2) {
+    return null;
+  }
+  try {
+    const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+    const padded = base64.padEnd(
+      base64.length + ((4 - (base64.length % 4)) % 4),
+      '=',
+    );
+    const json = decodeURIComponent(
+      atob(padded)
+        .split('')
+        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join(''),
+    );
+    return JSON.parse(json) as Record<string, unknown>;
+  } catch (err) {
+    console.warn('Failed to decode JWT payload', err);
+    return null;
+  }
+}