What role does the user have?

What grants exist on this object?

What is true about the subject, the resource, the requested action, and the environment right now?

Access depends on facts, not just names.

permit if
  subject.department == resource.ownerDepartment
  and action == "approve"
  and resource.status == "pending_approval"
  and resource.amount <= subject.approvalLimit
  and environment.mfaAgeMinutes <= 15

React evaluates policy from user attributes and hides buttons.

Server evaluates policy from trusted attributes.
React receives a permission projection and renders the safest useful UI.

subject attributes
resource attributes
action attributes
environment attributes

const subject = {
  id: "user_123",
  tenantId: "tenant_001",
  department: "enforcement",
  region: "west-java",
  clearance: "restricted",
  approvalLimit: 50_000_000,
  employmentType: "internal",
  groups: ["case-reviewers", "regional-supervisors"],
  mfaVerifiedAt: "2026-07-08T02:10:00Z",
  riskLevel: "normal",
};

{
  "department": "compliance",
  "approvalLimit": 999999999
}

const caseResource = {
  id: "case_900",
  tenantId: "tenant_001",
  ownerDepartment: "enforcement",
  region: "west-java",
  classification: "restricted",
  status: "pending_approval",
  assignedInvestigatorId: "user_777",
  amount: 35_000_000,
  createdAt: "2026-06-21T10:30:00Z",
  sealed: false,
};

type CaseAction =
  | "case.read"
  | "case.update"
  | "case.submit"
  | "case.approve"
  | "case.reject"
  | "case.export"
  | "case.seal"
  | "case.assign";

clickApproveButton
openModal
showGreenButton

case.approve
case.reassign
case.export
case.seal
penalty.override

const environment = {
  requestTime: "2026-07-08T03:00:00Z",
  ipCountry: "ID",
  deviceTrust: "managed",
  networkZone: "corporate-vpn",
  sessionAgeMinutes: 45,
  mfaAgeMinutes: 7,
  supportTicketId: "SUP-1234",
  incidentMode: false,
};

type Decision = "permit" | "deny";

type AuthorizationRequest = {
  subject: SubjectAttributes;
  action: string;
  resource: ResourceAttributes;
  environment: EnvironmentAttributes;
};

function decide(req: AuthorizationRequest): Decision {
  if (req.subject.tenantId !== req.resource.tenantId) return "deny";
  if (req.action !== "case.approve") return "deny";
  if (req.resource.status !== "pending_approval") return "deny";
  if (req.resource.amount > req.subject.approvalLimit) return "deny";
  if (req.environment.mfaAgeMinutes > 15) return "deny";

  return "permit";
}

input attributes -> policy evaluation -> decision + reason + obligations

{
  "resource": {
    "type": "case",
    "id": "case_900"
  },
  "allowedActions": [
    "case.read",
    "case.comment",
    "case.submit"
  ],
  "deniedActions": {
    "case.approve": {
      "reasonCode": "AMOUNT_EXCEEDS_APPROVAL_LIMIT",
      "message": "This case exceeds your approval limit.",
      "requestable": true
    },
    "case.seal": {
      "reasonCode": "INSUFFICIENT_CLEARANCE",
      "message": "Restricted clearance is required.",
      "requestable": false
    }
  },
  "obligations": {
    "case.export": {
      "requiresMfa": true,
      "maxRows": 1000
    }
  },
  "policyVersion": "case-policy@2026-07-08.1",
  "evaluatedAt": "2026-07-08T03:00:00Z"
}

canApprove: true

type PermissionDecision = {
  allowed: boolean;
  reasonCode?:
    | "NOT_AUTHENTICATED"
    | "TENANT_MISMATCH"
    | "RESOURCE_NOT_FOUND_OR_NOT_ACCESSIBLE"
    | "INSUFFICIENT_ROLE"
    | "INSUFFICIENT_CLEARANCE"
    | "WORKFLOW_STATE_NOT_ALLOWED"
    | "AMOUNT_EXCEEDS_APPROVAL_LIMIT"
    | "MFA_REQUIRED"
    | "SESSION_EXPIRED"
    | "POLICY_UNAVAILABLE";
  message?: string;
  requestable?: boolean;
  requiresMfa?: boolean;
  constraints?: Record<string, unknown>;
  policyVersion?: string;
  evaluatedAt?: string;
};

type ActionPermissionMap<Action extends string> = Record<Action, PermissionDecision>;

type CasePermissionProjection = {
  resourceType: "case";
  resourceId: string;
  actions: ActionPermissionMap<
    | "case.read"
    | "case.update"
    | "case.submit"
    | "case.approve"
    | "case.reject"
    | "case.export"
  >;
  fieldPermissions?: Record<string, PermissionDecision>;
  policyVersion: string;
  evaluatedAt: string;
};

function ApprovalButton({ permissions }: { permissions: CasePermissionProjection }) {
  const decision = permissions.actions["case.approve"];

  if (decision.allowed) {
    return <button type="submit">Approve</button>;
  }

  if (decision.requiresMfa) {
    return <button type="button">Verify identity to approve</button>;
  }

  if (decision.requestable) {
    return <button type="button">Request approval access</button>;
  }

  return (
    <button type="button" disabled title={decision.message ?? "Not allowed"}>
      Approve
    </button>
  );
}

A case reviewer can edit the summary field.
Only a supervisor can edit the penalty recommendation.
Only an assigned investigator can edit evidence notes.
A sealed case makes all fields read-only except privileged review comments.

<input disabled={user.role !== "supervisor"} />

{
  "fieldPermissions": {
    "summary": {
      "read": { "allowed": true },
      "update": { "allowed": true }
    },
    "penaltyRecommendation": {
      "read": { "allowed": true },
      "update": {
        "allowed": false,
        "reasonCode": "INSUFFICIENT_CLEARANCE",
        "message": "Supervisor clearance is required."
      }
    },
    "evidenceNotes": {
      "read": { "allowed": true },
      "update": {
        "allowed": false,
        "reasonCode": "NOT_ASSIGNED_INVESTIGATOR"
      }
    }
  }
}

type FieldPermission = {
  read: PermissionDecision;
  update: PermissionDecision;
};

function PermissionedTextField({
  name,
  label,
  permission,
}: {
  name: string;
  label: string;
  permission: FieldPermission;
}) {
  if (!permission.read.allowed) return null;

  return (
    <label>
      {label}
      <input name={name} readOnly={!permission.update.allowed} />
      {!permission.update.allowed && permission.update.message ? (
        <small>{permission.update.message}</small>
      ) : null}
    </label>
  );
}

type CaseCommand =
  | { type: "submit"; caseId: string }
  | { type: "approve"; caseId: string; comment: string }
  | { type: "reject"; caseId: string; reason: string }
  | { type: "seal"; caseId: string };

Can subject perform this transition on this resource from its current state?

subject.tenantId must match resource.tenantId

function assertTenantBoundary(subject: Subject, resource: Resource) {
  if (subject.tenantId !== resource.tenantId) {
    throw new ForbiddenError("TENANT_MISMATCH");
  }
}

function canApproveCase(subject: Subject, resource: CaseResource, env: Env) {
  assertTenantBoundary(subject, resource);

  return (
    subject.department === resource.ownerDepartment &&
    subject.clearance >= resource.classification &&
    resource.status === "under_review" &&
    env.mfaAgeMinutes <= 15
  );
}

["case", caseId]

["tenant", tenantId, "case", caseId]

const canApprove = useMemo(() => {
  return user.approvalLimit >= case.amount;
}, []);

const decision = permissions.actions["case.approve"];

type PermissionProjectionMeta = {
  evaluatedAt: string;
  expiresAt?: string;
  policyVersion: string;
  subjectVersion?: string;
  resourceVersion?: string;
};

subjectId + subjectVersion + action + resourceId + resourceVersion + environmentBucket + policyVersion

type DecisionCacheKey = {
  subjectId: string;
  subjectVersion: string;
  action: string;
  resourceType: string;
  resourceId: string;
  resourceVersion: string;
  tenantId: string;
  policyVersion: string;
  assuranceBucket: "fresh-mfa" | "stale-mfa" | "no-mfa";
};

"all supervisors can approve all pending cases"

"user_123 can approve case_900 under policy version X, case version Y, subject version Z, MFA bucket fresh"

TENANT_MISMATCH
RESOURCE_CLASSIFICATION_TOO_HIGH
AMOUNT_EXCEEDS_APPROVAL_LIMIT
WORKFLOW_STATE_NOT_ALLOWED
MFA_REQUIRED
NOT_ASSIGNED

{
  "allowed": false,
  "reasonCode": "RESOURCE_CLASSIFICATION_TOO_HIGH",
  "message": "This sealed case requires Level 5 clearance."
}

{
  "allowed": false,
  "reasonCode": "RESOURCE_NOT_FOUND_OR_NOT_ACCESSIBLE",
  "message": "The requested resource could not be found or is not accessible."
}

internalReasonCode
externalReasonCode
userMessage
auditMessage
supportCode

{
  "allowed": false,
  "externalReasonCode": "NOT_ACCESSIBLE",
  "userMessage": "You do not have access to this case.",
  "supportCode": "AUTHZ-8F3K2"
}

Permit export if:
  subject has case.export permission
  and resource.classification <= subject.clearance
  and environment.mfaAgeMinutes <= 10

{
  "allowed": false,
  "reasonCode": "MFA_REQUIRED",
  "requiresMfa": true,
  "challenge": {
    "type": "webauthn-or-totp",
    "returnTo": "/cases/case_900/export"
  }
}

if (decision.requiresMfa) {
  return (
    <button onClick={() => startStepUp({ returnTo: currentIntent })}>
      Verify identity to export
    </button>
  );
}

Do not trust that the button triggered step-up.
Re-check MFA freshness on export endpoint.

<button disabled={!canApproveCases}>Approve selected</button>

{
  "bulkAction": "case.approve",
  "summary": {
    "total": 50,
    "allowed": 37,
    "denied": 13
  },
  "items": [
    {
      "id": "case_1",
      "allowed": true
    },
    {
      "id": "case_2",
      "allowed": false,
      "reasonCode": "AMOUNT_EXCEEDS_APPROVAL_LIMIT"
    }
  ]
}

Can the user read case_900?

Which cases can the user list?

where tenant_id = :tenantId
  and region in (:subjectRegions)
  and classification <= :subjectClearance

Never infer total resource existence from list counts unless the backend contract allows it.

There are 12 cases, but you cannot see them.

No accessible cases match your filters.

GET /cases/search?q=tax
React filters out restricted cases

GET /cases/search?q=tax
Server returns only accessible cases

{
  "totalMatches": 532,
  "visibleMatches": 3
}

track("approval_denied", {
  caseId,
  reason: "RESOURCE_CLASSIFICATION_TOO_HIGH",
  classification: "sealed",
});

track("authorization_denied", {
  action: "case.approve",
  externalReasonCode: "NOT_ALLOWED",
  correlationId,
});

{
  "case": {
    "id": "case_900",
    "status": "under_review"
  },
  "permissions": {
    "case.approve": {
      "allowed": true
    },
    "case.reject": {
      "allowed": true
    },
    "case.seal": {
      "allowed": false,
      "reasonCode": "WORKFLOW_STATE_NOT_ALLOWED"
    }
  }
}

POST /authorization/check
Content-Type: application/json

{
  "checks": [
    { "resourceType": "case", "resourceId": "case_900", "action": "case.approve" },
    { "resourceType": "case", "resourceId": "case_900", "action": "case.export" }
  ]
}

{
  "results": [
    {
      "resourceType": "case",
      "resourceId": "case_900",
      "action": "case.approve",
      "allowed": true
    },
    {
      "resourceType": "case",
      "resourceId": "case_900",
      "action": "case.export",
      "allowed": false,
      "reasonCode": "MFA_REQUIRED",
      "requiresMfa": true
    }
  ]
}

export async function loader({ params, request }: LoaderArgs) {
  const session = await requireSession(request);
  const result = await api.getCaseWithPermissions(session, params.caseId);

  if (!result.permissions.actions["case.read"].allowed) {
    throw new Response("Forbidden", { status: 403 });
  }

  return result;
}

const canOpenAdminArea = session.capabilities.includes("admin.area.open");

function canApproveRefund(input: AuthzInput): Decision {
  const { subject, resource, environment } = input;

  if (subject.tenantId !== resource.tenantId) return deny("TENANT_MISMATCH");
  if (!subject.permissions.includes("refund.approve")) return deny("MISSING_PERMISSION");
  if (resource.status !== "pending_approval") return deny("WORKFLOW_STATE_NOT_ALLOWED");
  if (resource.amount > subject.approvalLimit) return deny("AMOUNT_EXCEEDS_APPROVAL_LIMIT", { requestable: true });
  if (environment.mfaAgeMinutes > 10) return deny("MFA_REQUIRED", { requiresMfa: true });

  return permit();
}

function canReadCase(input: AuthzInput): Decision {
  const { subject, resource } = input;

  if (subject.tenantId !== resource.tenantId) return deny("NOT_ACCESSIBLE");
  if (!subject.regions.includes(resource.region)) return deny("NOT_ACCESSIBLE");
  if (subject.clearanceRank < resource.classificationRank) return deny("NOT_ACCESSIBLE");

  return permit();
}

function canApproveCase(input: AuthzInput): Decision {
  const { subject, resource } = input;

  if (!subject.permissions.includes("case.approve")) return deny("MISSING_PERMISSION");
  if (resource.createdBy === subject.id) return deny("SEPARATION_OF_DUTIES");
  if (resource.assignedInvestigatorId === subject.id) return deny("SEPARATION_OF_DUTIES");

  return permit();
}

type TenantId = string;
type UserId = string;
type ResourceId = string;

type SubjectAttributes = {
  id: UserId;
  tenantId: TenantId;
  permissions: string[];
  departments: string[];
  regions: string[];
  clearanceRank: number;
  approvalLimit: number;
  subjectVersion: string;
};

type ResourceAttributes = {
  type: "case" | "refund" | "document";
  id: ResourceId;
  tenantId: TenantId;
  ownerId?: UserId;
  ownerDepartment?: string;
  region?: string;
  classificationRank?: number;
  status?: string;
  amount?: number;
  createdBy?: UserId;
  resourceVersion: string;
};

type EnvironmentAttributes = {
  now: string;
  mfaAgeMinutes?: number;
  networkZone?: "public" | "corporate" | "vpn";
  deviceTrust?: "unknown" | "managed";
  riskLevel?: "normal" | "elevated" | "high";
};

type AuthzInput = {
  subject: SubjectAttributes;
  action: string;
  resource: ResourceAttributes;
  environment: EnvironmentAttributes;
};

type AuthzDecision = {
  allowed: boolean;
  reasonCode?: string;
  requestable?: boolean;
  requiresMfa?: boolean;
  obligations?: Record<string, unknown>;
};

type PermissionMap = Record<string, AuthzDecision>;

function useActionDecision(permissions: PermissionMap, action: string): AuthzDecision {
  return permissions[action] ?? {
    allowed: false,
    reasonCode: "UNKNOWN_ACTION",
  };
}

function CaseActions({ permissions }: { permissions: PermissionMap }) {
  const approve = useActionDecision(permissions, "case.approve");
  const exportDecision = useActionDecision(permissions, "case.export");

  return (
    <div>
      <ActionButton decision={approve}>Approve</ActionButton>
      <ActionButton decision={exportDecision}>Export</ActionButton>
    </div>
  );
}

function ActionButton({
  decision,
  children,
}: {
  decision: AuthzDecision;
  children: React.ReactNode;
}) {
  if (decision.allowed) {
    return <button>{children}</button>;
  }

  if (decision.requiresMfa) {
    return <button>Verify identity to continue</button>;
  }

  return (
    <button disabled title={decision.reasonCode ?? "Not allowed"}>
      {children}
    </button>
  );
}

User sees Approve button.
User clicks Approve.
UI immediately marks case Approved.
Server denies because case changed state.

function ApproveButton({ decision }: { decision: AuthzDecision }) {
  const fetcher = useFetcher();
  const busy = fetcher.state !== "idle";

  return (
    <fetcher.Form method="post" action="approve">
      <button disabled={!decision.allowed || busy}>
        {busy ? "Approving..." : "Approve"}
      </button>
    </fetcher.Form>
  );
}

GET /api/cases/case_900

{
  "data": {
    "id": "case_900",
    "status": "under_review",
    "amount": 35000000,
    "region": "west-java"
  },
  "permissions": {
    "resourceType": "case",
    "resourceId": "case_900",
    "actions": {
      "case.read": { "allowed": true },
      "case.update": {
        "allowed": false,
        "reasonCode": "WORKFLOW_STATE_NOT_ALLOWED",
        "message": "This case is already under review."
      },
      "case.approve": { "allowed": true },
      "case.export": {
        "allowed": false,
        "reasonCode": "MFA_REQUIRED",
        "requiresMfa": true
      }
    },
    "policyVersion": "case-policy@2026-07-08.1",
    "evaluatedAt": "2026-07-08T03:20:00Z"
  }
}

POST /api/cases/case_900/approve

{
  "type": "https://example.com/problems/authorization-denied",
  "title": "Action not allowed",
  "status": 403,
  "reasonCode": "WORKFLOW_STATE_NOT_ALLOWED",
  "message": "This case can no longer be approved.",
  "correlationId": "req_123"
}

{
  "type": "https://example.com/problems/mfa-required",
  "title": "Additional verification required",
  "status": 403,
  "reasonCode": "MFA_REQUIRED",
  "challenge": {
    "kind": "step_up",
    "returnTo": "/cases/case_900"
  },
  "correlationId": "req_124"
}

Name
Purpose
Protected action
Subject attributes used
Resource attributes used
Environment attributes used
Decision table
User-facing denial messages
Audit reason codes
Cache/invalidation rules
Test matrix
Owner
Change approval process

if (user.department === case.ownerDepartment) {
  return <ApproveButton />;
}

const clearance = decodedJwt.clearance;

{
  "action": "approve",
  "approvalLimit": 999999999,
  "department": "enforcement"
}

senior-west-java-supervisor-level3-under-review-approver

[ ] All enforcement decisions happen server-side.
[ ] React receives permission projection, not full sensitive policy internals.
[ ] Unknown/missing decision defaults to deny.
[ ] Tenant boundary is enforced before domain policy.
[ ] Subject attributes are loaded from trusted source.
[ ] Resource attributes are loaded from trusted source.
[ ] Environment attributes are computed server-side or from trusted infrastructure.
[ ] Decision includes safe reason codes for frontend.
[ ] Internal reason codes are captured in audit.
[ ] Permission projection has policyVersion and evaluatedAt.
[ ] Cache keys include tenant/resource/policy/subject version where needed.
[ ] Mutation endpoints re-evaluate authorization.
[ ] List/search endpoints filter server-side.
[ ] Bulk actions handle mixed eligibility.
[ ] Step-up requirements are represented explicitly.
[ ] Field-level permissions are enforced server-side.
[ ] Frontend tests cover permit/deny/MFA/requestable/unknown states.

load resource -> receive permission projection -> render safe UI -> submit command -> server re-checks -> handle typed result