Guides & tutorials
Introduction
LoginSign Up

Scenarios

SMS OTP flows with Twilio

Did you know that you can save a lot of coding time when building user verification processes? Arengu allows you to create forms, in minutes, with a drag and drop editor, and any flow of this type with a set of predefined and flexible native actions.

In this post, we'll see how to create a flow to send temporary codes by SMS, reducing development overload in your team. No technical knowledge is required to set it up and start using it, so anyone can build it.

Why to send a OTP by SMS?

One-time passwords and temporary codes are a frequently used verification method to check if users are who they say they are, that are used in different cases:

  • To improve security. In the processes know as multi-factor authentication, in which a temporary code is sent to the user to make a second identity verification, after asking for common credentials, like email and password.
  • To reduce friction. You can also use them to create passwordless logins, preventing users from the need to remember their passwords. It will check if they are registered and automatically send a code to allow them to access.
  • To verify users data. They can also be used on lead qualification flows, to verify contact details that are stored in your database, in order to check if they are correct and operative, or simply to ensure their authenticity.
  • To avoid fraud. Temporary codes can also be used in coupon campaigns, to ensure that the same person cannot use different email accounts to benefit from the same discount, associating emails with a phone number.

How to set up a SMS OTP flow?

Our editor provides fully editable templates to create the most common use cases, but it also offers the possibility to build any verification process from scratch.

These templates will automatically create the needed flows to set up server side logic, but you can easily build them by yourself dragging and dropping 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 a flow that generates an OTP and sends it by SMS.

1. Generate the temporary code

The first action we need will automatically generate a unique code referenced to a value which, in this case, is the user's phone number. You can edit the number of characters of the code that is going to be sent, with a validity of 10 minutes, by clicking on the action.

2. Send the temporary code, by SMS

To send the OTP by email, you just need to add the native Twilio action. If you still don't have an account in this external service, create one, and simply copy and paste the Account ID and Auth token to integrate the service in the flow.

In addition, include the sender phone number, and get 2 variables from dropdown: the country code and the user phone number variables. Remember to include also the temporary code variable in the message. Preferably, include the OTP variable at the beginning of the text, since many services will identify and autocomplete it in the form.

3. Go to next form step

This action allows the access to the form step 2. As you may already know, in any use case with an OTP flow, we will need a 2-step form. The first one step allows the user to ask for a temporary code and, the second one, to write it. This action does not need to be configured, and it will automatically show the next step to the user.

4. Verify the temporary code

After checking if the code input by the user in the form is correct, this actions returns an {{action_id.body.valid}} variable that can be true or  false, allowing us to schedule responses behaviors with an 'If/then conditional' action. Now we can show to the user the proper error message or simply make the redirection.

Replicate, connect and embed

Our editor is designed to save as much development time as possible, that is the reason why it is very easy to duplicate, edit, connect and embed any form and flow anywhere. This way, you can iterate and replace, in no time and without deployment, the onboarding  user verification and processes of any of your online platforms.

Table of contents