Configuring REST API connectors- Multistep authentication

Studio provides you with several Connectors like Databases like MySQL, Microsoft SQL, etc., and Third-party connectors like Slack, Trello, Stripe, etc. You can connect the different APIs using their respective authentication methods. There are different methods of API authentication, using the API Key, using basic Auth which is using the username and password, using the OAuth which is a standard for accessing user permissions without a password, the AWS authentication method, and the multistep authentication method.

Multistep Authentication method is a nested or custom authentication. With multistep authentication, the user can provide two or more forms of authentication. A multistep authentication scheme considers using different resources of the same authentication factor to allow a user to access systems or information.

Prerequisite

DronaHQ Mobile App must be above 8.3.0 and above version for using multi-step OAuth-type > Non-shared creds connector.

Configuring the third-party API connector

To add third-party connectors, under Studio > Connectors, click (+) Connector.

Studio has different options including the use of the REST API and GraphQL that allows you to easily connect to the Third-Party API and database and access important systems. Both of them have a multistep authentication feature. We will be selecting the REST API for this example.

Configure API Category

When configuring the APIs you need to provide the Authentication details for the respective authentication method. Let us see how to configure an API using the multistep authentication method.
Once you select the REST API, enter the Connector name which should ideally be self-explanatory.
In the Authentication, section select Multistep Authentication.

NOTE: Use the Multistep authentication type if your API supports Hybrid authentication. where you can chain together multiple “steps” to support virtually any kind of API authentication.

Configure account-specific fields

Configuring account-specific fields for multistep authentication requires adding:

  • authentication steps,
  • Refresh auth flow,
  • variables,
  • test API for the connector
  • And save.
    .

  • Multistep Authentication: You have to click on + Add Step, then you will get options to select from such as

    • FORM,
    • API REQUEST,
    • OAUTH V2,
    • Basic Auth,
    • OAUTH V2 – PKCE
    • OAUTH V2 – CLIENT CREDENTIALS
    • SSO TOKEN

    You can also click on Paste step; this will paste the configuration details copied in your clipboard and implement this as a step in multistep authentication steps as well as for refresh flow but the refresh flow will not accept anything other than API request details.

    You can add multiple steps with various combinations of forms, basic auth, API requests and OAuth V2.

    • FORM: After selecting the form it will ask you to provide details such as the form modal tile and to add input keys. The input keys can consist of text, email, number, and password. This is for the end-user to provide details to the backend, to have successful authentication. You can add multiple input keys such as:

      • Text: to have only text type of input in the form.
      • Number: to provide numeric values for the form.
      • Email: to specify email ID as input type with right email ID format.
      • Password: to save password type input.

      Once you add the input keys, output variables for the respective keys will be autogenerated. To see what it looks like, click “Test auth steps” – you should see a modal appear asking you to enter in some credentials.

      Enter a few dummy information, and afterward present the structure. The response for auth steps will be shown below.

      The variables of this form can be used in further steps.

    • API REQUEST: Here’s where you should configure it to make an API request to your server to obtain an authentication token. Simply provide the URL, from where you want to get back the request call output.

      This auto generates two default variables of body and headers.

    • OAUTH V2: Here is where you should configure an OAuth V2 authentication request, providing the account-specific configuration details.
      You would require to provide the OAuth V2 details like Client ID, Client Secret, scope and endpoints of Auth request, and Auth token request. It is similar to configuring an OAuth V2 authentication method but only as a step in the Multistep Authentication method.

      For OAuth V2 we have a toggle button of Shared Credentials . It is when enabled the auth step will use same credentials of OAuth as configured by the admin. If disabled then each end-user will have to authenticate individually.

      For OAuth V2 we also have some additional parameters for client id, client secret, and more. Users can use these parameters in further steps to configure variables or while configuring request parameters. This helps avoid repetitive mentioning of OAuth parameters and can be used as output variables. It is accessible in AuthFlow and RefreshFlow steps.

    • Basic Auth: This is a simple authentication method. You just need to provide the username and password to complete authentication. On completion, it will return the auth token.

    • OAUTH V2 – PKCE: Here is where you should configure an OAuth V2 – PKCE authentication request, providing the account-specific configuration details. This is very similar to configuring the environment for PKCE-based connectors. You would require to provide the OAuth V2 - PKCE details like Client ID, Client Secret, scope, code challenge method and endpoints of Auth request, and Access token request. It is similar to configuring an OAuth V2 – PKCE authentication method but only as a step in the Multistep Authentication method.


      Use the OAuth 2 PKCE Flow authentication in multistep authentication type if your API supports OAuth 2 “Authorization Code” grant. When setting up a Service, your user’s browser will be redirected to your site where you can authenticate them.

    • OAUTH V2 – CLIENT CREDENTIALS: Here is where you should configure an OAuth V2 – Client Credentials authentication request, providing account-specific configuration details. This is very similar to configuring the environment for the Client Credentials-based connector. Use the OAuth 2 Client Credentials Flow authentication type if your API supports OAuth 2 “Client Credentials” grant.


      You would require to provide the OAuth V2 – Client Credentials details like Client ID, Client Secret, scope and endpoints of Auth request, and Access token request. It is similar to configuring an OAuth V2 – Client Credential authentication method but only as a step in the Multistep Authentication method.

    • SSO TOKEN – You can also add the SSO token as a method of multistep authentication. This method will not require configuring any details. You simply have to select a step with SSO Token selected. This method will provide output variables based on the active SSO token in the current account. You can learn more about SSO tokens from here.


      You can add SSO Token method only one time in the methods of multistep authentication since an SSO token is required one time only.

  • Configure Refresh Auth Flow: This step is carried out when we get a 401-error code as end result of calling the API after running the multistep auth flow steps. You can configure a set of multiple steps that run automatically after a 401 response when requesting API. This is useful for refreshing a user’s authentication session without them needing to refresh the page.

    • You can either add your own steps by clicking + Add Step and select from API REQUEST and SSO Token (you can also paste the copied steps from your clipboard by clicking Paste step ).


      Next, you need to update the variables from your refresh auth flow output to your actual auth flow output in order to use it in the next step of multistep authentication. Updating variables comes in use when we face an error and the Refresh Auth flow takes action. This creates a new auth token saved in different parameters, so in order to send the new token as a header to test our API endpoint, we need to set the variable’s value of Auth flow the same as of Refresh Auth flow.

    • Or you can toggle on the Same as Auth Flow button, it will use the same auth steps mentioned in Multistep Authentication.


      You also get a toggle button of Use Stored Credentials; This is useful to fetch the stored credentials and use it in the form modal automatically without showing it to the end user at the time of refreshing.

  • Configure request parameters: This section is to save the authentication token which we get back from the server, as parameters.
    These parameters will be added into all the API endpoints for all your added Api’s automatically in respective locations (Querystring/header/body).

  • Configure test API for your connector: Add a simple API endpoint to test user credentials. DronaHQ includes data from your input form in the URL Params by default; click Advanced to customize the API call if your API expects them in the header instead.

After configuring all the details, you simply have to save it after successful testing of it.

For the Multistep Authentication connector, the studio maintains two different types of cache data, one in the frontend/browser and one in the backend/ DronaHQ cloud.
All the outputs from our auth flow steps – form, API request, OAuth V2, and basic auth- are cached in the frontend securely whereas all the outputs from our auth flow with shared credentials – OAuth V2- are cached in the backend in this way tokens/outputs are never directly exposed to end user.
You can also clear cached data present in the front end from the subcategory of the configured connector by clicking on Clear cached auth. It is helpful to either rerun the auth flow or use different credentials other than stored previously

Managed Auth Screen

We have a toggle button of Show Managed Auth screen during app start under Settings > App Settings > App Installation.

When we toggle this setting ON it will provide us with a screen with all the multistep-authentication types used in our app. You will have a single screen to authenticate all the services configured in the app. This also helps in clubbing the same multistep authentication connectors used in various controls, in this way you do not have to perform authentication again and again for the same connectors used in different controls and actions.

In case the toggle is OFF it will ask for authentication on every action on the screen of our app. If there is a single multistep auth connector used several times for different controls in the same screen we have to authenticate every time with each popup or else there is a possibility of a crash in the performing authentication from the API endpoint to fetch data. For different screens, it should reuse previously entered creds provided the connector is the same.

Navigate to Authentication screen – Action Flow

When a user wants to clear the cached data of authentication or wants to proceed with a different credential for connectors’ authentication, the studio provides an on-screen action of Navigate to Authentication screen. This helps to clear the cache token saved in the backend/frontend of the app after successful authentication of the connector.

In the next screen of Configure Action’s Fields you will have a dropdown to select whether you want to reload the app after authentication or just want to continue for the same.

If set to TRUE, after the user authenticates on Managed auth screen, on click of continue, the app will be reloaded and start from the beginning whereas if set to FALSE, after the user authenticates on Managed auth screen, on click of continue, the app will resume from where the user left the app and all the data will be kept the same.

App preview: