> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/moped-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/moped-documentation/dev-guides/ui-access-control.md).

# 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](https://auth0.com/blog/role-based-access-control-rbac-and-react-apps/) 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](https://reacttraining.com/blog/react-router-v6-pre/#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:&#x20;

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.