Custom Authentication
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 describe how to set up the design file and the necessary API requests to perform the user authentication.

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:
Bravo Sample: Custom Authentication
Figma

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:submit]: sends the filled information to the backend to create a new user account. Note that we're using the submit action, as the signup page uses a regular form to submit the data to the backend.

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. We’ll release further guides in the future to show examples of how to do this for different popular backend tools.

Creating the 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 endpoint for the login request 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 (more about this in the next section).
  • 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.
Here, we include some guides showing how to set up these endpoints in different backend tools.

Creating the API collection

First, 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. 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 token for each specific user in the requests.

Creating the requests

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, namely, 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 user credentials: email and password). Sometimes, you can configure the body type used in the backend tool, and you can definitely do that if you’re using your own custom backend. The most common body type used is JSON.
In this example, we used the variable names ${email} and ${password} in the body, but you can use any other name you wish. However, the key names of the body (the words in the left side, without the bracket notation) will be the ones specified in the backend tool, so they need to be coherent with the API endpoint definition.
Finally, once the request body is defined, it’s time to test the login request! To do that, you’ll need to fill in some Test Values, corresponding to a user already created in the database. We recommend you to create a test user in the backend tool, that you can use here to test the request.
After hitting Send, if the request is successful, you’ll get in the API response message the data item corresponding to the user value. In the Selected Data tab, you should set the data item 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 (optional) - POST

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.
However, you can use different names for the variables with ${} if you wish - these are the ones you’ll need to bind later to the UI elements in the Data Binding section.
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 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 as the value.
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.

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 settings (App > Settings > Login) 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.

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 📲