Set Custom Permissions

For default roles and permission, refer to Roles and Permissions

Custom Roles

The Dashboard allows you to create custom Roles, which can be assigned to Users and used to define custom Permissions.

Custom Permissions

Custom permissions are defined using the permissions object in the React Bricks configuration.

Permissions are implemented by providing one of more permission functions.

The available permission functions are:

• canAddPage: (user, pageType) => boolean
• canAddTranslation: (user, pageType, language) => boolean
• canSeePageType: (user, pageType) => boolean
• canSeePage: (user, page) => boolean
• canEditPage: (user, page) => boolean
• canDeletePage: (user, page) => boolean
• canDeleteTranslation: (user, page) => boolean
• canUseBrick: (user, brick) => boolean

The complete description of the Permissions type is as follows:

type Permissions = {
  canAddPage?: (user: PermissionUser, pageType: string) => boolean
  canAddTranslation?: (
    user: PermissionUser,
    pageType: string,
    language: string
  ) => boolean
  canSeePageType?: (user: PermissionUser, pageType: string) => boolean
  canSeePage?: (
    user: PermissionUser,
    page: Omit<PermissionPage, 'language'>
  ) => boolean
  canEditPage?: (user: PermissionUser, page: PermissionPage) => boolean
  canDeletePage?: (
    user: PermissionUser,
    page: Omit<PermissionPage, 'language'>
  ) => boolean
  canDeleteTranslation?: (user: PermissionUser, page: PermissionPage) => boolean
  canUseBrick?: (user: PermissionUser, brick: PermissionBrick) => boolean
}

Usage Example

Let’s say we’ve created the custom roles blog_editor and translator_fr in the dashboard.

Now, we’ll create two permission rules:

1. Prevent all editors from adding institutional pages and restrict blog_editor users to adding only pages of type blog.
2. Prevent French translators from deleting translations in languages other than French.

<ReactBricks
  ...
  permissions={{
    canAddPage: (user, pageType) => {
      if (
        pageType === 'institutional' ||
        user.customRole.id === 'blog_editor' && pageType !== 'blog') {
        return false
      }
      return true
    },
    canDeleteTranslation: (user, page) => {
      if (user.customRole.id === 'translator_fr' && page.language !== 'fr') {
        return false
      }
      return true
    }
  }}
>
  ...
</ReactBricks>