authorization

This package offers an Authorization wrapper component for use within Hub that wraps an app or a specific component, and exposes permission and feature toggle props to its children via a Context Provider.

It also offers the AuthorizationToggle (a React functional component) that verifies your permissions and allows you to choose the behaviour for when the permission is granted or notGranted.

Note: this component must be wrapped in an <Auth> component to use Feature Toggles, as a parentEntityId is required to get Feature Toggles.

Installation

npm install @iqmetrix/authorization

Props

Authorization

Name	Type	Required	Default
children	ReactNode	yes	undefined
permissions	string[]	no	undefined
featureToggles	string[]	no	undefined

AuthorizationToggle

Name	Type	Required	Default
children	{granted: ReactNode, notGranted: ReactNode}	yes	undefined
permissions	string[]	no	undefined
featureToggles	string[]	no	undefined

Interfaces

// The AuthorizationContext exposes the default state of the Authorization component

interface AuthorizationContext {

isGranted: boolean;

permissions: IAuthorizationResponse[];

featureToggles: IAuthorizationResponse[];

}

// The IAuthorizationResponse have the expected answer from the API call to the accounts endpoint

interface IAuthorizationResponse {

Granted: boolean;

Authorization: string;

}

Examples

Authorization

Permissions

// To use the component, wrap your app in it

import { Authorization } from "@iqmetrix/authorization";

<Authorization permissions={["myPermission"]}>

<App />

</Authorization>;

// In your app, you can consume the context and check any permission

import { AuthorizationContext } from "@iqmetrix/authorization";

const { permissions } = React.useContext(AuthorizationContext);

<p>

Your permission "{permissions[0].Authorization}" has granted value as {permissions[0].Granted ? "true" : "false"}

</p>;

Alternatively, we can check permission before using it:

import { AuthorizationContext } from "@iqmetrix/authorization";

const { permissions } = React.useContext(AuthorizationContext);

const isIQUser = permissions.some(p => p.Authorization === 'myPermission' && p.Granted)

<p>

{isIQUser ? "true" : "false"}

</p>;

This can be useful when you want to allow either one of two or more permissions.

Feature Toggles

// To use the component, wrap your app in it

// You also require the <Auth /> component for using feature toggles

import { Auth } from "@iqmetrix/auth";

import { Authorization } from "@iqmetrix/authorization";

<Auth>

<Authorization featureToggles={["myFeatureToggle"]}>

<App />

</Authorization>

</Auth>;

// In your app, you can consume the context and check any permission

import { AuthorizationContext } from "@iqmetrix/authorization";

const { featureToggles } = React.useContext(AuthorizationContext);

<p>

Your permission "{featureToggles[0].Authorization}" has granted value as{" "}

{featureToggles[0].Granted ? "true" : "false"}

</p>;

Both

// To use the component, wrap your app in it

// You also require the <Auth /> component for using feature toggles

import { Auth } from "@iqmetrix/auth";

import { Authorization } from "@iqmetrix/authorization";

<Auth>

<Authorization permissions={["myPermission"]} featureToggles={["myFeatureToggle"]}>

<App />

</Authorization>

</Auth>;

// In your app, you can consume the context and check any permission

import { AuthorizationContext } from "@iqmetrix/authorization";

const { permissions, featureToggles } = React.useContext(AuthorizationContext);

<p>

Your permission "{permissions[0].Authorization}" has granted value as {permissions[0].Granted ? "true" : "false"}

</p>

<p>

Your feature toggle "{featureToggles[0].Authorization}" has granted value as {featureToggles[0].Granted ? "true" : "false"}

</p>;

AuthorizationToggle

Permissions

import { AuthorizationToggle } from '@iqmetrix/authorization';

// You can pass a React Fragment

<AuthorizationToggle permissions={["myPermission"]}>

{{

granted: <div>Feature Toggle Granted</div>,

notGranted: <div>Feature Toggle NOT Granted</div>

}}

</AuthorizationToggle>

// Or you can pass a React Component/FC

<AuthorizationToggle permissions={['myPermission']}>

{{

granted: <App />,

notGranted: <Result status="403" />

}}

</AuthorizationToggle>

Feature Toggles

// You also require the <Auth /> component for using feature toggles

import { Auth } from "@iqmetrix/auth";

import { AuthorizationToggle } from '@iqmetrix/authorization';

// You can pass a React Fragment

<Auth>

<AuthorizationToggle featureToggles={["myFeatureToggle"]}>

{{

granted: <div>Feature Toggle Granted</div>,

notGranted: <div>Feature Toggle NOT Granted</div>

}}

</AuthorizationToggle>

</Auth>

// Or you can pass a React Component/FC

<Auth>

<AuthorizationToggle featureToggles={['myFeatureToggle']}>

{{

granted: <App />,

notGranted: <Result status="403" />

}}

</AuthorizationToggle>

</Auth>

Sources

• github
• registry