Progressive profiling with Auth0 actions

Do you want to reduce signup friction but also collect more information about your users?

This use case requires your users to complete their profile the second time they log in. It consists of a custom form to request specific data from your users which will be displayed, after logging in, only to the users in whose profile this data is not saved.

Learn, step by step, how to configure it using Arengu's integration with Auth0 actions.

Prerequisites

• An active Auth0 account to authenticate users. You can sign up for free here if you don't have one.
• An active Arengu account to build the progressive profiling form and its server-side logic. You can sign up for free here if you don't have one yet.

What are we going to build?

In this case, a form to ask for the company and job title to the users for whom we do not have this data, integrating it with Auth0 actions.

This form will be linked to a flow that will check the user's session token and update the user's metadata in Auth0.

1. Add the Auth0 action

First of all, add the Arengu progressive profiling action of Arengu to the Auth0 dashboard. 

• Go to your Auth0 Dashboard > Marketplace.
• Search for Arengu Progressive Profiling.
• Click on the action and then on the Add integration button.

‍

You will be automatically redirected to the Actions Library screen. 

2. Configure the Auth0 action

As the page notification indicates, the next step is to add the following keys:

• Arengu Form URL: The URL that contains an embedded form or with a hosted form page in Arengu too.
• Required User Fields: A comma delimited list of user metadata fields, these fields must match the field names from the Arengu form.
• Login Count for Profiling: The number of login counts at which the profile form should be shown. A value of 1 here would mean the profile form will show on registration. 
• Arengu Session Token: A long, random string that we will use to sign and verify a JSON Web Token.

Click on Create to complete the configuration.

3. Add the Action to the Flows

Add the newly created Arengu progressive profile action to the flow.

• Go to your Auth0 Dashboard > Actions.
• Select Flows and choose Login.
• Drag the Arengu Progressive Profiling Action to between Start and Complete.

Click on Apply to save the Login flow. 

Auth0 will process all logins for your tenant using this action. Before activating the integration in production, make sure you have configured all components correctly and verified on a test tenant.

4. Create the form in Arengu

Go to the form editor and add the required fields. In this case, we will add two Text fields to ask the user for the data we need. To set up these fields:

• ID: change their ID to company_name and job_title. These IDs must be exactly the same that we have included in the action.
• Required: enable the checkbox to set them up as required.

As we will receive the “state” and “session_token” params when Auth0 redirects the user, we will need to create two hidden fields with the same keys. Arengu will automatically pre-fill them with the corresponding URL params values.

Add these two hidden fields by clicking on the eye icon to open their settings:

• Hidden fields: create a hidden field with the key state and another one with session_token. In both cases, leave the second input empty so that Arengu can automatically pre-fill them.

Click on the ending screen and enable the redirection section

• Redirect URL: add {{state.redirectUrl}} as value. We will link a flow that stores this variable in the next section.

Click on the Flows tab on the light menu, create a flow linked to the first step of the form by clicking on the + icon and publish the changes.

5. Build the flow in Arengu

Go to the flow editor and start the flow by adding a Verify JSON web token action:

To set it up:

• ID: change the ID to verifyJwt to simplify referencing it.
• Token: add {{input.body.session_token}} to reference the session_token parameter we are receiving from the hidden fields of the form.
• Secret or private key: add your Auth0 SESSION_TOKEN_SECRET.
• Issuer: add the host from where you will receive the requests (eg. 'https://arengu.eu.auth0.com/`).

Add an If/then condition action to perform conditional logic if the JWT is valid or not. The settings for this action are these:

• Condition: reference the {{verifyJwt.valid}} variable on the first input and choose is true as evaluation criteria.

Include a Show error message action in the False branch to display it on the form in case the JWT validations fails (eg. wrong settings, expired JWT, altered JWT, etc).

Then add a Sign JSON web token action to the True branch to sign the provided user information.

Set up this action as follows:

• ID: change the ID to signJwt to simplify referencing it.
• Algorithm: choose HS256.
• Secret or private key: add your Auth0 SESSION_TOKEN_SECRET.
• Issuer: add the host from where you will receive the requests (eg. https://arengu.eu.auth0.com/).
• Subject: reference the {{verifyJwt.payload.sub}} variable to recall the verified sub of the Verify JSON web token output.
• Expires in: add a short expiration time (eg. 15-30 seconds) to avoid replay attacks.

Payload: we will add our custom claims inside the other property and the Auth0 state on the root of the body:

{
  "other": {
    "company_name": "{{input.body.company_name}}",
    "job_title": "{{input.body.job_title}}"
  },
  "state": "{{input.body.state}}"
}

Add a Store state variable to store a custom variable that we will reuse in our form. To set up this action:

• Data fields: add redirectUrl as first value and https://YOUR_TENANT_SUBDOMAIN.auth0.com/continue?state={{input.body.state}}&session_token={{signJwt.token}} as second value. This URL will be used to redirect the user with the state parameter we've received in the form, and the token parameter we've generated in the previous flow action.

Then close the True branch of the flow with a Submit the form action that will display our ending screen that redirects the user using the previously generated variable.

Finally, publish the changes.

Preview, test and debug it

To check if everything is working properly: 

• Go to Auth0 Dashboard > Authentication > Database.
• Click on the three dots icon of the database connection > Try.

This will open the Auth0 login page where you can test the use case:

Once you have tried it, you can also check if the data has been updated this way:

• Go to Auth0 Dashboard > User management > Users.
• Click on the user that you used to test the form.
• Check the user_metadata section to verify that it has been updated.

If you want to try it again, you can manually delete this data and re-launch the test.

If it has not worked properly, you can check the possible errors in Auth0 Dashboard and in the Executions tab of the flow in Arengu’s editor.

‍