Multi-user setup with Xano

In this guide, we'll show you how to import an existing Xano snippet and connect it to the Bravo frontend, to enable the use of the toggle in a multi-user app. The Custom Authentication feature will be used to authenticate the users, and keep the user information in Xano.

As many users will be using the app, the backend must keep track of the state of each toggle, for each user. Here, Xano will be used as the backend tool, but the same approach would work for any other backend setup with logic and database capabilities.

Importing the Xano setup

In order to follow this guide, create a Xano account (in case you don't have one) and log in. Once you do that, open the Xano snippet below. This snippet will contain both a Products and Users table, plus all the needed API endpoints to interact with the database.

Multiuser Like Button - Xano | No Code Development PlatformXano

Once you open the snippet link, click on "Add to an existing Xano account". There, you'll be asked to log in with your Xano credentials. After logging in, choose your Xano instance, and finally click on "Add to Instance".

Then, open your Xano instance, and go to Marketplace > Purchased. There, you'll find the Xano snippet. Click on it, and you'll be able to install it.

Once installed, you'll see both the "All products" and "Like Users" tables in the Database section. The first table will contain all the products that will be listed in the app, including a reference to the "Like Users" table, to keep track of which items are in "active" state for each user. The "Like Users" table will store the user information, including authentication credentials. It will be used to authenticate the users with the app, using Custom Authentication. You'll be able to edit the content of those tables as you wish.

Also, in the API section, you'll see an API group called Like Button. Here, you'll see all the API endpoints that will be targeted from Bravo to connect the mobile app to the Xano backend. These endpoints are ready with all the needed logic to authenticate users, change the component states, and get the product list together with their state. Feel free to dig a bit deeper into the logic to understand how they work.

Now that the Xano setup is ready, it's time to import the design file in Bravo Studio and create the API requests to target the backend.

Importing the design file

To set up the app project in Bravo, import the following design file:

Bravo Sample: Multi-User Like ButtonFigma

Creating the API collection and requests

Now that the Bravo project is created, it's time to set up all the necessary API requests. Xano provides a way to export the API endpoints in Swagger format, which can be imported then as a new API collection in Bravo.

To do that, go to the Xano API group, and export the API specification as shown below.

After exporting the file, go to Bravo Data Collections, and create a new collection using the Swagger import. Choose all the API endpoints, as you'll need all of them later.

Now, you should have the following API requests created:

Each of those requests target the API endpoints existing in Xano. We need to make some edits for it to work with the User ID variable in Bravo, so the user IDs are exchanged properly with the backend.

First, we need to duplicate the PATCH request targeting the endpoint to like/unlike a product. As liking and unliking are two different actions, the request bodies will be different. Duplicate the PATCH request, name one of them "Like a product", and the other one "Unlike a product". You don't need to touch the request URL.

For the Like a product request, use the following JSON body:

{
  "user_id": "${user.id}",
  "state": "active"
}

For the Unlike a product request, use the following JSON body:

{
  "user_id": "${user.id}",
  "state": "default"
}

Now, make sure to use ${user.id} in the requests that require filtering by user ID: the one to get all products, and the one to get the liked products.

Get All Products request URL: https://xxxx.xano.io/yyyy/all_products?user_id=${user.id} Get Liked Products request URL: https://xxxx.xano.io/yyyy/liked_products?user_id=${user.id}

Now, you can go ahead and test all the requests, including the ones for user authentication. If they work as expected, you can go to the next section and set up the user authentication.

Setting up the user authentication flow

As mentioned earlier, we'll use the Custom Authentication feature to set up the user authentication flow with Xano. All the user data will be stored in the users table in Xano.

To set it up, follow the steps 2 and 3 of the Custom Authentication guide. You can skip the part of creating the API requests (they are already created for you), but make sure to test them as specified there.

Custom Authentication (Beta)Bravo Studio Help Center

Binding the API requests to the app screens

Once the API requests are working as expected, it's time to bind them to the different app screens. Follow the instructions below to do it.

Product list screen

Detail page screen

Liked products screen