Guides & tutorials

Advanced forms: a passwordless sign-up form with email verification and data enrichment

No items found.
Table of contents

In this tutorial, you will learn how to build a passwordless form with email verification, data enrichment and conditional logic to automate different after-submission actions. 

This is a very common example that can be found in many SaaS and B2B services, which can also be easily and completely adapted to your needs.

Previous requirements

To build this use case you will need:

  • A custom API, to log the user in.
  • An Arengu account, to create the form and the server-side logic.

What are we going to build?

A use case that automates actions based on the relevance of the user, depending on whether or not they have corporate email. It consists of a multi-step form and 3 flows connected to them with:

  • Passwordless registration with social login or just an email.
  • Email verification with a temporary code.
  • Data enrichment and conditional logic to create branches and trigger actions.

Let's see, step by step, how to build it with Arengu.

The multi-step form

In the first step of the form we will include the Google social sign-up button and a second passwordless registration option, that consists of a text and an email field to ask for the user name and an email address. To set up these fields:

  • ID: change the IDs for “Name” and “Email” to make them easier to reference.
  • Required: enable this checkbox on each field to set them up as required.

In form step two, add a number field to request the temporary code that we will send by email to the user when choosing the email registration option. This step will only be displayed if the user does not choose the social sign-up option. To set it up:

  • ID: change the ID for “otp” to simplify it.
  • Required: enable this checkbox to set it up as required.

In form step three, we will ask for some company details, including company name, website URL and job title, configuring the fields as follows:

  • ID: change the IDs for “company”, “url” and “job_title”.
  • Required: enable this checkbox on each field to set them up as required.

Finally, in form step four, include three different pricing options using the cards field. 

Once all the steps of the form have been created, publish the changes and click on the Flows tab to start building the server-side logic.

You will need 3 flows in total: 2 step validation flows linked to steps 1 and 2 and an after submission flow. Create the flows clicking on the plus icon and then publish the changes

Flow 1: Social login or email verification

The flow that we need to connect to form step 1 needs to have this structure:

1. Check the social login

First, include an If/then condition action configured as follows:

  • Condition: reference the {{input.body.social}} variable and select “has value”.

2. Set up the HTTP Request actions

Click on the HTTP Request actions and set them up as follows.

To configure them:

  • URL: paste in both of them the passwordless endpoint URL of your API.
  • Method: select POST.
  • Content/type: application/json
  • Body: these actions must reference the proper email variable in the body field. In the True branch, the HTTP Request action must include the email variable from the social sign-up option and, in the False branch, the input email variable.
{
  "sub": "{{input.body.email}}"
}

If necessary, add the Authorization header and the corresponding key of your API.

3. Check if the request has been successful 

Then, we will include an If/then condition action to check if the sign-up HTTP Request has been successful and create two branches. Set it up as follows:

  • Condition: reference the {{signupRequest.success}} from the outputs of the previous action and choose “is true” as condition.

4. Generate and send a temporary code

Include a Generate one-time password action in the true branch:

  • Reference value: add the {{input.body.email}} variable from the form.
  • Code length: we will leave the default four-digit value.

Then add an action to send it by email. In this case, we have chosen our Mailjet native action. To set it up, you only need to copy and paste the API key and the Secret key of your account in Mailjet, and also indicate the email sender.

To test it, you can use Arengu's native Send email action.

Reference the input email variable from the form on the proper field and include also the OTP variable from the outputs of the previous action in the subject and message fields. Remember to execute the flow to be able to get it from the selector.

5. Go the next form step

After the Send Mailjet email, we need a Go the next form step action to redirect the user to form step 2. This action does not need any configuration.

In the social signup branch, we will change it for a Jump to a form step action, which will send us to step 3 of the form, since we do not need to verify the email.

You can also personalize the error messages that will be displayed on the form if there is an error in the signup process. Once everything is ready, publish the changes.

Flow 2: Verify the temporary code 

Link a flow to the 2nd form step with the following structure:

First of all, add a Verify one-time password action configured as follows:

  • Reference value: add the {{input.body.email}} variable from form step one.
  • Code value: reference the {{input.body.otp}} variable from form step two.

Then include an If/then condition action to check the result of this verification and manage its responses:

  • Condition: reference the {{verifyOneTimePassword.valid}} variable from the outputs of the previous action after a flow execution and select “is true” as condition. 

Add a Show error message action on the False branch to personalize the message that will be displayed on the form if the one-time password is not correct.

To close the True branch of this flow, include a Go to the next form step action. It doesn't need any more configuration.

Flow 3: Data enrichment and triggered actions

Finally, we will create an after-submission flow with this structure:

1. Filter free email addresses

First, we will use a Verify email address action to check if it is a corporate or free email in order to trigger different actions based on that result. For this, simply reference the input email variable from the form and activate the Block free email providers checkbox.

2. Create two branches 

Then include an If/then condition action to check if it is indeed a free email:

  • Condition: reference the {{verifyEmailAddress.body.cause}} variable, choose "is equal to" as condition and write the FREE_EMAIL string in the last input.

3. Free email branch automations

For free email addresses, we will set up two automations: send a message to a specific Slack channel to notify our team and also send a welcome email to the user.

To configure the Send a Slack message native action you just need to copy and paste the webhook URL of the channel in the proper field and set up the content of the message referencing the variables that you want to include in the Fields section.

To send the welcome email we will use the Send Mailjet email action again, with the same configuration used in the first flow. Simply edit the title and the body of the message, in which you can include your own HTML templates, to welcome the new user.

4. Corporate email branch automations

For corporate emails, in addition to the Slack notification and a different welcome email, we have triggered two other actions.

The first one is the Find company by domain action, which consults the Clearbit database to find company data based on its web address. To set it up, just paste the API key of our Clearbit account and reference the input company name variable from the form.

The other automation we have included is the Add Pipedrive deal action which, as its name suggests, creates a deal in the Pipedrive account of our sales team.

To configure this action simply copy and paste the API token of your Pipedrive account and set up the deal title and its content in the Custom fields section.

You can also include other Pipedrive actions in the flow, such as Add person or Add organization to automatically create your agenda.

Preview, test and debug

After testing your form and linked flows, you can see if everything has worked correctly in the Executions tab of each of the flows. Here you can check the inputs, outputs and errors of each of the actions in each execution to fix any possible bugs.

Do you want to try it by yourself? Sign up free or book a demo with our team. Still not sure about it? Take a look at the most common use cases.


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.