Skip to main content

:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-mcp.json. Edit the source MCP server (not this file), then run npm run generate. :::

Gate content by role/permission

When to use: Some UI (e.g. admin actions) must only appear for users with a specific role.

Prerequisites​

  • @rystad/auth is wired in main.tsx (it is, in the scaffold).

Steps​

Step 1: Read auth requirements and available claims/roles.​

Tools: get_auth_requirements

Step 2: Use usePermissions() / AuthGuard from @rystad/auth — never a custom check.​

Step 3: Run the quality gate.​

Full recipe definition​

The complete machine-readable recipe as returned by the MCP server:

{
  "id": "add-auth-gated-content",
  "title": "Gate content by role/permission",
  "when": "Some UI (e.g. admin actions) must only appear for users with a specific role.",
  "prerequisites": [
    "`@rystad/auth` is wired in main.tsx (it is, in the scaffold)."
  ],
  "steps": [
    {
      "action": "Read auth requirements and available claims/roles.",
      "tools": [
        "get_auth_requirements"
      ],
      "note": "Roles come from claims (e.g. RE_Developer, RE_Admin). Do not invent role names."
    },
    {
      "action": "Use `usePermissions()` / `AuthGuard` from `@rystad/auth` — never a custom check.",
      "files": [
        "src/components/{feature}/{name}.tsx"
      ],
      "note": "hasRole/hasAnyRole/hasAllRoles for conditional UI; <AuthGuard requiredRoles={[...]}> to protect a subtree."
    },
    {
      "action": "Run the quality gate.",
      "note": "npm run verify"
    }
  ],
  "filesToCreate": [],
  "validation": [
    "`npm run verify` passes.",
    "Client gating is UX only — real enforcement is server-side at the gateway."
  ],
  "doneCriteria": [
    "verify green",
    "No custom auth/token logic introduced."
  ],
  "commonMistakes": [
    "Inventing role names not present in claims.",
    "Treating client-side hiding as security (the gateway enforces access)."
  ],
  "relatedRecipes": []
}