Learn about applying user permissions to different parts of your customizations.

As explained in [OAuth Scopes and user permissions](https://docs.commercetools.com/merchant-center-customizations/concepts/oauth-scopes-and-user-permissions), each customization has a unique pair of default user permissions: "view" and "manage." Additionally, you can use more granular permission groups to cover strict business requirements.

When developing a customization, you might want to enforce these user permissions in some parts of your customization. For example, performing certain actions like creating, updating, or deleting a resource should only be possible if the user has the "manage" permission.

# Define constants

To avoid defining permissions manually, we recommend using one of the following helper functions inside your `constants.js` file:

- For Custom Applications: `entryPointUriPathToPermissionKeys`
- For Custom Views: `resolveCustomViewResourceAccesses`

The following example shows the use of the `entryPointUriPathToPermissionKeys` function:

```js title="constants.js"
import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';

export const entryPointUriPath = 'channels';

export const PERMISSIONS = entryPointUriPathToPermissionKeys(entryPointUriPath);
```

The `PERMISSIONS` variable contains a `View` and `Manage` properties, with the values being the computed values based on the `entryPointUriPath`:

- `PERMISSIONS.View`: maps to `ViewChannels`.
- `PERMISSIONS.Manage`: maps to `ManageChannels`.

You can then use the `PERMISSIONS` variable to reference the permission in the application code.

When using [additional permission groups](https://docs.commercetools.com/merchant-center-customizations/concepts/oauth-scopes-and-user-permissions#permission-groups) (available from version 21.21.0), you must also provide the unique group to the `entryPointUriPathToPermissionKeys` function to generate the correct permission keys.

The group names can be exported and referenced also in the Custom Application config file.

```js title="constants.js" highlightLines="5-8, 12"
import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-shell/ssr';

export const entryPointUriPath = 'channels';

export const groupNames = {
  delivery: 'delivery',
  promotion: 'promotion',
};

export const PERMISSIONS = entryPointUriPathToPermissionKeys(
  entryPointUriPath,
  ['delivery', 'promotion']
);
```

In this scenario, the `PERMISSIONS` variable contains a `View`, `Manage`, `ViewDelivery`, `ManageDelivery`, `ViewPromotion` and `ManagePromotion` properties, with the values being the computed values based on the `entryPointUriPath` and the provided permission group names:

- `PERMISSIONS.View`: maps to `ViewChannels`.
- `PERMISSIONS.Manage`: maps to `ManageChannels`.
- `PERMISSIONS.ViewDelivery`: maps to `ViewChannelsDelivery`.
- `PERMISSIONS.ManageDelivery`: maps to `ManageChannelsDelivery`.
- `PERMISSIONS.ViewPromotion`: maps to `ViewChannelsPromotion`.
- `PERMISSIONS.ManagePromotion`: maps to `ManageChannelsPromotion`.

The following example shows the use of the `resolveCustomViewResourceAccesses` function:

```js title="constants.js"
import { resolveCustomViewResourceAccesses } from '@commercetools-frontend/application-config';

export const PERMISSIONS = resolveCustomViewResourceAccesses();
```

The `PERMISSIONS` variable contains a `View` and `Manage` properties:

- `PERMISSIONS.View`: maps to `View`.
- `PERMISSIONS.Manage`: maps to `Manage`.

You can then use the `PERMISSIONS` variable to reference the permission in the application code.

When using [additional permission groups](https://docs.commercetools.com/merchant-center-customizations/concepts/oauth-scopes-and-user-permissions#permission-groups), you must also provide the unique group to the `resolveCustomViewResourceAccesses` function to generate the correct permission keys.

The group names can be exported and referenced also in the Custom View config file.

```js title="constants.js" highlightLines="9"
import { resolveCustomViewResourceAccesses } from '@commercetools-frontend/application-config';

export const PERMISSIONS = resolveCustomViewResourceAccesses([
  'delivery',
  'promotion',
]);
```

In this scenario, the `PERMISSIONS` variable contains `View`, `Manage`, `ViewDelivery`, `ManageDelivery`, `ViewPromotion` and `ManagePromotion` properties, with the values being the computed values based on the provided permission group names.

# Apply user permissions

Customizations let you check and evaluate if certain user permissions are assigned or not, making it possible to determine whether to render something or not, or to turn off some UI functionalities.

## In routes

If certain routes should not be accessible without proper user permissions, you can render the route conditionally based on the evaluated permission.

To do so, you can use the [`useIsAuthorized`](https://docs.commercetools.com/merchant-center-customizations/tooling-and-configuration/commercetools-frontend-permissions#useisauthorized) hook:

```js title="routes.js" highlightLines="10-12"
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import { useIsAuthorized } from '@commercetools-frontend/permissions';
import { PageUnauthorized } from '@commercetools-frontend/application-components';
import { PERMISSIONS } from './constants';
import ChannelsCreate from './components/channels-create';
import ChannelsList from './components/channels-list';

const CustomizationRoutes = () => {
  const match = useRouteMatch();
  const canManage = useIsAuthorized({
    demandedPermissions: [PERMISSIONS.Manage],
  });

  return (
    <Switch>
      <Route path={`${match.path}/new`}>
        {canManage ? (
          <ChannelsCreate />
        ) : (
          <PageUnauthorized />
        )}
      </Route>
      <Route>
        <ChannelsList>
      </Route>
    </Switch>
  );
};
```

## In components

You can evaluate user permissions in your React components, for example to deactivate a button.

```jsx
import { useIsAuthorized } from '@commercetools-frontend/permissions';
import PrimaryButton from '@commercetools-uikit/primary-button';
import { PERMISSIONS } from '../constants';

const MyComponent = () => {
  const canManage = useIsAuthorized({
    demandedPermissions: [PERMISSIONS.ManagePromotion],
  });

  return (
    <div>
      <PrimaryButton label="Create promotion" isDisabled={!canManage} />
    </div>
  );
};
```

## In menu links

This section applies only to Custom Applications.

In the Custom Application config, the menu links let you define the level of required access by providing the name of the requested user permission.

```json
{
  "mainMenuLink": {
    "permissions": ["ViewChannels"]
  },
  "submenuLinks": [
    {
      "permissions": ["ManageChannels"]
    }
  ]
}
```

This determines which links should be visible or not, depending on the permissions assigned to the user.

If the list of permissions is empty, the menu link is always displayed.

If you defined the permissions in a `constants` file, we recommend that you reference them in the Custom Application config as well. To do so, the config file needs to be converted to a JS file (instead of JSON), for example using the `.mjs` file extension.

```js title="custom-application-config.mjs"
import { entryPointUriPath, PERMISSIONS } from './src/constants';

const config = {
  entryPointUriPath,
  mainMenuLink: {
    permissions: [PERMISSIONS.View],
  },
  // ...
};
export default config;
```