Skip to main content

Intro

Since v3.9.0, for Enterprise plan, it is possible to create custom roles and specify fine-grained permissions for your users (add-on). Permissions are defined using the permissions object on the React Bricks configuration.

Permissions

Permissions are defined 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 more 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​

Suppose we created the custom roles "blog_editor" and "translator_fr" in the dashboard.
Let's create two permission rules:

  • A rule to prevent all the (editor) users from adding pages of type "institutional" and to prevent users with custom role ID "blog_editor" from adding pages which are not of type "blog"
  • A rule to prevent French translators to delete a translation in other languages
<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>