Guides & tutorials

Progressive profiling with account complete and custom API

Table of contents

This tutorial will cover how to add a progressive profiling flow to your login, and collect new users' data the next time they authenticate with your API. The two most common scenarios are:

  • You decide to modify your sign-up flow adding new fields, and you also want to collect the same data for your current users.
  • You want to reduce sign-up friction, so you prefer to collect more users' data the next time they log in.

Prerequisites

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

Overview of the flow

A quick overview of this progressive profiling flow will be:

  1. User successfully logs in.
  2. We check if we already have the needed information about that user (eg. company name or job title).
  3. If we already have the information, we continue the authentication flow.
  4. If we don't, we jump to a second step where we ask the user to complete her profile and then, we resume the authentication flow.

Building the login form

Go to the form editor and create a form with two steps. In the first step:

  • Add an Email and Password fields.
  • Change their IDs to email and password to make it easier to later reference their values.
  • Mark the Transient option to the password field. This will disable the persistence of this field and mask its value in our debugger.

In the second step:

  • Add two Text fields and customize them to your needs.
  • Change their IDs to company_name and job_title.

Now, let's add the logic of those steps linking a flow for each one:

Connect your login form with your API

This flow will perform a login operation with an API and, based on the information we already have from the user, we will decide if we prompt a second screen where we ask more information, or just complete the login flow.

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

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

  • ID: change the ID to login
  • Method: choose POST
  • 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}}"
}
  1. Add an If/then condition action to check if the login was successful.

If/then condition settings:

  • Condition: add {{login.success}} to the first input and choose is true as the evaluation criteria.
  1. You can add a Show error message to the false branch displaying a custom error message to the user if the credentials are not valid.
  2. Add another If/then condition to the true branch to check if the user already has the required properties. Again, this action will vary according your your API schema, in some cases you will need to make another HTTP Request to retrieve further information about that user.

If/then condition settings:

  • First condition: add {{login.body.data.meta.job_title}} to the first input and choose exists as evaluation criteria.
  • Second condition: add a second condition using the AND option, providing {{login.body.data.meta.company_name}} to the first input and choosing exists as evaluation criteria.
  1. Finish the true branch adding a Submit the form action if you already have the information about that user. In our case, we will set a redirection with a session token that returns the login API.

Submit the form settings:

  • Redirect to URL: enable it and add {{login.body.claim_url}}
  1. Add a Store state variable action to the false branch. This action is useful to store variables, like the claim_url (which our login API returns), that you want to use across your flow executions.

Store state variable settings:

  • Data fields: add claim_url to the first input and {{login.body.claim_url}} to the second one.
  1. Finish the false branch adding a Jump to a form step action where we will just choose the second step of our previously created form.

Adding the update profile flow

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

  1. 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 POST
  • URL: we will use https://custom.demos.arengu.com/update
  • Headers: if needed, add your Authorization headers.
  • Body:
{
  "sub": "{{input.body.email}}",
  "meta": {
    "company_name": "{{input.body.company_name}}",
    "job_title": "{{input.body.job_title}}"
  }
}
  1. We will finish the flow adding a Submit the form action where we will use our previously stored state variable.

Submit the form settings:

  • Redirect to URL: enable it and add {{state.claim_url}}

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

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.