@checkstack/auth-frontend 0.7.3 → 0.7.5

package/CHANGELOG.md

@@ -1,5 +1,138 @@
 # @checkstack/auth-frontend
 
+## 0.7.5
+
+### Patch Changes
+
+- 0626782: Guard the role editor against granting inert (and misleading) permissions to the
+  anonymous role.
+
+  RPC procedures carry two independent axes: `userType` (the hard authentication
+  gate) and `access` rules (authorization). An admin can grant the anonymous role
+  any access rule, but if the procedures needing that rule are `userType:
+"authenticated"`/`"user"`, the grant does nothing - the auth middleware rejects
+  unauthenticated callers BEFORE access rules are checked (so there is no security
+  hole; the grant is simply inert). After anonymous users started seeing
+  permission-gated UI, such a grant would surface as visible-but-broken controls.
+
+  - The backend now computes, from contract metadata, the access rules an anonymous
+    caller can actually use (a rule is "usable" iff at least one `public` procedure
+    requires it) via `pluginManager.getAnonymousUsableAccessRuleIds()`, exposed to
+    plugins through the plugin environment.
+  - `auth.getAccessRules` annotates each rule with `anonymousUsable`.
+  - `auth.updateRole` REFUSES to ADD a non-usable rule to the anonymous role
+    (existing grants are untouched, so no configuration can be wedged). This is a
+    guardrail, not an enforcement change - RPC authorization is unchanged.
+  - The role editor disables non-usable rules (with an explanation) when editing
+    the anonymous role.
+
+  Verified live: `getAccessRules` reports 11 anonymous-usable vs 58 not; granting
+  `incident.incident.manage` to the anonymous role returns HTTP 400 with a clear
+  message.
+
+- 56e7c75: Hide navigation, actions and links that the current user cannot use, so anonymous
+  and read-only users no longer see entries that lead to "Access Denied" or to
+  actions the server would reject.
+
+  - **Sidebar**: a nav entry can now declare a dynamic `nav.isVisible({ accessRules, isAuthenticated })` predicate (in addition to the static `accessRule`). A group whose every entry is filtered out is no longer rendered. The filtering/grouping logic is extracted to a pure, unit-tested helper.
+  - **Infrastructure**: its sidebar entry is shown only when the user can READ at least one contributed tab (queue, cache, …), instead of always (it previously had no static rule because tabs are contributed at runtime).
+  - **Notification Settings**: hidden from anonymous users - notifications are per-user, so an anonymous visitor can't have any.
+  - **Anomaly Mute / Suppress**: the "Mute" / "Mute all" controls (a per-user preference) are hidden from anonymous visitors; the "Suppress" control is gated on `anomalyAccess.feed.manage`. Both were previously always visible.
+  - **Dashboard**: the "Open Catalog" actions (which open the manage-only Catalog config page) are hidden from users without `catalogAccess.system.manage`, and the "View catalog" link is gated on `catalogAccess.system.read`.
+  - **Dashboard status signals**: the per-system status rows contributed by plugins (`SystemSignalsSlot`) now render as a LINK only when the user can open the target, and as plain text otherwise. `SystemSignal` gains an optional `accessRule`; the healthcheck, anomaly, and dependency fillers set it for their gated targets (check-history / assignments / dependency-map). Signals pointing at ungated pages (incident / maintenance / SLO detail) stay links.
+  - **Plugin Manager**: the "Install plugin" button (which opens the install-gated page) is hidden from users with only `plugin` view access.
+  - **Satellites**: the page is entirely manage-gated, but its route/sidebar entry was gated on `read`, so read-only users saw the nav item and hit "Access Denied" on click. The route and nav entry now require `satellite.manage`.
+
+  The `@checkstack/ai-backend` bump is only the regenerated bundled docs index
+  (the frontend routing guide gained the `nav.isVisible` section); no code change.
+
+  **BREAKING (`@checkstack/frontend-api`):** the `AccessApi` interface gains a
+  required `useIsAuthenticated()` method. Custom `AccessApi` implementations must
+  add it (it returns `{ loading, isAuthenticated }`). The built-in auth
+  implementation and the no-auth fallback already do. `NavEntry` also gains an
+  optional `isVisible` predicate (purely additive).
+
+- 56e7c75: Fix frontend access checks to use FULLY-QUALIFIED access-rule ids, and resolve
+  the anonymous role on the frontend.
+
+  Granted access-rule ids are stored fully-qualified as `{pluginId}.{ruleId}` (e.g.
+  `incident.incident.read`) so two plugins defining the same short rule id never
+  collide. The frontend, however, was checking the UNqualified id (`incident.read`)
+  via `isAccessRuleSatisfied`, so every check failed for any user without the `*`
+  (admin) grant - masked in development because dev-auth grants `*`. This silently
+  broke ALL non-admin frontend gating (route guards, sidebar entries, and
+  `useAccess`-based button/link gating).
+
+  - **`@checkstack/common`**: `AccessRule` now carries a REQUIRED owning `pluginId`;
+    `access()` / `accessPair()` require and stamp it; `isAccessRuleSatisfied`
+    qualifies the rule (`{pluginId}.{id}`, plus the manage->read escalation) and
+    matches ONLY the qualified form. There is intentionally NO unqualified fallback
+    - matching a bare id would let one plugin's grant satisfy another plugin's
+      identically-named rule (a cross-plugin privilege-escalation flaw). Every plugin
+      that defines access rules now passes its own `pluginId`.
+  - **`@checkstack/backend`**: `pluginManager.getAllAccessRules()` no longer strips
+    the `pluginId` field (the rule `id` is already fully-qualified for the DB sync).
+  - **Route guard** (`@checkstack/frontend` / `@checkstack/frontend-api`) now
+    checks the FULL rule object (so it qualifies and escalates), not a bare id.
+  - **Anonymous role on the frontend**: the `accessRules` procedure is now
+    `public`, returning the configurable anonymous role's grants to unauthenticated
+    callers; `useAccessRules` fetches them for guests instead of returning an empty
+    set. So anonymous UI now reflects exactly what the anonymous role is allowed -
+    which an admin can change (`isPublic` is only the seeded default).
+  - Incident / maintenance / SLO detail routes are now read-gated (their read rule
+    is an `isPublic` default, so the anonymous role holds it unless an admin
+    revokes it); their dashboard status signals carry that rule and render as a
+    link only when the viewer may open it.
+
+  **BREAKING (`@checkstack/common`):** `AccessRule.pluginId` is now REQUIRED, and
+  `access()` / `accessPair()` require a `pluginId` option. `isAccessRuleSatisfied`
+  matches ONLY the fully-qualified `{pluginId}.{ruleId}` form - the previous
+  unqualified fallback is removed, because it was a cross-plugin
+  privilege-escalation flaw. Any code constructing an `AccessRule` or calling
+  `access()`/`accessPair()` must supply the owning `pluginId`.
+
+  Verified live against an anonymous caller: read pages resolve (qualified match),
+  manage actions are denied, manage->read escalation and `*` still work.
+
+- Updated dependencies [0626782]
+- Updated dependencies [56e7c75]
+- Updated dependencies [56e7c75]
+  - @checkstack/auth-common@0.8.3
+  - @checkstack/frontend-api@0.9.0
+  - @checkstack/ui@1.15.1
+  - @checkstack/common@0.15.0
+
+## 0.7.4
+
+### Patch Changes
+
+- fb705df: Upgrade React 18 to React 19 across the platform.
+
+  **BREAKING (runtime frontend plugins):** React is shared as a Module Federation
+  singleton, so the host now provides **React 19** to every runtime plugin.
+  Frontend plugins built against React 18 must be rebuilt against React 19
+  (`react` / `react-dom` `^19`). The scaffold templates and the host/plugin MF
+  `requiredVersion` are updated to `^19`. `react` (and now `react-dom`) are pinned
+  to a single version across the workspace via syncpack so the singleton can never
+  skew (react and react-dom must match exactly).
+
+  The React 19 removed-API surface was audited - the codebase used only no-arg
+  `useRef()` (now `useRef<T | undefined>(undefined)`); no `ReactDOM.render`,
+  legacy context, string refs, or function-component `defaultProps`. This also
+  clears the `IMPORT_IS_UNDEFINED` build warnings for `React.use` /
+  `React.useOptimistic` (react-router 7 feature-detection), which React 19 exports.
+
+  The downstream `*-frontend` packages (and `@checkstack/infrastructure-common`)
+  receive only the mechanical `react` dependency bump (`patch`); the framework
+  packages carrying the shared-singleton change are bumped `minor`.
+
+- Updated dependencies [9d8961c]
+- Updated dependencies [fb705df]
+  - @checkstack/ui@1.15.0
+  - @checkstack/frontend-api@0.8.0
+  - @checkstack/auth-common@0.8.2
+  - @checkstack/common@0.14.1
+
 ## 0.7.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -18,21 +18,21 @@
     "test:e2e": "bunx playwright test"
   },
   "dependencies": {
-    "@checkstack/frontend-api": "0.7.2",
-    "@checkstack/common": "0.14.1",
-    "@checkstack/ui": "1.14.0",
-    "react": "^18.3.1",
+    "@checkstack/frontend-api": "0.9.0",
+    "@checkstack/common": "0.15.0",
+    "@checkstack/ui": "1.15.1",
+    "react": "19.2.7",
     "react-router-dom": "^7.16.0",
     "lucide-react": "^1.17.0",
     "better-auth": "^1.6.13",
-    "@checkstack/auth-common": "0.8.2"
+    "@checkstack/auth-common": "0.8.3"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.0.0",
     "@playwright/test": "^1.60.0",
-    "@checkstack/test-utils-frontend": "0.1.0",
+    "@checkstack/test-utils-frontend": "0.1.1",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.5.0"
+    "@checkstack/scripts": "0.6.1"
   }
 }

package/src/api.ts

@@ -31,6 +31,12 @@ export interface Role {
 export interface AccessRuleEntry {
   id: string;
   description?: string;
+  /**
+   * Whether an anonymous caller can actually use this rule (a public endpoint
+   * requires it). When false, granting it to the anonymous role is inert, so the
+   * role editor disables it for that role.
+   */
+  anonymousUsable?: boolean;
 }
 
 export interface AuthStrategy {

package/src/components/RoleDialog.tsx

@@ -62,6 +62,14 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
   const isAdminRole = role?.id === "admin";
   // Disable access rules for admin (wildcard) or user's own roles (prevent elevation)
   const accessRulesDisabled = isAdminRole || isUserRole;
+  // The anonymous role may only hold rules that a PUBLIC endpoint actually uses;
+  // granting an authenticated-only rule to it is inert (the server rejects
+  // unauthenticated callers before checking rules). Mirrors the backend guardrail.
+  const isAnonymousRole = role?.id === "anonymous";
+  const isBlockedForAnonymous = (perm: AccessRuleEntry): boolean =>
+    isAnonymousRole &&
+    perm.anonymousUsable === false &&
+    !selectedAccessRules.has(perm.id);
 
   // Group access rules by plugin
   const accessRulesByPlugin: Record<string, AccessRuleEntry[]> = {};
@@ -78,6 +86,10 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
     if (newSelected.has(accessRuleId)) {
       newSelected.delete(accessRuleId);
     } else {
+      // Defense in depth: never add a rule the anonymous role can't use (the
+      // checkbox is also disabled, and the backend rejects it).
+      const perm = accessRulesList.find((p) => p.id === accessRuleId);
+      if (perm && isBlockedForAnonymous(perm)) return;
       newSelected.add(accessRuleId);
     }
     setSelectedAccessRules(newSelected);
@@ -158,6 +170,16 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                 </AlertDescription>
               </Alert>
             )}
+            {isAnonymousRole && (
+              <Alert variant="info" className="mb-3">
+                <AlertDescription>
+                  The anonymous role applies to signed-out visitors. Rules that
+                  no public page or endpoint uses are disabled here - granting
+                  them would have no effect, since anonymous visitors are
+                  rejected before those rules are checked.
+                </AlertDescription>
+              </Alert>
+            )}
             <div className="border rounded-lg">
               <Accordion
                 type="multiple"
@@ -236,14 +258,21 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                           }
 
                           // Use editable checkbox design when access rules are editable
+                          const blockedForAnonymous =
+                            isBlockedForAnonymous(perm);
                           return (
                             <div
                               key={perm.id}
-                              className="flex items-start space-x-3 p-2 rounded-md hover:bg-muted/50 transition-colors"
+                              className={`flex items-start space-x-3 p-2 rounded-md transition-colors ${
+                                blockedForAnonymous
+                                  ? "opacity-50"
+                                  : "hover:bg-muted/50"
+                              }`}
                             >
                               <Checkbox
                                 id={`perm-${perm.id}`}
                                 checked={selectedAccessRules.has(perm.id)}
+                                disabled={blockedForAnonymous}
                                 onCheckedChange={() =>
                                   handleToggleAccessRule(perm.id)
                                 }
@@ -251,7 +280,11 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                               />
                               <label
                                 htmlFor={`perm-${perm.id}`}
-                                className="text-sm cursor-pointer flex-1 space-y-1"
+                                className={`text-sm flex-1 space-y-1 ${
+                                  blockedForAnonymous
+                                    ? "cursor-not-allowed"
+                                    : "cursor-pointer"
+                                }`}
                               >
                                 <div className="font-medium">{perm.id}</div>
                                 {perm.description && (
@@ -259,6 +292,12 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                                     {perm.description}
                                   </div>
                                 )}
+                                {blockedForAnonymous && (
+                                  <div className="text-xs text-muted-foreground italic">
+                                    Not available to anonymous visitors (no public
+                                    endpoint uses this rule).
+                                  </div>
+                                )}
                               </label>
                             </div>
                           );

package/src/hooks/useAccessRules.ts

@@ -7,25 +7,26 @@ export const useAccessRules = () => {
   const authClient = usePluginClient(AuthApi);
   const { data: session, isPending: sessionPending } = authApi.useSession();
 
-  // Query: Fetch access rules (only when user is authenticated)
+  // Fetch the caller's EFFECTIVE access rules once the session is resolved -
+  // for authenticated users their own grants, for anonymous visitors the
+  // configurable "anonymous" role's grants (the `accessRules` procedure is
+  // public). Gating on these makes guest UI match what a guest may actually do.
   const { data, isLoading } = authClient.accessRules.useQuery(
     {},
     {
-      enabled: !sessionPending && !!session?.user,
+      enabled: !sessionPending,
     }
   );
 
-  // If no session or pending, return empty access rules
+  // `isAuthenticated` lets callers additionally gate logged-in-only UI (e.g.
+  // Notification Settings) that needs a real user rather than a specific rule.
   if (sessionPending) {
-    return { accessRules: [], loading: true };
-  }
-
-  if (!session?.user) {
-    return { accessRules: [], loading: false };
+    return { accessRules: [], loading: true, isAuthenticated: false };
   }
 
   return {
     accessRules: data?.accessRules ?? [],
     loading: isLoading,
+    isAuthenticated: !!session?.user,
   };
 };

package/src/index.test.tsx

@@ -14,6 +14,7 @@ const testReadAccess: AccessRule = {
   resource: "test",
   level: "read",
   description: "Test read access",
+  pluginId: "test",
 };
 
 const testManageAccess: AccessRule = {
@@ -21,6 +22,7 @@ const testManageAccess: AccessRule = {
   resource: "test",
   level: "manage",
   description: "Test manage access",
+  pluginId: "test",
 };
 
 const otherAccess: AccessRule = {
@@ -28,6 +30,7 @@ const otherAccess: AccessRule = {
   resource: "other",
   level: "read",
   description: "Other read access",
+  pluginId: "other",
 };
 
 describe("AuthAccessApi", () => {
@@ -39,7 +42,7 @@ describe("AuthAccessApi", () => {
 
   it("should return true if user has the access rule", () => {
     (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
-      accessRules: ["test.read"],
+      accessRules: ["test.test.read"],
       loading: false,
     });
 
@@ -51,7 +54,7 @@ describe("AuthAccessApi", () => {
 
   it("should return false if user is missing the access rule", () => {
     (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
-      accessRules: ["other.read"],
+      accessRules: ["other.other.read"],
       loading: false,
     });
 
@@ -99,7 +102,7 @@ describe("AuthAccessApi", () => {
 
   it("should return true if user has manage access for a manage check", () => {
     (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
-      accessRules: ["test.manage"],
+      accessRules: ["test.test.manage"],
       loading: false,
     });
 
@@ -123,7 +126,7 @@ describe("AuthAccessApi", () => {
 
   it("should return true if user has manage access for a read check", () => {
     (useAccessRules as ReturnType<typeof mock>).mockReturnValue({
-      accessRules: ["test.manage"],
+      accessRules: ["test.test.manage"],
       loading: false,
     });
 

package/src/lib/AuthAccessApi.ts

@@ -25,4 +25,10 @@ export class AuthAccessApi implements AccessApi {
       allowed: isAccessRuleSatisfied(accessRules, accessRule),
     };
   }
+
+  useIsAuthenticated(): { loading: boolean; isAuthenticated: boolean } {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- Class adapter delegates to hook; consumed as API, not a component
+    const { loading, isAuthenticated } = useAccessRules();
+    return { loading, isAuthenticated };
+  }
 }