Permissions

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

Installation

yarn add @commercetools-frontend/permissions

Additionally install the peer dependencies (if not present)

yarn add react

Hooks

useIsAuthorized

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

Usage

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

Options

  • demandedPermissions: A list of user permissions of the customization 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.