Authentication with custom backend

Authenticate your app users with your preferred backend tool
The Custom Authentication feature allows creating an authentication flow for your apps using any backend tool of your choice, even a custom backend.
In this page, we'll describe how to set up the design file and the necessary API requests to perform the user authentication.

What you will need

  • A backend ready with several endpoints for authentication: login, user information and (optionally) signup.
  • The app design with the Bravo authentication tags correctly set up.
  • The API Collection set up in Bravo Studio.
  • Finally, bind the API requests to your UI elements to add functionality to your app.
Let's learn how to do all this!
If you don't have your user authentication backend ready, we suggest you to first follow our tutorial on how to set up Xano as your user authentication backend.

1. Setting up the UI

We'll need the following pages to set up the authentication flow in the apps:
  • Login page.
  • Signup page (optional).
🎨 Here is a sample Figma file with the setup:

Login page

The login page will appear when the user is not logged in when the app starts, or when the user has just logged out. There can only be one login page in the app.
  • [page:login]: The tag that we add to the page that we want to use as the login page.
  • [component:input-email]: creates an input field for the account email.
  • [component:input-password]: creates an input field for the account password.
  • [action:login]: Action of the button that does the login action with the filled credentials in the previous fields.

Signup page (optional)

You can either allow news users to register in your app or only allow access to a specific list of users defined in your backend. So the signup page is an optional screen, but it's the easiest way to let users create their own accounts.
  • [component:input-email]: creates an input field for the account email.
  • [component:input-password]: creates an input field for the account password.
  • [action:register]: sends the filled information to the backend to create a new user account.

Log out action (optional)

To allow your users to log out (once they have logged in), add this action Tag to a UI element.
  • [action:logout]: Log out action, can be added to any UI element inside the app.

2. Creating the API collection and requests

Once we have set up the design file, we’ll create an API collection containing all the necessary requests for the authentication flow. We’ll create a POST request for the login page, another POST request for the signup page (in case we created one), and finally, a special GET request, called User Info, that will get user-specific information from the backend, such as user ID and user name.
Note that, before creating the API requests in Bravo, you should have created in your backend the necessary API endpoints these requests will be connected to. This process will be different for each backend tool, but we have created a tutorial on how to set up Xano as your user authentication backend.

Necessary API endpoints in the backend tool

For each of the API requests defined below, you’ll need to create an API endpoint in the backend tool. These endpoints must, at least, return the following data:
  • The endpoints for the user login and register actions must return a user token value in the response message. This value must be generated by the backend tool, depending on the authentication method used.
  • The endpoint for the user information must return, at least, a user ID value. It can also return user name, user email and user picture values. These values will be available later in Bravo (both API Collection and Data Binding sections) as special variables.

Creating the API collection

Once we have the backend endpoints ready, we’ll create a new API collection that will contain all the requests. Go to the API Collections section, create a new collection, and select Start from scratch.
Once the collection is created, you need to indicate the authentication method that your backend uses. There are some different authentication methods. You’ll need to define this in your backend tool. It’s possible that your backend already enforces one method: for instance, Xano uses the bearer token method, returning a JWT token every time a user authenticates successfully. You should read the documentation of the tool or system to find it.
To configure this, go to the collection settings (icon to the right of the collection name), and go to the Authentication tab.
For the bearer token method, you must leave the Token value empty, as this will be later processed by Bravo to insert the correspondent for each specific user in the requests.

Add the requests to the API Collection

After creating the collection, we’ll define the individual API requests.

Login request (POST)

This request will be bound to the UI elements in the Login screen: the email and password input fields.
Create a new request in the collection, and select POST as the request type. Copy the endpoint URL from your backend tool, and paste it in the request URL.
After doing that, you’ll need to define the body of the request that will contain the email and password credentials. For this example click Body and select JSON. If your backend uses another type like Form-data, select it.
Fill the body content with the following JSON:
"email": "${email}",
"password": "${password}"
Note that ${email} and ${password} are Bravo variables that will contain the values from the app fields. The other "email" and "password" names are the ones that will receive the backend, so they need to be coherent with its API endpoint definition. They might be different, like "_email" or "userEmail" for example. You will need to check what specific names you need to use.
Finally it’s time to test the login request! Make sure you have created a user in your backend tool. Then go to Test Values and fill in the email and password variables with the values you have created:
Click Send, and you’ll get in the response from your backend. In the Received Data tab, select the parameter correspondent to the auth token:
Then Go to the Selected Data tab and set the Name as accessToken:
Finally, go to the Debug tab of the request. If the request was successful, you’ll be able to see the full user token value in the response message. Copy this value, as we’ll need it later to configure the User Info request.

Signup request (POST) - optional

In case you created a signup page in the design file, you’ll also need a POST request that will be used to create new users. Similarly to the login request, you must define first the API endpoint with the functionality to add a new user in the backend tool.
Create a new request in the collection, and select POST as the request type. Copy the endpoint URL from your backend tool, and paste it in the request URL.
Then, you’ll also need to define a request body. In this case, the body will be the same we used for the Login request, but keep in mind that you’ll need to check the names for the keys (the ones to the left in the body) in your backend tool - "email" and "password" in this case.
After setting up the body, you can test the request. As before, you’ll need to provide some Test Values. In this case, if the request is successful, a new user with the specified email and password values will be created in the backend.

User Info request (GET)

Finally, we’ll create a user info request that will return the user-specific data. As specified above, this request must return a user ID (identifier) value, so make sure you have set it up appropriately in the backend tool. It can also return data for the user name, email and picture.
Create a new API request (in this case a GET request), and insert the corresponding endpoint URL (check this in your backend tool).
Note that this request will return data from a real user existing in the database. Therefore, you’ll need to include a valid user token in the test request - otherwise, the access to the backend data will be unauthorized. To do this, go to the Test Values section, set _authorization as key name, and paste the user token you copied before from the Login request step before.
After doing that, you can go ahead and test the request. If it’s successful, it will return the necessary user data specified before. You need to give these data items some specific naming in the Selected Data section:
  • User ID: id
  • User name: name
  • User email: email
  • User picture: picture
In our example, we are only returning the id field, which is the only mandatory field. In case you also return some of the other data items from your endpoint, stick to the naming indicated above.
All authenticated requests
A request being authenticated means that the backend requires a valid authentication token to be sent in the headers of a request targeting a certain API endpoint, or group of endpoints. This way, the backend will be able to process information which is specific to a certain user that just logged in to the app: for instance, returning a list of items, or accepting user inputs via form. Whether an endpoint is authenticated (and therefore requires being targeted with an authenticated request) is specified in the backend tool itself.
An example of an authenticated request is the User Info GET request we previously set up, targeting an authenticated endpoint in the backend that returns user-specific sensitive information. Most likely, you'll want to add more authenticated requests to the API collection, that you'll later bind to your app screens.
By default, all the requests included in an API Collection in Bravo are authenticated, as long as this is specified in the Collection settings (we did that here). In order to test them correctly, you need to indicate the _authorization test value, together with a valid token, as we did for the User Info GET request previously.
In case you get a 403 error after sending the test request, make sure you specified the _authorization test value with a valid token, and that the API collection has authentication configured in the collection settings. You may obtain a valid token running a login request from the correspondent API request.

3. Binding the UI elements to the requests

If you haven’t done that yet, import the design file into Bravo by creating a new app. After you do that, go to the app integrations section and select the Custom Login option. You’ll need to indicate the User Info request created before.
If everything is correct, you’ll see some green ticks next to the different user data items. After clicking Save, it’s time to bind the screens to the data items from the API requests.

Login screen

In the main app dashboard, open the Login screen and the data binding settings. Then, bind the email and password inputs with the corresponding variables of the Login request body, as indicated below.
Then, in the Form Response Action section, select the Set Access Token option, and set the token variable to ${accessToken}. This is the name we gave to the data item containing the user token, in the Login GET request. This way, Bravo will store the user token once the user has logged in successfully.
To define which is the app home page, you need to use the prototyping tool in your design. Don't use the "Go to page" action in the Form Response Action, otherwise the authentication setup won't work.

Signup screen

Finally, in the signup screen, follow similar steps to bind the email and password inputs. As this screen uses a normal form, you’ll need to redirect the user to the Login page as the form response action.
Now, the authentication flow should be finished! Go ahead and test it on Bravo Vision 📲