Function Authz

Conditionally renders components based on authorization decisions for a specified policy path and input for the current user.

The simplest use looks like that shown below; just wrap some arbitrary content and specify path and input.

Example: JSX children with fallback for the "denied" state

<Authz
  path={path}
  input={input}
  fallback={<div>unauthorized</div>}
  loading={<div>loading...</div>}>
  <Button>Delete Item</Button>
</Authz>
Copy

Example: Unwrapping a policy evaluation result

Assuming the policy returns an object, {"result": true}, the fromResult prop can be used to unwrap that:

<Authz
  path={path}
  input={input}
  fromResult={({result}) => result ?? false}
  <Button>Delete Item</Button>
</Authz>
Copy

Configuration

Configuration involves defining an API endpoint for authorization along with a context that can be used to access authorization decisions throughout the application. The <AuthzProvider/> wrapper needs to be as high as possible in the component tree, since <Authz/> (or useAuthz) may only be used inside that wrapper.