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

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

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

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

:white_check_mark: 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 :slightly_smiling_face:

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.

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

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.

:zap: 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”

create-auth-endpoints-xano

Copy Xano Authentication Endpoints Into WeWeb

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

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

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:
add role ro me output in xano auth

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

define-user-groups

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:

gate-content-with-xano-roles

1 Like