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>