Using social logins to authenticate users
One of the most common ways to implement user authentication in mobile apps is by allowing the users to authenticate with their existing social media accounts. In apps created with Bravo, this can be implemented by connecting Bravo to a platform called Auth0.
In order to implement social logins in the apps, we'll need to create an Auth0 account. To do that, go to https://manage.auth0.com and create a new account. Once you do that, navigate to
Applicationson the left sidebar of the Auth0 dashboard, and click on
Specify a name for the application, and select
Regular Web Applications. Then, click on
After creating the application, go to the
Settingstab. Copy the Domain, Client ID, and Client Secret values, and keep them somewhere safe. We'll need to indicate those later in Bravo to connect our mobile app with Auth0.
Scroll down in the Settings section, and find the
Allowed Callback URLsfield. Here, you'll need to indicate the following URLs:
https://a<your_app_id>.callbacks.bravostudio.appReplace <your_app_id> with the Bravo app ID value (without the "<" and ">" characters). This can be found in the Bravo URL for your app: https://projects.bravostudio.app/apps/XXXXXXX/screens.
After doing this, scroll to the bottom of the section and click
Save Changes. Once this is done, it's time to add social connections to the Auth0 app. To do that, navigate to
Socialin the left sidebar. Click on
In the next step, we'll have a list of social connection providers we can connect to Auth0. To create a connection, click on a provider. A specific connection setup for that provider will be opened, showing the permissions this provider will need.
At some point in the connection setup menu, you'll find the connection name. You need to copy this value, as it will be needed in the Bravo tags of the design file we import into Bravo to create the app.
After creating the connection, make sure the toggle next to your Auth0 app is active.
You'll need to add a new social connection for each service you want to add. Each service will have a set of steps and guidelines you'll need to complete.
We'll need to include a screen for user authentication. This screen will have the
[page:login]tag in the top-level component. For each of the login buttons, we'll put the
[action:login:<auth0-name>]tag. <auth0-name> needs to be replaced with the connection name for the Auth0 social connection we created before [LINK]. This name can be checked in the Auth0 social connection settings.
Remember that you need to configure a social connection on Auth0 for each service you want to use. In this design file, the services used are Google, Facebook, and Apple.
Therefore, the login action tags will be:
When the app user presses on one of the buttons, an external link will be opened, so the user can log in with the corresponding social account. If the login is successful, the app will navigate to the Home screen (as specified in the prototyping flow of the design tool).
Once the design file is ready, import it into Bravo. Once you do that, go to
OAuth 2.0. Here, you'll need to select
Auth0as the OAuth2.0 provider.
In this section, paste the Auth0 Domain, Client ID, and Client Secret values you copied from the Auth0 application. After doing that, click
Now, you should be able to test the application on Bravo Vision.