Using social logins to authenticate users
Last updated
Last updated
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 Applications → Applications on the left sidebar of the Auth0 dashboard, and click on Create Application
Specify a name for the application, and select Regular Web Applications. Then, click on Create.
After creating the application, go to the Settings tab. 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 URLs field. Here, you'll need to indicate the following URLs:
https://vision.callbacks.bravostudio.app/
https://projects.bravostudio.app/callbacks/oauth-token
https://a<your_app_id>.callbacks.bravostudio.app
Replace <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 Authentication → Social in the left sidebar. Click on Create Connection.
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.
Facebook Social Connection by Auth0 is currently supported only with IOS.
Also, there might be some additional steps you need to complete to create the social connection successfully in your Published apps. In the case of Facebook, you need to create a Facebook developer account and create an app in the developer dashboard. In the case of Google, you need to go to Cloud Google Platform to get the credentials, and the same per each provider you will use. These steps will be indicated accordingly in the setup menu.
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.
Now, we need to set up the design file with the appropriate tags. We'll use this design file as an example.
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:
[action:login:apple]
[action:login:facebook]
[action:login:google-oauth2]
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).
In case you're integrating Apple login, we recommend setting a unique login button with the [action:login] tag in login screen, instead of creating separate login buttons with the different providers. This will open a modal webview from Auth0, showing all the login options to the user.
Once the design file is ready, import it into Bravo. Once you do that, go to Integrations → Login → OAuth 2.0. Here, you'll need to select Auth0 as 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 Save.
Now, you should be able to test the application on Bravo Vision.
