🧙🏽Authentication with OAuth 2.0

OAuth is a technology used to allow a service (website or app) access resources hosted by another service on behalf of a user, in a secure way.

Using OAuth 2.0 in Bravo Studio allows to create apps that will communicate with third-party services to exchange user information. Some examples are:

• An app where your users can access their Strava information.

• An app that needs to access the musical taste of your users using their Spotify account.

• An app that needs to show private information only to some users, but you don't have control over this user base, you just need to authorize the access.

• An app and with several social logins available, so users can create a new account with their preferred social media account.

• An app using AWS Cognito to authenticate users.

Here is a list with services implementing OAuth. In case you want to check out more information about the OAuth technology, you can do it in the official website.

Getting OAuth 2.0 information from third-party services

As explained before, OAuth 2.0 is used to exchange user information between different services. When connecting a Bravo app with a third-party tool via OAuth 2.0, it's necessary to get some tokens and IDs from the third-party service, and indicate them in the Bravo app dashboard: Integrations → Login → OAuth 2.0.

The information you usually need to get from the third-party service and specify in Bravo is the following:

• User ID and user secret values

• Callback URLs

• Scope (indicates the permissions the third-party service grants to Bravo, in this case)

Bravo has presets for some of the services that support OAuth 2.0, making it easier to set them up. In case the service you want to connect is not in the presets list, you should select the Custom option. Some use cases are described later in this documentation.

Also, it's necessary to allow Bravo callback URLs in the third-party service settings. You'll need to find where you need to add them, as it will be different for each tool.

The URLs are the following:

• https://vision.callbacks.bravostudio.app

• 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.

• https://projects.bravostudio.app/callbacks/oauth-token

For more guidance, you can check out these step-by-step tutorials for popular third-party services here:

Using social logins to authenticate users

Connecting to Spotify API

Using AWS Cognito to authenticate users

Setting up the design file

To use OAuth 2.0 in a Bravo app, you'll need to use some tags in the design file. Similarly to authentication with Firebase, a login screen will be needed, together with a login action.

You'll need to add the following tags:

• [page:login] in the top-level app page.

• [action:login] in the UI element that will trigger the login action when pressing on it.

When the app user taps the login action element, an external login screen will be opened, so the user can indicate their third-party service credentials. Once the user has successfully authenticated, the app will navigate to the home screen of the app, and it will be possible to exchange user data with the API of the third-party service.

For instance, the app will be able to communicate with the Strava API to display the latest workouts of the authenticated user.

Apart from connecting to a third-party service to exchange user information, OAuth 2.0 makes it possible to implement social logins in your apps, so the user can authenticate with their existing social media accounts.