Styra-supported React hooks and components for frontend authorization based on @styra/opa
npm install @styra/opa-react
This package contains helpers for using @styra/opa from React.
* High-level, declarative components for embedding authorization decisions in your frontend code.
* Built-in caching, deduplication, and state management based on @tanstack/react-query.
* Optional request batching for backends that support it (Enterprise OPA, or your own implementation of the Batch API).
The package provides an useAuthz hook and a high-level
They are enabled by wrapping your App into
``tsx`
This example provides a previously-configured opaClient instance (OPAClient from @styra/opa), a request path, and default input (which is merged with per-call inputs).
They can either be used by providing static children () and optionally fallback and loading JSX elements:`tsx`
input={input}
loading={...}
fallback={}>
The useAuthz hook can be used if you need more low-level control about the authorization call.opaClient
Furthermore, you can retrieve the prepared instance of AuthzProvider for even more control, if need be:
`tsx
import { AuthzContext } from "@styra/opa-react";
export default function Component() {
const { opaClient } = useContext(AuthzContext);
// now you can use opaClient.evaluate() etc directly``
}
For questions, discussions and announcements related to Styra products, services and open source projects, please join
the Styra community on Slack!