Open Policy Agent TypeScript Packages
    Preparing search index...
    Authz: (__namedParameters: AuthzProps) => ReactNode

    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.

    Type Declaration

    <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.