UI access control

Patterns for controlling user access to UI components and application routes

Role Based Access Control

The patterns used for access control in React stem from this post that describes implementing RBAC using Auth0 and React. The general ida is that a component called Can is supplied an action and component that carries out that action. Rules are established to determine what roles have permissions to carry out an action.

For example: <Can perform="the:action" yes={<YesComponent />} no={<NoComponent/>} />

Can component

In Moped, the Can component is passed the action, yes component, and no component. Can then uses the useUser hook to expose the user's current session and then retrieve the user's highest role. This role is used to determine what set of defined rules apply to the user and determine access.

The Can component is used to restrict user access to UI components and also restrict access to the components that render upon visiting routes in the application.

Restricting routes

To restrict routes, the React Router v6 object-based routes in Moped are modified by adding a action key to a route object. This action is added to the rules that determine the UI restrictions for users.

For route access, two groups are set:

1. Unprotected routes

2. Protected routes

In this pattern, routes are protected by default. To exclude protection, a route's path string must be added to the unprotectedRoutePaths array.

Routes are protected by restricting the components rendered by a route using the Can component. The route object action value is passed to Can along with the route's element as the yes prop and a redirect to the root route as the no prop.