Apply to UI

A common authorization challenge is ensuring your UI matches your authorization policies.

Depending on your UI framework of choice, Kilpi offers you the primitives to do just that with a simple, declarative API.

React (RSC)

Make your UI match your policies with the <Access /> component.

async function Component({ id }) {
  const doc = await getDocument.protect(id);

  return <div>
    <h1>{doc.title}</h1>

    <Access
      to="documents:delete" // Reference to policy
      on={doc} // Resource (If required)

      // Optional: Alter UI based on state
      Unauthorized={<p>Not allowed to delete button</p>}
      Loading={<p>Loading...</p>}
    >
      <DeleteDocButton doc={doc} />
    </Access>
  </div>
}

Or just use Kilpi primitives as usual for example to disable buttons.

async function DeleteDocButton({ doc }) {
  const canDelete = await Kilpi.isAuthorized("documents:delete", doc);
  return (
    <button disabled={!canDelete}>
      Delete
    </button>
  );
}

Other frameworks

There does not yet exist bindings for other frameworks, but you can create your own using the Kilpi API.