Building a CRM with Xano and @Uiflow | Session 3

In this guide, we'll walk through the process of implementing role-based access control (RBAC) in your application using Xano and UiFlow. RBAC allows you to restrict access to certain features and data based on a user's assigned role, ensuring that users can only perform actions and view information they are authorized for.

Setting Up Roles in Xano

The first step is to create a table in your Xano database to store user roles. In this example, we'll create a `Role` table with the following columns:

• `name` (text): The name of the role (e.g., "Admin", "Manager", "User").
• `permission` (integer): A numeric value representing the permission level associated with each role.

Additionally, create a relationship between the `User` table and the `Role` table, allowing each user to be associated with a specific role.

Retrieving Role Information in UiFlow

Next, we'll update the `AuthMe` endpoint in UiFlow to include the user's role and company information. This will allow us to access this data on the front-end.

1. In the `AuthMe` endpoint, add an "Add-on" to the existing `Get Record` step for the `User` table.
2. Select the `Role` table as the add-on source and set the matching identifier to the `roleId` field in the `User` table.
3. Optionally, you can add another add-on to include the user's company information.
4. Publish the changes to make the updated data available on the front-end.

Creating a Reusable Permission Check Function

To streamline the process of checking user permissions across different APIs and workflows, we'll create a reusable function in Xano.

1. Create a new function in Xano.
2. Define the function inputs:

• `userId` (ID): The ID of the authenticated user, typically obtained from the `authId` environment variable.
• `permissionRequired` (Enum): The required permission level for the current API or workflow (e.g., "Admin", "Manager", "User").

1. Inside the function, perform the following steps:

• Retrieve the user's record from the `User` table using the `userId`.
• Fetch the user's role information using an add-on to the `Role` table.
• Look up the required permission level by searching the `Role` table for the `name` matching the `permissionRequired` input.
• Create a conditional statement to check if the user's role `permission` value is greater than or equal to the required permission level.
• Set the output to an object containing a `result` (boolean) and a `message` indicating whether the user has the required permissions.

1. Optionally, add a precondition step to the function to return an "Access Denied" error if the user doesn't have the required permissions.

Conditionally Rendering UI Components Based on Roles

In UiFlow, we'll use the retrieved role information to conditionally render UI components based on the user's role.

1. Create a global variable called `userRole` and set its value to the user's role name retrieved from the `AuthMe` endpoint.
2. In the design canvas, create buttons or other components that you want to conditionally show or hide based on user roles (e.g., "Add Contact", "Edit Contact", "Delete Contact").
3. In the logic flow, create a new flow called "Role Permissions".
4. Use the `Switch` component to define different cases based on the `userRole` variable value.
5. For each case (e.g., "Admin", "Manager", "User"), activate or deactivate the relevant components using the `Activate` and `Deactivate` actions.
6. Optionally, add a case for suspended or deactivated users, showing a modal or redirecting them to a different page.

By following these steps, you'll have implemented RBAC in your application, allowing users to access only the features and data they are authorized for based on their assigned roles.