authzyin.js

Javascript library to enable policy based authorization in React.

This library enables policy based authorization in React. It supports various types of policy/requirement evaluations leveraging JSON path.

Simply define your policies, initialize and authorize!

There is also a server library authzyin. Using authzyin.js together with authzyin can further simplify your authorization story across server and client.

Install

npm install --save authzyin.js

Usage

1. Initialize AuthZyinContext (similar as createStore in Redux, call this globally).

    // Initialize context
    initializeAuthZyinContext();

2. Wrap your main component with AuthZyinProvider (similar as Provider in Redux, should be at the top of your component hierarchy right after authentication).

    // Wrap main content with AuthZyinProvider after signing in
    export const App = () => {
        if (signedIn) {
            return (
                <AuthZyinProvider options={
                    { requestInitFn: getAuthorizationHeadersAsync }
                }>
                    <MainContent />
                </AuthZyinProvider>
            );
        }
    }

3. Now you can call the useAuthorize hook to achieve policy based authorization in your components like below.

    const authorize = useAuthorize();

    // pure policy + user based
    const IsCustomer = authorize('IsCustomer');

    // policy + resource + user based
    const barAuthorized = authorize('CanEnterBar' /*policy*/, bar /*resource*);

If you are using class components and for whaterver reason cannot use the useAuthorize hook, you can use the built in Authorize component instead. It uses React render props to pass the authorization result to a children function to render as below:

    <Authorize policy={'CanEnterBar'} resource={bar}>
    {
        // Below function is used as the "render props" children to Authorize.
        (authorized) => {
            // You can now use the authorized result in your components
            return <><YourComponentsUsingTheAuthorizationResult/></>;
        }
    }
    </Authorize>

The sample PlaceComponent shows usage of both patterns.

AuthZyinProvider Flexibility

To better suite your project needs, AuthZyinProvide also provides some flexibilities to initialize the authorization context (of type AuthZyinContext<T>).

• Already loaded the context before hand: Pass your context object to the initializeAuthZyinContext method. AuthZyinProvider will simply use it as is.
• Need to load context from your own api: Pass your api url to the AuthZyinProvider options. The provider will load it from the URL (HTTP GET) for you.
• Use together with authzyin server library: Everything is taken care of for you automatically. You might need to pass a requestInitFn async call back as part of the AuthZyinProvider options to customize the authentication.

Build and run locally

# Build lib
yarn install
yarn build

# build and run example
cd example
yarn start

Or use docker:

docker build -t authzyin.js .
docker run -p 8080:80 authzyin.js

Happy coding. Peace.

MIT © sidecus