@/permissions

React components and hooks to declaratively handle Merchant Center user permissions.

Installation

yarn add @commercetools-frontend/permissions
# or
npm --save install @commercetools-frontend/permissions

Additionally install the peer dependencies (if not present)

yarn add react
# or
npm --save install react

Hooks

useIsAuthorized

A React hook that evaluates the Custom Application requested user permissions against the applied user permissions.

Usage

import { useIsAuthorized } from '@commercetools-frontend/permissions';
const CreateButton = () => {
const canManage = useIsAuthorized({
demandedPermissions: ['ManageAvengers']
});
return (
<PrimaryButton
isDisabled={!canManage}
// ...
/>
);
}

Options

  • demandedPermissions: A list of user permissions of the Custom Application that need to be evaluated against the applied user permissions.

    Multiple values can be provided, in which case the check becomes an AND condition. However, this is discouraged and it's better to define the useIsAuthorized hook multiple times, one for each permission to be checked.