Easily add SMS verification in your signups with Arengu

Introduction
Easily add SMS verification in your signups with Arengu

SMS verification is one of the most common features in signup and login forms and, just because of that, a very usual and repetitive task for developers.

As you may already know, Arengu has been built to help teams with this kind of issues, and to amplify the flexibility of auth systems, regardless of whether they are or not an external provider. Do you want to know more? Let's have a look at this use case!

Save time on developing user authentication

Arengu works like an extra layer to improve the signup's UX of your authentication services, offering quick integrations with common providers - like Auth0, Onelogin, Firebase Auth or Okta developers - and any auth system with API.

In this case, we are going to see how to create a form that uses Twilio to send a verification code to the user, as you can see in the picture below.

Build the form in Arengu

You can use the drag and drop editor to create a new form, but we recommend to use SMS verification template to save even more time. It's fully editable, and it will automatically create associated flows to add and set up server-side logic in minutes!

Go to Forms > Create a new form > SMS Verification Form.

SMS verification template will show you a predefined but editable form, and it allows you to add any other fields - for example, to ask for user's name - but remember to think about the friction that they are going to experience. Distribute them consciously!

Complete customize the UI

Edit copies, colors, change the position of each field on the step, include enriched text, dynamic payments... just remember to keep checked the Required option in Country, Phone number and Verification code fields, and respect this 2-step distribution.

Template includes Country, Phone Number and Verification code fields.

Predefined country phone prefixes

Country field includes some country phone prefixes. You can add or delete any of them. If you are building the form without the template, you'll have to incorporate them manually. To configure them, just go to 'Advanced' tab to associate codes and country names!

Once your form is ready, just click on 'Publish', and let's see how to set up logics!

Editable list of country telephone prefixes from the template.

Save time on adding server-side logic

To make this form work properly, we just need to create 2 different flows: one to generate and send the one-time password, and another one to verify it and login the user.

Flow 1: Sending a one-time password

To send the one-time password by SMS, we just need a flow with this structure:

If you used the template, it will be automatically generated to just fill in the blanks! If it is not the case and you are creating your own flow, go to Flows > Create a new validation flow, click on the plus sign and add the first action in the picture. Let's see how to do it!

1. Generate the one-time password

You just need to click on this action to open configurations, and indicate phone number variable, with Mustache format, and the length of the code to make it work. You can also found variables on drill down after an execution!

2. Send it by SMS with Twilio

Next step is to integrate Twilio to send the one-time password by SMS. Click on this action to open its options, and let's have a look to how to configure it in a few minutes!

Integrate Twilio with Arengu filling 3 simple fields.

You just need a Twilio account to manage the integration. Once you are signed in, go to your profile, and copy-paste data for 3 fields: Account ID, Auth token and From, which is the phone number to send the SMS.

This info is on your Twilio account console, check here exactly where it is! To get your Account ID & Auth Token, go to Settings > General, as you can see in the picture:

To get the phone number, click on Get a Trial Number to generate one to use it in Arengu.

Once this strings are included in Arengu, you just need to reference 3 variables (country code and phone) as you can see in the picture below, include also the one-type password variable on message field, and activate the checkbox 'Continue flow execution after an error' in order to handle the errors returned by Twilio in the next action.

Paste phone number on From* field in Arengu and reference variables properly.

3. Manage actions' responses

Last step on this flow, is to add an If/then condition to manage the responses of these actions and trigger the next ones. Click on this action to fix conditions.

To get the inputs to configure it, publish and run the flow. It will fail, but now you can use the "+" button to see the errors sent by Twilio, but you can also check Twilio API.

Here you should just compare if {{sendSms.body.status}} is lower than 400 and, if response is successful, continue to next form step. If response is an error, you can display the error message provided by Twilio in {{sendSms.body.message}}, or set your own one.

Flow 2: Verify the OTP on the form

To verify the SMS code on the form, we need a flow with this structure:

Overview of the verification flow generated from template.

Again, if you used the template, just fill in the blanks. If you don't, go to Flows > Create a new validation flow, click on the plus sign and add the first action in the picture.

1. Check the one-time password

Click on the action to open its configurations menu, and just reference country code and phone number variables, and the OTP code variable, from drill down.

Reference 3 variables to enable the OTP verification action.

2. Manage verification's responses

Next step on this logic is to set the 'If/then condition' action to manage the successful or failed response of the OTP verification action, and let the user sign in or not.

Reference the valid response variable from the OTP verification action.

As we saw on the previous flow, we need to publish and run the flow on this point to make it fail and to get the variables from drill down, after clicking on refresh button. If the OTP code is not valid, we need to show an error message on the form. You can define it clicking on 'Show error message' failure action, as you can see in the picture:

Click on Show error message to define the error message to show on the form.

3. Submit the form & Redirect user

If the OTP code is valid, we need to submit the form and redirect the user including that action. To configure it, just paste destination URL and customize the message that user will see during redirection. That easy!

Paste destination URL, and write a custom message to show on the form.

Embed your form anywhere!

Last step is to publish all these changes, and test our form before embedding it. Go to 'Embed' tab on form's edition, and choose the best option for your needs. Thanks to our SDK, our forms are fully compatible with most common technologies and frameworks.

Do you want to try it yourself? Sign up for free, schedule a demo or, if you prefer to learn more about the editor, we recommend you how to implement email verification forms. Hope to see you!

Author

Andrea L. Lozano

Social Media & Content Specialist.

View Comments
Next Post

Automate your sales pipelines with a powerful smart form

Previous Post

Review on SaaS signup flows: We analyze their onboarding forms