Access Explainer

Component

About

A policy evaluator panel that answers an access-control question (can this user do this action on this resource) and lists every group membership, inherited rule and role binding it checked, including which explicit deny overrode an allow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Access Explainer to your project and fits it to your theme.

Code

How Access Explainer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AccessExplainer, {
  type AccessExplainerPolicy,
} from "@/components/ui/access-explainer";

const policy: AccessExplainerPolicy = {
  users: [
    { id: "marco", name: "Marco (platform)" },
    { id: "priya", name: "Priya" },
    { id: "sam", name: "Sam" },
  ],
  groups: [
    { id: "platform", name: "Platform", members: ["marco"] },
    {
      id: "engineering",
      name: "Engineering",
      members: ["group:platform", "priya", "sam"],
    },
    { id: "contractors", name: "Contractors", members: ["sam"] },
  ],
  roles: [
    { id: "editor", name: "Editor", permissions: ["repo:read", "repo:write"] },
    { id: "biller", name: "Biller", permissions: ["billing:export"] },
  ],
  resources: [
    { id: "acme-org", name: "Acme (organisation)" },
    {
      id: "engineering-folder",
      name: "Engineering folder",
      parent: "acme-org",
    },
    {
      id: "secrets-repo",
      name: "secrets repository",
      parent: "engineering-folder",
    },
    { id: "api-repo", name: "api repository", parent: "engineering-folder" },
    { id: "billing", name: "billing", parent: "acme-org" },
  ],
  bindings: [
    {
      principal: "group:engineering",
      role: "editor",
      resource: "engineering-folder",
    },
    { principal: "user:priya", role: "biller", resource: "billing" },
  ],
  rules: [
    {
      id: "platform-secrets",
      effect: "allow",
      principal: "group:platform",
      action: "repo:read",
      resource: "secrets-repo",
    },
    {
      id: "secrets-freeze",
      effect: "deny",
      principal: "group:engineering",
      action: "repo:read",
      resource: "secrets-repo",
      reason: "frozen during the security review",
    },
    {
      id: "contractor-freeze",
      effect: "deny",
      principal: "group:contractors",
      action: "repo:write",
      resource: "acme-org",
      reason: "contractors cannot write to any repository",
    },
    {
      id: "org-billing-note",
      effect: "deny",
      principal: "group:engineering",
      action: "billing:export",
      resource: "acme-org",
      inherit: false,
      reason: "logged for audit, but does not apply below the organisation",
    },
  ],
};

export default function AccessExplainerDemo() {
  return (
    <div className="w-full max-w-xl mx-auto rounded-[var(--radius-card)] border border-line bg-shell p-6 text-ink">
      <AccessExplainer
        policy={policy}
        defaultQuery={{
          user: "marco",
          action: "repo:read",
          resource: "secrets-repo",
        }}
      />
    </div>
  );
}