# Permissions

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

## Installation

```yarn
yarn add @commercetools-frontend/permissions
```

```npm
npm --save install @commercetools-frontend/permissions 
```

Additionally install the peer dependencies (if not present)

```yarn
yarn add react
```

```npm
npm --save install react 
```

## Hooks

### useIsAuthorized

A React hook that evaluates the [customization requested user permissions](/merchant-center-customizations/concepts/oauth-scopes-and-user-permissions.md#user-permissions) against the applied user permissions.

#### Usage

```jsx
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.

## Related pages

- [Area overview page with navigation](/merchant-center-customizations.md)
- [Previous page: Jest](/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-jest-preset-mc-app.md)
- [Next page: Internationalization](/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-i18n.md)
- [Search documentation and API specs](/search.md)