Progressive profiling focused on GDPR consent with custom API

In this tutorial we will see how to configure a form that requires users who have not already done so to accept a new privacy policy or other legal terms and conditions.

The most common scenarios in which this use case is commonly used are:

• When there are mandatory changes in the conditions of use of a service.
• When we need explicit permission to send new content and promotions to the user.

In both cases, users must necessarily accept the regulations. This configuration will help us automate the process of checking which users have already accepted the new regulation and request the acceptance of those who have not yet done so.

Prerequisites

• A custom API to authenticate the users.
• A custom API to update each users' profile.

Overview of the flow

Broadly speaking, what the two flows that we are going to configure will do is:

1. Log the user in if the credentials are correct.
2. Check whether or not the user has accepted the new terms and conditions.
3. If the new terms have been already accepted, log the user in.
4. If the terms have not yet been accepted, display a form step to require the acceptance and then log the user in.

Let’s take a look at how to set it up step by step.

Build the login form

First, go to the form editor and create a new one with two steps. We will configure the first step of the form as follows:

• Include an email field and a password field, marked as required.
• Change the ID of these fields to make them more user-friendly and make it easier to reference their values ​​later. In this case, we will use “email” and “password” as IDs.
• Check the Transient option of the password field. This will disable the persistence of this field and mask its value in the debugger.

In the step 2 of the form:

• Add a Rich text field and write the new terms and conditions.
• Include a legal field marked as required and change its ID to make it simpler. We will use “terms_accepted” as ID.
• Optional. You can delete the previous button from the step.

Now, let's build the logic for these form steps by connecting a flow to each of them:

Connect the login form with your API

This flow will perform a login operation with our API and, based on the information we have about whether or not the user has accepted the terms, it will decide whether to display a second form step to require the acceptance, or simply complete the login flow.

1. Login HTTP Request

Let's start adding an HTTP Request action to make a login request to our own API.

The settings for this HTTP Request action will vary according to your API but, in our case, they would be:

• ID: change the ID to "login" to simplify it.
• Method: choose the POST option.
• URL: we will use https://custom.demos.arengu.com/login.
• Headers: if needed, add your Authorization headers.
• Body:

{
  "sub": "{{input.body.email}}",
  "auth_type": "password",
  "password": "{{input.body.password}}"
}

2. Check if the request has been successful 

Include an If/then condition action to check if the login has been successful.

The settings of this If/then condition action are as follows:

• Condition: reference the {{login.success}} variable in the first input and choose is true as the evaluation criteria.

3. Login error message

Add a Show error message to the false branch to display a custom error message on the form if the credentials are not valid.

4. Check if the legal terms have been accepted 

As our login endpoint returns metadata as response:

{
  "token": "eyJhbGciOiJIUzUxMi...",
  "claim_url": "https://custom.demos.arengu.com/claim?token=eyJhbGciOiJIU...",
  "data": {
    "sub": "jane.doe@arengu.com",
    "meta": {
      "name": "Jane Doe",
      "terms_accepted": true
    }
  }
}

So we will need to include another If/then condition action to the true branch to check if the user has already accepted the conditions. This action will also vary according to your API schema. In some cases, you may need to make an HTTP Request to retrieve further information about the user.

The settings for this If/then condition action are:

• Condition: reference the {{login.body.data.meta.terms_accepted}} variable in the first input and choose is true as evaluation criteria.

5. Submit the form

Close the true branch by adding a Submit the form action if the user has already accepted the terms and conditions. In this case, we will set a redirection referencing the session token variable that the login HTTP request returns.

The setting for the Submit the form action are:

• Redirect to URL: enable it and reference the {{login.body.claim_url}} variable.

6. Store state variable

Add a Store state variable action to the false branch. It is used to store variables, like the claim_url variable, which our login API returns. Then, you can use the stored variables in any flow linked to the same form.

The Store state variable action settings are:

• Data fields: write the claim_url name in the first input and reference the {{login.body.claim_url}} variable in the second one.

7. Go the next form step

Close the false branch by adding a Jump to a form step action and choose the second step of the form that we have previously created.

Add the update profile flow

This flow will update the provided information from the user and resume the authentication flow.

1. Update user information 

Add an HTTP Request action providing your update user endpoint.

Again, this action will vary according to your API but, in our case, the settings are:

• Method: choose the POST method.
• URL: we will use https://custom.demos.arengu.com/update.
• Headers: if needed, add your Authorization headers.
• Body:

{
  "sub": "{{input.body.email}}",
  "meta": {
    "terms_accepted": true
  }
}

2. Submit the form

We will close this flow by adding a Submit the form action with a redirection to the previously stored state variable.

The Submit the form action settings are:

• Redirect to URL: enable it and reference the {{state.claim_url}} variable.

We're done! Now you can adapt this flow to your needs to collect new users' information the next time they log in.