Kilpi

A common authorization challenge is ensuring your UI matches your authorization policies. You may always use the Kilpi APIs such as Kilpi.isAuthorized to conditionally render UI. However, depending on your UI framework of choice, Kilpi offers you the primitives to do just that with a simple, declarative API.

Use the <Access /> component provided by the @kilpi/react-server plugin to protect your UI.

export async function Document({ 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>
  );
}

Use the <ClientAccess /> component provided by the @kilpi/react-client plugin to protect your UI (or the useSubject and useIsAuthorized hooks).

export function Document({ doc }) {
  return (
    <div>
      <h1>{doc.title}</h1>

      <ClientAccess
        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} />
      </ClientAccess>
    </div>
  );
}