Authorization

FrontHub uses RBAC as a core specification to its authorization system. It is based on roles, permissions, and grants.

This model ensures that you don't have to use business or value objects inside your application to make authorization decisions. Everything you need to do is to define what are the application resources and its permissions, then create your application using them.

Config

At first, in your front-hub.config.js create a rbac property with the following format

front-hub.config.js

module.exports = {
  rbac: {
    role: (context) => context.user.role  // it is the current role,
    permissions: {
      user: ['create', 'delete'],
      password: ['change', 'forgot'],
      article: ['read', 'create', 'edit', 'delete']
    },
    grants: {
      guest: ['article:read'],
      writer: ['article:*', 'not article:delete', 'password:forgot'],
      admin: ['extends writer', 'article:delete', 'user:*', 'password:*']
    }
  }
}

Properties

role

This property needs to be a function or a string with the current role value. If you choose to use it as a function, it will receive a context object as a parameter.

This context is the same object declared in the application host which has useful data to handle and return the desired role (string)

permissions

An object which allows you to manage and create kinds of permission according to your project.

We recommend you use each permission propriety to assign for a feature in your project, the value of this property should be an array including all kinds of permissions for that feature.

permissions: {
  article: ['read', 'create', 'edit', 'delete']
}

In the example above, we have a feature (article) and some kinds of permission assign for this feature

grants

This object allows you to create grants for access (role) and assign it to some permission resource.

  permissions: {
    article: ['read', 'create', 'edit', 'delete']
  },
  grants: {
    guest: ['article:read'],
    writer: ['article:*', 'not article:delete', 'password:forgot'],
    admin: ['extends writer', 'article:delete', 'user:*', 'password:*']
  }

In the example above we create a grant (role) called guest and assign the article read permission for this kind of user.

note

• You may include all permissions for a resource by using article:*
• Negating by using the expression not before the permission: not article:delete
• Inheriting all permissions of some role by using the expression extends before the "grants" referenced: extends guest

note

Usage

useAuthorization

Start using this hook by important in this way:

import { useAuthorization } from '@resultadosdigitais/front-hub/react';

A useAuthorization is a hook that returns two React components. <Allowed /> which is used to wrap up the business rule allowed. <Denied /> is used to wrap up the opposite, business rule denied.

Both components expect a property permission (string) which the value should be some role previously created in the permission object.

Using authorization hook

const Component = () => {
  const { Allowed, Denied } = useAuthorization()

  return (
    <>
      <Allowed permission="article:read">
        Allowed content
      </Allowed>

      <Denied permission="article:create">
        Denied Content
      </Denied>
    </>
  )
}

Application Host

At the application host configuration side you may, if you want, implement a dynamic permissions service to authorize your microfrontend

The application host

fronthub('configure', {
  rbac: function (manifest){
    return fetch('/permission/microfrontend/' + manifest.name).then(response => response.json())
  }
})

You can read more information about it on the proposal Draft Frontend Architecture