Use cases of Multistep Authentication methods

Users can create different use cases using different steps provided by the Multistep Authentication method. In this article, we are going to see some of the possible use cases which a user can implement for authentication purposes for their micro apps.

We will see how we are using different multistep authentication steps with refresh auth flow having non-shared and shared credentials. Also, we will explore its interface and functionality with the end user via a micro app.

Prerequisite

Make sure you are aware of the different configurations and functionalities of each step of the multistep authentication method as well as refresh auth flow. You can refer to the article to know more.

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

Authenticate using form + API request

  1. Add third-party connector of Rest API, under Studio > Connectors, click (+) Connector.

  2. Provide a name for the API and select Multistep Authentication as the authentication type.

  3. Under Multistep Authentication add the first step as FORM. Provide a name for it along with two input keys for Email and Password.

  4. Add second step under the same, API REQUEST with POST method. We will be using a XANO endpoint here to fetch the details like authentication token from the server.

    • Also go to the advance section of the API request step. Select content type as RAW and insert the following code in the BODY/FORM PARAMETERS.
      { “email”: “{{form1.Email}}”, “password”: “{{form1.Password}}” }

    This will connect the FORM variables to the API REQUEST step for authentication as input variables.
    You can test your auth steps.

  5. Next, we have to configure the variable which will have the authentication token saved in it. The auth token will be further used in the Header to validate the authentication. These variables will be added to this API endpoint in respective locations Querystring/header/body.
    Set:
    Key: Authorization Value: Bearer {{http2.body.authToken}} Location: In Header

  6. Now add your endpoint URL from where you want to fetch the user details after successful authentication with GET method.

  7. Click on Test Connection.

  8. Click Save. Now your API is ready to be used in your app.

Authenticate using API request + form + API request

Under this type of authentication, we will first pass on a valid credential and fetch the auth token as well as the header. Next, with the help of the form, we will specify an ID of which we will fetch the details later by a GET request from the endpoint URL.

  1. Add third-party connector of Rest API, under Studio > Connectors, click (+) Connector.

  2. Provide a name for the API and select Multistep Authentication as the authentication type.

  3. Under Multistep Authentication add the first step as API Request. Set its method as POST as we will be sending valid credentials to the endpoint. Specify the credential in the advance > content type (RAW) > Body/Form parameters.

  4. In the next step add a FORM with input key as post_ID with type number. This will be used to pass a specific ID to the endpoint in order to fetch details of that ID only.

  5. Now, add the final step of API Request with GET method to fetch the details and we will be passing the post ID in the URL along with Auth Token as a header in advance> Headers.

  6. You can try the test auth steps.

  7. Let’s save the authentication token we got back from the server by configuring the variable for it. Add variables of Authorization (having the auth token).

  8. Now to send the data to a subcategory endpoint URL we will use a POST method under Configure test API for your Connector. Set the Content-Type as RAW under the Advance section and add a body parameter that you want to get saved in the backend database.

  9. Do a Test Connection. You will see that your data with a unique post ID gets saved in the database.

  10. Click Save Your API is now ready to be used.

Authenticate using OAuth V2 – Non-shared credentials

Here we are going to provide an OAuth V2 authentication with an end user flow for a microapp. The end user flow depicts that the credentials will not be shared with the end user meaning that users will be able to log in with their own credentials.
We will be using GitHub’s OAuth support and its API endpoint.

  1. Add third-party connector of Rest API, under Studio > Connectors, click (+) Connector.

  2. Provide a name for the API and select Multistep Authentication as the authentication type.

  3. Under Multistep Authentication add a step of OAuth V2. Make sure that the Shared Credentials toggle is off.
    You will have to get the OAuth details of GitHub from your account’s developer settings.

  4. Click on Test Auth flow. You will notice that a GitHub popup has appeared. Provide the login details and authorize Dev GitHub app for DronaHQ.

  5. You will then receive the access token and the refresh token.

  6. Now that your Auth Flow is running, next configure the Refresh Auth flow for the OAuth V2 type of Auth flow we need to configure the refresh auth flow since we are getting an auth token along with a refresh token that is valid only for a certain period of time. Without the refresh auth flow, we will face an error.
    In this flow, we need to generate a new auth token using the refresh token fetched in the auth flow request. For this, we need to pass different parameters in the body of the access token endpoint API with a POST request. (These parameters can be found in the docs of GitHub)

  7. Click on Test Refresh flow you will see that it is returning a new access token and refresh token different from the auth flow.

  8. Now that we have our access token we need to pass it as parameters while making an API request. Go to the section of Configure request parameters and the following values.
    Authorization: Authorization
    Value: Bearer {{oauth1.accessToken}}
    Location: In Header

  9. Since the access token is valid for a certain period of time, we have configured a refresh auth flow for it, which gives us a new access token. In the previous step, we passed the access token from the auth flow to our API request. So, we need to configure the new access token and refresh token from the refresh flow to our auth flow.
    To map the details you can provide the following details.
    oauth1.accessToken: {{refresh_http1.body.access_token}}
    oauth1.refreshToken: {{refresh_http1.body.refresh_token}}

    We are mapping the refresh token in the variable in order to use the new refresh token every time to fetch details. Whenever the refresh auth flow runs the refresh token and access token are newly generated. So, the old refresh token gets expired which is why we need to keep this updated.

  10. Finally provide the test API for your connector.

  11. Click on Test Connection.

  12. Click Save.

Implementing in microapp

  1. Create a new app.

  2. Use controls of your choice. We will be using image control and text label control.

  3. Bind the data of the controls using connectors under the bind data section.

  4. Select the configured multistep authentication connector of GitHub.

  5. Bind the suitable key as a column for the controls.

  6. Do Test & Finish.

  7. Click on app preview.

  8. The app will ask you to authenticate using your own credentials.

Authenticate using – Form + Basic Auth

Here we are going to provide an auth flow of form plus a basic auth model with the end-user flow for our microapp.
We will be using Shopify basic auth with a form model of auth flow.

  1. Add third-party connector of Rest API, under Studio > Connectors, click (+) Connector.

  2. Provide a name for the API and select Multistep Authentication as the authentication type.

  3. Under Multistep Authentication add the first step as FORM. Provide a name for it along with two input keys for Username and Password.

  4. Add the second step under the same, Basic Auth with username and password set as output parameters of form step, {{form1.Username}} and {{form1.Password}} respectively.

  5. Perform a test auth flow. You will notice that it is returning an auth token generated from the DronaHQ JavaScript library present in the server itself.

  6. Set refresh auth flow same as auth flow with using stored credentials to use form input from auth flow without end-user interaction.

  7. Next, we have to configure the variable which will have the authentication token saved in it. The auth token will be further used in the Header to validate the authentication. These variables will be added to this API endpoint in respective locations Querystring/header/body.
    Authorization: Authorization
    Value: {{basic2.authToken}}
    Location: In Header

  8. Now add your endpoint URL from where you want to fetch the user details after successful authentication with GET method.

  9. Click on Test Connection.

  10. Click Save. Now your API is ready to be used in your app.

Implementing on microapp

  1. Create a new app

  2. Use controls of your choice. We will be using table grid control.

  3. Bind the data of the controls using connectors under the bind data section.

  4. Select the configured multistep authentication connector of Shopify.

  5. Bind the suitable key as a column for the controls.

    image

  6. Do Test & Finish.

  7. Click on app preview.

  8. The app will ask you to authenticate using your own credentials for basic auth using the form model.