TUTORIAL – How to Setup Xano Authentication and Gate Content in WeWeb 🔐

[heyjcm]

@Joyce

Create Roles and Permissions

Adding Roles to Xano API Endpoint

In order to gate content in WeWeb based on user roles and permissions, you first need to create a role column in your Xano user base.

If you have a column with user roles in your Xano user base, you will be able to add it to the output of your me endpoint:

Once you’ve added roles to the output of the me endpoint of your Xano auth, you can add them to WeWeb.

Telling WeWeb Where to Find the User Role Info in Xano

Here, it’s in the role column so that’s what we type in:

Then, you can add user groups where user roles match the data in Xano.

Adding User Groups in WeWeb

Note that user role categories in Xano match the user roles in WeWeb:

User roles in Xano

User roles in WeWeb

Gate Content Based on User Roles

Once you’ve setup user roles in WeWeb, you can Manage access to pages
and define rules for Private access:

Hi, @Joyce! I followed your instructions.

While in the Editor, your instructions worked fine and I’m able to login as a user which kicks off a workflow to “Navigate to” the user’s “dashboard” page that is locked down to authenticated users. The dashboard page shows all the links that the authenticated user has access to. When they click on those links it takes them to another locked down page called “overview” that is dynamically populated by data from Xano.

So the flow is: my_domain/login_page → my_domain/dashboard → my_domain/overview

However, after I publish the project to my hosted plan, the Navigate to dashboard page after a user logs in won’t show up. The behavior is that the user enters their email and password and clicks the login button; however, it just stays on the login screen and doesn’t go anywhere.

To fix this, I changed both the Dashboard page and the Overview page back to:

And it functioned as normal (except for now they are not private pages). Did I miss a step?

Here’s what I did to follow your instructions

1. I added ‘role’ to my ‘user’ table in Xano:
   

   

2. I added ‘role’ as an output to my /auth/me Xano endpoint:
   

   

3. I used the WeWeb template Login page with the Login workflow that navigates to my ‘Dashboard’ page:
   

   

4. I updated ‘Private access’ on the Dashboard page to only allow access to the standard user or the admin user role:
   

   

5. I updated ‘Private access’ on the Overview page to only allow access to the standard user or the admin user role:
   

   

Any recommendations on next steps?

Thanks in advance!