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").

3. 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.

4. 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.