<Authz
path={path}
input={input}
fallback={<div>unauthorized</div>}
loading={<div>loading...</div>}>
<Button>Delete Item</Button>
</Authz>
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>
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.
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.