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

[Joyce]

In order to setup Xano authentication in your WeWeb project, there are three pre-requisites:

1- you already have an account with Xano, it’s free for up to 10,000 records

2- you have a user table in your Xano database with at least two fields: login and password

3- you have the three authentication API endpoints in Xano

Let’s walk you through step 2 and 3 before we dive into the actual WeWeb setup

Setup a User Table in Your Xano Database

Your user table should include at least two fields:

• one field where you store the login, for example, a string field with a name or an email field with an email address, and
• one field of field type “password” where you store the encrypted password.

It’s important that you choose the field type “password” when creating your user table in Xano.

This will ensure that:

• you can use Xano’s authentication API points, and that
• the user input is encrypted when the user first creates an account with your web-app.

Pro tip: if you’re starting from scratch in Xano, you can use the “Starter” template in their Marketplace.

Create Authentication API Endpoints in Xano

For Xano authentication to work, you need three API endpoints:

1. signup
2. login
3. me

If you’re using a Xano template that includes authentication, you’ll find these endpoints in the API sub-menu.

Otherwise, you’ll need to create these three endpoints yourself by going to “API” > “Add API Endpoint” > “Authentication”

Copy Xano Authentication Endpoints Into WeWeb

In WeWeb, you’ll need to copy/paste the URL of each Xano API endpoint:

Warning: the order in which endpoints are displayed in Xano may vary. Make sure to copy the correct URL in each WeWeb

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:

[carri]

Login part works great.
I am getting an error on sign ups after following all the steps. Any guidance?

[Joyce]

Hi @carri

Can you check the message under response?

My guess is that the password you chose doesn’t match the requirements that are setup in Xano but I could be wrong.

Another way to check would be to use Xano’s run & debug function with the same email, password.

[lelemarea]

Roles and permissions…, this tutorial is not for starter pack isn’t it?

[carri]

I wasn’t sending the role info to Xano. It now works.

[dimbell]

Hi @Joyce, my sign up xano form includes more than the 3 standard form fields (company field). However by default the workflow sign up xano includes only email, pass and name. Is there a way to add more fields?

[Joyce]

Hi @dimbell

You won’t be able to do it with the Xano Auth actions because the email, password, name inputs are hardcoded but you can do it with the REST API plugin:

In our action, we set up our signup API call (1) then we get the user’s authentication token (2)

[MichaelLovell]

Hi @Joyce

Could you please point me in the right direction?

I’m storing roles and permissions in a separate table in Xano and using the +Addon feature to return the user roles in the output when I call the auth/me endpoint.

What format do I need to reference the ‘Role key’ in step 4. of the Xano Auth configuration? I tried using dot notation but didn’t have any luck.

Thanks

[MichaelLovell]

Hi folks,

Just looking for confirmation that the user role MUST be stored within the /User table, and not just passed in the auth/me response using Xano’s +Addon feature?

I’m having difficulty understanding how the Private access settings will be applied as I’m just working in the editor mode at the moment.

It would be ideal if the ‘User role configuration’ [Role key] could just be bound to the auth/me response in the same way the other collections are configured. Then I instinctively know that the role it will grab will be correct.

Before going and reconfiguring some of my database tables I hope to be able to clarify the above question.

For context;

• I am currently storing ‘role’ on a relational table called company_has_user.

• A user can belong to multiple companies with different roles for each company.

• When a logged in user toggles between their different company accounts, their permissions for that company should take immediate effect.

• When a user logs in, they are granted the role set by the company account they were last logged in with.

• If a company administrator changes the user’s role, the update occurs within the relational table and not the User table. Therefore, not overriding their permissions within a users existing or other accounts.

Appreciate the confirmation, and if so, I’ll proceed with some workarounds.

[Joyce]

@MichaelLovell

What format do I need to reference the ‘Role key’ in step 4. of the Xano Auth configuration? I tried using dot notation but didn’t have any luck.

Hey @MichaelLovell, apologies for the late reply.

I was able to do it by creating an Add-on in Xano that’s a list of items (so not a single item):

And telling WeWeb the role type was in a List of objects (so not a text):

Here’s a long-ish video I recorded for you on the topic. Let me know if it helps. I’ll try to record a more structured tutorial later

[MichaelLovell]

@Joyce you are powering through the forum today.

Greatly appreciated! I will give that method a try.

[Joyce]

Haha yes! And by the way, I checked after recording the video: you do need to make sure the add-on output is named role and not _role in Xano and the Role key in WeWeb in step 4 of the plugin config is also role

[gauthier.thubert.pro]

Hello @Joyce I am trying to set up a Gate content for a project I’m working on. I am using Xano auth and followed the above tutorial to set the user roles.
I am trying to test the the Gate content in preview mode and it does not work. Is it because it’s preview and not a live app?
Thx for the help

[Joyce]

@gauthier.thubert.pro

Is it because it’s preview and not a live app?

Yes, you’ll need to test on a published app (in staging or in production) because in the editor, we allow you to access all the pages of the project.

[gauthier.thubert.pro]

Alright thank you for the answer!

[Uddeshya]

Very Informative and briefly explained step-wise.

[Dervish99]

I have followed the tutorial above, I’m on the basic login page trying to setup basic login using the xano plugin,

I’ve also tested the username and password in xano. And it gives the auth token.

When I bind username and same password and test in weweb using xano plugin using the ‘xano login’ and workflow actions it gives 403 error.

I’m using details for jane@email.com. As I’m trying to follow the level 2 tutorial.

When I make the REST API request it works.

It gives 403 ERROR. says invalid credentials, payload.

[Joyce]

Hi @Dervish99

Let me see if I got this right:

• when you test the login endpoint in Xano using jane@email.com and a password, you get an auth token
• when you test the login endpoint in WeWeb using the REST API plugin, you also get an auth token
• but when you test the login action of the Xano Auth plugin in WeWeb, you get a 403 error

Is that correct?

First thought is maybe the Xano Auth plugin is not referencing the correct Xano instance or the correct endpoint. For example, here I am referencing my free instance and the login endpoint in the basic-auth path:

But in Xano I could be testing an endpoint in the auth path:

That could be one explanation.

Otherwise, in the screenshot you shared, towards the bottom, you see Xano’s response with status: 403. Could you unfold the data object and share a screenshot of the message that comes with the response?

That will give us a little more information to investigate