@classic-homes/auth 0.1.55 → 1.0.0

package/README.md

@@ -37,6 +37,12 @@ initAuth({
     setItem: (key, value) => localStorage.setItem(key, value),
     removeItem: (key) => localStorage.removeItem(key),
   },
+  // ⚠️ SECURITY: localStorage (also the default when `storage` is omitted)
+  // persists the long-lived refresh token where any XSS can read it.
+  // Safer options exported from '@classic-homes/auth/core':
+  //   storage: createSessionStorage()  // per-tab, cleared on close
+  //   storage: createMemoryStorage()   // never persisted, lost on reload
+  // or keep tokens out of JS entirely with an httpOnly-cookie flow.
   // SSO configuration (optional)
   sso: {
     enabled: true,
@@ -196,6 +202,74 @@ export function load({ url }) {
 }
 ```
 
+## Roles
+
+A user holds a **set** of roles (`user.roles`). Their permissions are the union
+across all of them, so a user's access is broader than any single role.
+
+```typescript
+import { authStore } from '@classic-homes/auth/svelte';
+
+// A manager who is also an agent
+authStore.user?.roles; // ['manager', 'agent']
+
+authStore.hasRole('manager'); // true
+authStore.hasRole('agent'); // true — secondary roles count
+authStore.hasAnyRole(['admin', 'agent']); // true
+authStore.hasAllRoles(['manager', 'agent']); // true
+```
+
+**Role checks are exact membership.** Holding `admin` does not imply `agent`:
+
+```typescript
+authStore.user?.roles; // ['admin']
+authStore.hasRole('agent'); // false
+```
+
+This mirrors the API, so the UI can't offer something the server will reject.
+To let admins through as well, list the roles you accept:
+`checkAuth({ roles: ['admin', 'agent'] })`.
+
+### Displaying a role
+
+`computePrimaryRole` resolves the highest-tier role for display. It's a label,
+not a capability — never gate on it:
+
+```typescript
+import { computePrimaryRole, getEffectiveLevel } from '@classic-homes/auth/core';
+
+computePrimaryRole(['user', 'admin']); // 'admin'
+computePrimaryRole([]); // 'guest'
+getEffectiveLevel(['user', 'manager']); // 3
+
+// Or format the whole set
+import { formatUserRoles } from '@classic-homes/auth/core';
+formatUserRoles(user); // 'Manager, Agent'
+formatUserRoles(user, { max: 1 }); // 'Manager +1 more'
+```
+
+### Managing another user's roles
+
+Requires `users:read` to list and `users:update` to change:
+
+```typescript
+import { authApi } from '@classic-homes/auth/core';
+
+const { roles, primaryRole } = await authApi.getUserRoles(userId);
+
+await authApi.grantUserRole(userId, 'agent'); // idempotent
+await authApi.revokeUserRole(userId, 'agent');
+await authApi.setUserRoles(userId, ['manager', 'agent']); // replaces the set
+```
+
+Two server rules to design around:
+
+- **A role change doesn't affect that user's live session.** Permissions are
+  computed when a token is minted, so a grant takes effect on their next token
+  refresh — not their next request.
+- The server refuses to remove a user's **last** role, or to grant a role at or
+  above the acting user's own level. Both come back as errors.
+
 ## API Reference
 
 ### Core Exports
@@ -225,8 +299,20 @@ import {
   isTokenExpired,
   getTokenRemainingTime,
 
+  // Roles
+  ROLE_NAMES,
+  ROLE_HIERARCHY,
+  getUserRoles,
+  computePrimaryRole,
+  getEffectiveLevel,
+  hasRole,
+  hasAnyRole,
+  hasAllRoles,
+
   // Types
   type User,
+  type UserRolesResponse,
+  type RoleName,
   type AuthState,
   type LoginCredentials,
   type LoginResponse,
@@ -642,7 +728,7 @@ import {
 } from '@classic-homes/auth/testing';
 
 // Use pre-defined users
-expect(mockUser.role).toBe('user');
+expect(mockUser.roles).toEqual(['user']);
 expect(mockAdminUser.permissions).toContain('manage:system');
 
 // Create custom users

package/dist/auth.svelte-J62VV4TA.js

@@ -0,0 +1,3 @@
+export { authActions, authStore, currentUser, isAuthenticated } from './chunk-QBTMNWJH.js';
+import './chunk-2N2MDCWL.js';
+import './chunk-O47YKG2F.js';

package/dist/{chunk-GRQL5FSH.js → chunk-2N2MDCWL.js}

@@ -1,4 +1,4 @@
-import { getConfig, getStorage, getFetch, isValidRedirectUrl } from './chunk-EM7PUNZB.js';
+import { getConfig, getStorage, getFetch, isValidRedirectUrl } from './chunk-O47YKG2F.js';
 
 // src/core/client.ts
 var isRefreshing = false;
@@ -70,9 +70,8 @@ function updateStoredTokens(accessToken, refreshToken) {
   }
   parsed.accessToken = accessToken;
   parsed.refreshToken = refreshToken;
-  parsed._version = (parsed._version || 0) + 1;
   storage.setItem(storageKey, JSON.stringify(parsed));
-  import('./auth.svelte-BBLX2MKB.js').then(({ authStore }) => {
+  import('./auth.svelte-J62VV4TA.js').then(({ authStore }) => {
     authStore.updateTokens(accessToken, refreshToken);
   }).catch(() => {
   });
@@ -91,13 +90,17 @@ async function refreshAccessToken() {
   if (!refreshToken) {
     return false;
   }
+  const timeoutMs = config.requestTimeout ?? 3e4;
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
   try {
     const response = await fetchFn(`${config.baseUrl}/auth/refresh`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
-      body: JSON.stringify({ refreshToken })
+      body: JSON.stringify({ refreshToken }),
+      signal: controller.signal
     });
     if (response.ok) {
       let apiResponse;
@@ -126,6 +129,8 @@ async function refreshAccessToken() {
     }
   } catch (error) {
     config.onAuthError?.(error instanceof Error ? error : new Error("Token refresh failed"));
+  } finally {
+    clearTimeout(timeoutId);
   }
   return false;
 }
@@ -141,7 +146,10 @@ function extractData(response) {
   }
   return response;
 }
-async function apiRequest(endpoint, options = {}) {
+function apiRequest(endpoint, options = {}) {
+  return apiRequestInternal(endpoint, options, false);
+}
+async function apiRequestInternal(endpoint, options, isRetry) {
   const { authenticated = false, customFetch, body, timeout, signal, ...fetchOptions } = options;
   const config = getConfig();
   const fetchFn = customFetch ?? getFetch();
@@ -179,12 +187,21 @@ async function apiRequest(endpoint, options = {}) {
     });
     clearTimeout(timeoutId);
     if (response.status === 401 && authenticated && typeof window !== "undefined") {
+      if (isRetry) {
+        clearStoredAuth();
+        config.onLogout?.();
+        throw new Error("Authentication failed. Please sign in again.");
+      }
       if (!isRefreshing) {
         isRefreshing = true;
-        const refreshed = await refreshAccessToken();
-        isRefreshing = false;
+        let refreshed = false;
+        try {
+          refreshed = await refreshAccessToken();
+        } finally {
+          isRefreshing = false;
+        }
         if (refreshed) {
-          return apiRequest(endpoint, options);
+          return apiRequestInternal(endpoint, options, true);
         } else {
           clearStoredAuth();
           config.onLogout?.();
@@ -194,21 +211,29 @@ async function apiRequest(endpoint, options = {}) {
         const REFRESH_TIMEOUT_MS = 3e4;
         return new Promise((resolve, reject) => {
           let settled = false;
-          let unsubscribe = null;
-          const timeoutId2 = setTimeout(() => {
+          const refreshTimeoutId = setTimeout(() => {
             if (!settled) {
               settled = true;
               unsubscribe?.();
               reject(new Error("Token refresh timed out. Please sign in again."));
             }
           }, REFRESH_TIMEOUT_MS);
-          unsubscribe = subscribeTokenRefresh(() => {
+          let unsubscribe = null;
+          try {
+            unsubscribe = subscribeTokenRefresh(() => {
+              if (!settled) {
+                settled = true;
+                clearTimeout(refreshTimeoutId);
+                apiRequestInternal(endpoint, options, true).then(resolve).catch(reject);
+              }
+            });
+          } catch (subscribeError) {
+            clearTimeout(refreshTimeoutId);
             if (!settled) {
               settled = true;
-              clearTimeout(timeoutId2);
-              apiRequest(endpoint, options).then(resolve).catch(reject);
+              reject(subscribeError);
             }
-          });
+          }
         });
       }
     }
@@ -294,6 +319,23 @@ var api = {
 };
 
 // src/core/api.ts
+async function fetchWithTimeout(url, init) {
+  const config = getConfig();
+  const fetchFn = config.fetch ?? fetch;
+  const timeoutMs = config.requestTimeout ?? 3e4;
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    return await fetchFn(url, { ...init, signal: controller.signal });
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "AbortError") {
+      throw new Error(`Request timed out after ${timeoutMs}ms`);
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
 var authApi = {
   // ============================================================================
   // Authentication
@@ -318,8 +360,9 @@ var authApi = {
       return extractData(response);
     } catch (error) {
       const config = getConfig();
-      config.onAuthError?.(error instanceof Error ? error : new Error("Logout API call failed"));
-      return { success: true };
+      const err = error instanceof Error ? error : new Error("Logout API call failed");
+      config.onAuthError?.(err);
+      return { success: true, serverError: err.message };
     }
   },
   /**
@@ -515,13 +558,12 @@ var authApi = {
    */
   async verifyMFAChallenge(data) {
     const config = getConfig();
-    const fetchFn = config.fetch ?? fetch;
     const requestBody = {
       code: data.code,
       type: data.method === "backup" ? "backup" : "totp",
       trustDevice: data.trustDevice
     };
-    const response = await fetchFn(`${config.baseUrl}/auth/mfa/challenge`, {
+    const response = await fetchWithTimeout(`${config.baseUrl}/auth/mfa/challenge`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -650,8 +692,7 @@ var authApi = {
       throw new Error("Not authenticated");
     }
     const config = getConfig();
-    const fetchFn = config.fetch ?? fetch;
-    const response = await fetchFn(`${config.baseUrl}/auth/sso/link`, {
+    const response = await fetchWithTimeout(`${config.baseUrl}/auth/sso/link`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -687,6 +728,75 @@ var authApi = {
     if (params?.type) queryParams.append("type", params.type);
     const response = await api.get(`/auth/security/events?${queryParams.toString()}`, true, customFetch);
     return extractData(response);
+  },
+  // ============================================================================
+  // User Roles
+  // ============================================================================
+  //
+  // Managing another user's roles. Requires `users:read` to list and
+  // `users:update` to change.
+  //
+  // Two server rules worth designing around rather than discovering:
+  //  - A role change does NOT affect that user's live session. Permissions are
+  //    computed when a token is minted, so the grant takes effect on their next
+  //    token refresh — not on their next request.
+  //  - The server refuses a change that would remove a user's last role, or
+  //    that would grant a role at or above the acting user's own level. Both
+  //    come back as errors, so surface them rather than assuming success.
+  /**
+   * List a user's roles.
+   *
+   * @example
+   * ```typescript
+   * const { roles, primaryRole } = await authApi.getUserRoles(userId);
+   * ```
+   */
+  async getUserRoles(userId, customFetch) {
+    const response = await api.get(
+      `/users/${userId}/roles`,
+      true,
+      customFetch
+    );
+    return extractData(response);
+  },
+  /**
+   * Grant a role to a user. Idempotent — granting a role they already hold
+   * succeeds and returns the unchanged set.
+   *
+   * @returns The user's full role set after the grant.
+   */
+  async grantUserRole(userId, role) {
+    const response = await api.put(
+      `/users/${userId}/roles/${role}`,
+      {},
+      true
+    );
+    return extractData(response);
+  },
+  /**
+   * Revoke a role from a user.
+   *
+   * Rejected by the server if it would leave the user with no roles.
+   *
+   * @returns The user's full role set after the revoke.
+   */
+  async revokeUserRole(userId, role) {
+    const response = await api.delete(
+      `/users/${userId}/roles/${role}`,
+      true
+    );
+    return extractData(response);
+  },
+  /**
+   * Replace a user's entire role set.
+   *
+   * Roles absent from `roles` are revoked, so read-modify-write against
+   * {@link getUserRoles} rather than passing a set built from stale state.
+   * Use {@link grantUserRole} / {@link revokeUserRole} for additive changes.
+   */
+  async setUserRoles(userId, roles) {
+    const response = await api.put(`/users/${userId}`, { roles }, true);
+    return extractData(response);
   }
 };
 

package/dist/{chunk-RKSETJ4V.js → chunk-ILRNO4WH.js}

@@ -1,6 +1,6 @@
-import { authService } from './chunk-TUHQ4FHC.js';
-import { authStore, currentUser, isAuthenticated, authActions } from './chunk-BK34CVH5.js';
-import { isInitialized, initAuth } from './chunk-EM7PUNZB.js';
+import { authService } from './chunk-VVREZ25E.js';
+import { authStore, currentUser, isAuthenticated, authActions } from './chunk-QBTMNWJH.js';
+import { isInitialized, initAuth, getUserRoles } from './chunk-O47YKG2F.js';
 
 // src/svelte/guards/auth-guard.ts
 function checkAuth(options = {}) {
@@ -88,11 +88,13 @@ function filterByAccess(items, user, options = {}) {
   const {
     requireAllRoles = false,
     requireAllPermissions = false,
-    hideUnrestrictedForGuests = false
+    hideUnrestrictedForGuests = false,
+    childrenKey,
+    pruneEmptyParents = true
   } = options;
-  const userRoles = user?.roles || (user?.role ? [user.role] : []);
+  const userRoles = getUserRoles(user);
   const userPerms = user?.permissions || [];
-  return items.filter((item) => {
+  function isVisible(item) {
     const hasRoleRestriction = item.roles && item.roles.length > 0;
     const hasPermRestriction = item.permissions && item.permissions.length > 0;
     if (!hasRoleRestriction && !hasPermRestriction) {
@@ -117,7 +119,28 @@ function filterByAccess(items, user, options = {}) {
       }
     }
     return true;
-  });
+  }
+  function filterLevel(level) {
+    const visible = level.filter(isVisible);
+    if (!childrenKey) {
+      return visible;
+    }
+    const result = [];
+    for (const item of visible) {
+      const children = item[childrenKey];
+      if (!Array.isArray(children)) {
+        result.push(item);
+        continue;
+      }
+      const filteredChildren = filterLevel(children);
+      if (pruneEmptyParents && children.length > 0 && filteredChildren.length === 0 && !item.href) {
+        continue;
+      }
+      result.push({ ...item, [childrenKey]: filteredChildren });
+    }
+    return result;
+  }
+  return filterLevel(items);
 }
 function filterNavSections(sections, user, options = {}) {
   return sections.map((section) => ({

package/dist/{chunk-EM7PUNZB.js → chunk-O47YKG2F.js}

@@ -36,6 +36,34 @@ function getDefaultStorage() {
     }
   };
 }
+function createSessionStorage() {
+  if (typeof window !== "undefined" && window.sessionStorage) {
+    return {
+      getItem: (key) => sessionStorage.getItem(key),
+      setItem: (key, value) => sessionStorage.setItem(key, value),
+      removeItem: (key) => sessionStorage.removeItem(key)
+    };
+  }
+  return {
+    getItem: () => null,
+    setItem: () => {
+    },
+    removeItem: () => {
+    }
+  };
+}
+function createMemoryStorage() {
+  const store = /* @__PURE__ */ new Map();
+  return {
+    getItem: (key) => store.get(key) ?? null,
+    setItem: (key, value) => {
+      store.set(key, value);
+    },
+    removeItem: (key) => {
+      store.delete(key);
+    }
+  };
+}
 function getStorage() {
   const cfg = getConfig();
   return cfg.storage ?? getDefaultStorage();
@@ -91,7 +119,8 @@ function isTokenExpired(token) {
   if (!payload || !payload.exp) {
     return true;
   }
-  return payload.exp * 1e3 < Date.now();
+  const CLOCK_SKEW_MS = 3e4;
+  return payload.exp * 1e3 < Date.now() - CLOCK_SKEW_MS;
 }
 function getTokenRemainingTime(token) {
   const payload = decodeJWT(token);
@@ -122,4 +151,60 @@ function extractClaims(token, claims) {
   return result;
 }
 
-export { decodeJWT, extractClaims, getConfig, getDefaultStorage, getFetch, getStorage, getTokenExpiration, getTokenRemainingTime, initAuth, isInitialized, isTokenExpired, isValidRedirectUrl, resetConfig };
+// src/core/roles.ts
+var ROLE_NAMES = [
+  "admin",
+  "manager",
+  "agent",
+  "builder",
+  "customer_service",
+  "demo",
+  "user",
+  "vendor",
+  "customer",
+  "subcontractor",
+  "guest"
+];
+var ROLE_HIERARCHY = {
+  guest: 0,
+  user: 1,
+  vendor: 1,
+  customer: 1,
+  subcontractor: 1,
+  agent: 2,
+  builder: 2,
+  customer_service: 2,
+  demo: 2,
+  manager: 3,
+  admin: 4
+};
+function getUserRoles(user) {
+  return user?.roles ?? [];
+}
+function computePrimaryRole(roles) {
+  const held = new Set(roles);
+  for (const role of ROLE_NAMES) {
+    if (held.has(role)) return role;
+  }
+  return "guest";
+}
+function getEffectiveLevel(roles) {
+  let max = 0;
+  for (const role of roles) {
+    max = Math.max(max, ROLE_HIERARCHY[role] ?? 0);
+  }
+  return max;
+}
+function hasRole(user, role) {
+  return getUserRoles(user).includes(role);
+}
+function hasAnyRole(user, roles) {
+  const held = getUserRoles(user);
+  return roles.some((role) => held.includes(role));
+}
+function hasAllRoles(user, roles) {
+  const held = getUserRoles(user);
+  return roles.every((role) => held.includes(role));
+}
+
+export { ROLE_HIERARCHY, ROLE_NAMES, computePrimaryRole, createMemoryStorage, createSessionStorage, decodeJWT, extractClaims, getConfig, getDefaultStorage, getEffectiveLevel, getFetch, getStorage, getTokenExpiration, getTokenRemainingTime, getUserRoles, hasAllRoles, hasAnyRole, hasRole, initAuth, isInitialized, isTokenExpired, isValidRedirectUrl, resetConfig };

package/dist/{chunk-BK34CVH5.js → chunk-QBTMNWJH.js}

@@ -1,7 +1,8 @@
-import { authApi } from './chunk-GRQL5FSH.js';
-import { decodeJWT, isInitialized, getConfig, getStorage, getDefaultStorage } from './chunk-EM7PUNZB.js';
+import { authApi } from './chunk-2N2MDCWL.js';
+import { isInitialized, getConfig, hasRole, hasAnyRole, hasAllRoles, decodeJWT, getStorage, getDefaultStorage } from './chunk-O47YKG2F.js';
 
 // src/svelte/stores/auth.svelte.ts
+var STORAGE_VERSION = 2;
 function getStorageKey() {
   return isInitialized() ? getConfig().storageKey ?? "classic_auth" : "classic_auth";
 }
@@ -11,32 +12,37 @@ function getSessionTokenKey() {
 function getStorageAdapter() {
   return isInitialized() ? getStorage() : getDefaultStorage();
 }
+function emptyAuthState() {
+  return {
+    accessToken: null,
+    refreshToken: null,
+    user: null,
+    isAuthenticated: false
+  };
+}
 function loadAuthFromStorage() {
   try {
     const storage = getStorageAdapter();
     const data = storage.getItem(getStorageKey());
     if (!data) {
-      return {
-        accessToken: null,
-        refreshToken: null,
-        user: null,
-        isAuthenticated: false
-      };
+      return emptyAuthState();
     }
     const parsed = JSON.parse(data);
+    if (parsed.version !== STORAGE_VERSION) {
+      storage.removeItem(getStorageKey());
+      return emptyAuthState();
+    }
+    const accessToken = parsed.accessToken ?? null;
     return {
-      accessToken: parsed.accessToken ?? null,
+      accessToken,
       refreshToken: parsed.refreshToken ?? null,
-      user: parsed.user ?? null,
-      isAuthenticated: !!parsed.accessToken && !!parsed.user
+      // Normalize on read as well as write: a payload can be stale, hand-written,
+      // or predate a field, and every role predicate downstream reads `roles`.
+      user: parsed.user ? normalizeUser(parsed.user, accessToken) : null,
+      isAuthenticated: !!accessToken && !!parsed.user
     };
   } catch {
-    return {
-      accessToken: null,
-      refreshToken: null,
-      user: null,
-      isAuthenticated: false
-    };
+    return emptyAuthState();
   }
 }
 function saveAuthToStorage(state) {
@@ -46,11 +52,22 @@ function saveAuthToStorage(state) {
     if (!state.accessToken) {
       storage.removeItem(key);
     } else {
-      storage.setItem(key, JSON.stringify(state));
+      storage.setItem(key, JSON.stringify({ ...state, version: STORAGE_VERSION }));
     }
   } catch {
   }
 }
+function normalizeUser(user, accessToken) {
+  const jwtPayload = accessToken ? decodeJWT(accessToken) : null;
+  return {
+    ...user,
+    roles: firstNonEmpty(jwtPayload?.roles, user.roles),
+    permissions: firstNonEmpty(jwtPayload?.permissions, user.permissions)
+  };
+}
+function firstNonEmpty(...candidates) {
+  return candidates.find((candidate) => candidate && candidate.length > 0) ?? [];
+}
 var AuthStore = class {
   constructor() {
     this.subscribers = /* @__PURE__ */ new Set();
@@ -90,12 +107,7 @@ var AuthStore = class {
    * Set auth data after successful login.
    */
   setAuth(accessToken, refreshToken, user, sessionToken) {
-    const jwtPayload = decodeJWT(accessToken);
-    const userWithPermissions = {
-      ...user,
-      permissions: user.permissions || jwtPayload?.permissions || [],
-      roles: user.roles || jwtPayload?.roles || (user.role ? [user.role] : [])
-    };
+    const userWithPermissions = normalizeUser(user, accessToken);
     this.state = {
       accessToken,
       refreshToken,
@@ -119,12 +131,7 @@ var AuthStore = class {
    * Update tokens (e.g., after refresh).
    */
   updateTokens(accessToken, refreshToken) {
-    const jwtPayload = decodeJWT(accessToken);
-    const updatedUser = this.state.user ? {
-      ...this.state.user,
-      permissions: jwtPayload?.permissions || this.state.user.permissions || [],
-      roles: jwtPayload?.roles || this.state.user.roles || (this.state.user.role ? [this.state.user.role] : [])
-    } : null;
+    const updatedUser = this.state.user ? normalizeUser(this.state.user, accessToken) : null;
     this.state = {
       ...this.state,
       accessToken,
@@ -141,12 +148,7 @@ var AuthStore = class {
    * Update user data (e.g., after profile update).
    */
   updateUser(user) {
-    const jwtPayload = this.state.accessToken ? decodeJWT(this.state.accessToken) : null;
-    const updatedUser = {
-      ...user,
-      permissions: user.permissions || jwtPayload?.permissions || [],
-      roles: user.roles || jwtPayload?.roles || (user.role ? [user.role] : [])
-    };
+    const updatedUser = normalizeUser(user, this.state.accessToken);
     this.state = {
       ...this.state,
       user: updatedUser
@@ -235,22 +237,24 @@ var AuthStore = class {
     return this.state.user?.permissions?.includes(permission) ?? false;
   }
   /**
-   * Check if user has a specific role.
+   * Check if the user holds a specific role.
+   *
+   * Exact membership — holding `admin` does not imply `agent`.
    */
   hasRole(role) {
-    return this.state.user?.roles?.includes(role) ?? false;
+    return hasRole(this.state.user, role);
   }
   /**
-   * Check if user has any of the specified roles.
+   * Check if the user holds any of the specified roles.
    */
   hasAnyRole(roles) {
-    return roles.some((role) => this.state.user?.roles?.includes(role)) ?? false;
+    return hasAnyRole(this.state.user, roles);
   }
   /**
-   * Check if user has all of the specified roles.
+   * Check if the user holds all of the specified roles.
    */
   hasAllRoles(roles) {
-    return roles.every((role) => this.state.user?.roles?.includes(role)) ?? false;
+    return hasAllRoles(this.state.user, roles);
   }
   /**
    * Check if user has any of the specified permissions.