The complete guide to email OTP flows

In this post, we'll see how to create a flow to manage one-time password verification, that generates, emails and verifies temporary codes, like the one in the picture.

Our editor has been designed to create any flow of this type in minutes, using a set of predefined and flexible native actions to reduce development overload.

When to use email OTP flows?

As you probably already know, these user authentication flows are frequently used in different use cases. These are the most common use cases where they are used:

• Multi-factor authentication. In addition to asking the user for the most common credentials — email and password — some processes send a temporary code, making a second verification, to improve security.
• Passwordless forms. A way of access designed to reduce friction, preventing the user from having to remember the password. It checks that the user is already registered and automatically sends a code to log in.
• Lead qualification. These flows can also be used to verify users data outside login processes, for example, to verify the contact details you are storing from users in your database, in order to check that it is true and valid.
• Coupon campaigns. Temporary codes can also be used to prevent fraud when launching this type of campaigns, to ensure that the same person cannot use different accounts to benefit from the same discount.

What do we need? How to set them up?

In our editor you will find fully editable templates to create forms with this type of flow and many other use cases, but also the possibility of building everything from scratch.

You will be able to set up server-side logic in minutes, simply by ordering predefined native actions to create the flow structure, and then getting variables from drop downs. These are the actions that you will need to create an email OTP flow for any use case.

1. Generate a temporary code

This action automatically generates a unique code referenced to a value which, in this case, is the user's email. It allows you to easily edit the number of characters of the code that is going to be sent and that will have a validity of 10 minutes.

2. Send the temporary code, by email

To send the OTP by email, you just need to add a native Mailjet or SendGrid action. If you still don't have an account in these external services, create one, and simply copy and paste the API key and Secret key to integrate the service in the flow.

In addition, include the sender email, and get 2 variables from dropdown: the recipient email, and the temporary code variables. You can add styles or use a template, by importing it or directly including a piece of HTML code in the 'Message' field.

3. Go to next form step

In any use case with a OTP flow, we will need a 2-step form. The first form step allows the user to request a temporary code and, the second one, to write it. Between the 2 steps, the flow that generates and sends the OTP or temporary code is executed, and this action allows the access to the form step 2.

This action does not need to be configured, you simply have to place it after the sending email action, and it will automatically show the next step to the user.

4. Verify the temporary code

This action checks if the code input by the user in the form is correct, returning an {{action_id.body.valid}} that can be true or false, that is used in the 'If/then conditional' action to schedule different branches: to display an error message to let the user know that the code is invalid or, if it is valid, to make the proper redirection.

Customize the design of your emails

Our editor allows you to include HTML code to create your own templates to customize the emails you send with the temporary codes. There are many services like mjml.io to preview them. In case you want to give it a chance, here you have an example:

<mjml>
  <mj-body background-color="#fafbfc">
    <mj-section padding-bottom="20px" padding-top="20px">
      <mj-column vertical-align="middle" width="100%">
        <mj-image
          align="center"
          padding="25px"
          src="https://www.arengu.com/assets/img/logo-arengu.png"
          target="_blank"
          width="150px"
        ></mj-image>
      </mj-column>
    </mj-section>
    <mj-section background-color="#fff" padding-bottom="20px" padding-top="20px">
      <mj-column vertical-align="middle" width="100%">
        <mj-text
             align="center"
             font-size="16px"
             font-family="open Sans Helvetica, Arial, sans-serif"
             padding-left="25px"
             padding-right="25px"
         >
            <span>Hello,</span>
         </mj-text>
        <mj-text
             align="center"
             font-size="16px"
             font-family="open Sans Helvetica, Arial, sans-serif"
             padding-left="25px"
             padding-right="25px"
         >Please use the verification code below on the Arengu website:</mj-text>
        <mj-text
             align="center"
             font-size="24px"
             background-color="#20c997"
             font-weight="bold"
             font-family="open Sans Helvetica, Arial, sans-serif"
         >{{VERIFICATION_CODE}}</mj-text>
        <mj-text
             align="center"
             font-size="16px"
             font-family="open Sans Helvetica, Arial, sans-serif"
             padding-left="25px"
             padding-right="16px"
         >If you didn't request this, you can ignore this email or let us know.</mj-text>
        <mj-text
             align="center"
             font-size="16px"
             font-family="open Sans Helvetica, Arial, sans-serif"
             padding-left="25px"
             padding-right="25px"
         >Thanks! <br />Arengu team</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Creating custom and sophisticated paths, to onboard and authenticate users, is both a laborious and increasingly frequent task, especially if you work with a marketing and sales team that needs to qualify users and data, to achieve product and company goals.