Create and set up a registration form with phone verification for your API. A really common use case, especially on SaaS platforms, which you can easily build with Arengu.
This use case consists of a signup form with 3 steps and a flow connected to each one:
You can create it from scratch or use the Phone verification template. If you choose the template, two of the steps and the corresponding flows will be automatically created, and you will only need to make minor changes on them and build the first step and its flow.
First, add an Email field and a Password field in the first step with the following settings:
In form step 2, include a Phone field with these settings:
The phone field includes a built-in country selector, that you can activate or deactivate from the field settings. It allows the user to search for a country by text and international code, and it performs some validations.
On form step three, include a Text field to ask the user for the temporary code that will be sent by SMS. Configure it as follows:
Finally, go to the Flows tab — on the light gray menu on the left — and create a flow linked to each step of the form, as you can see in the picture.
Create new flows by clicking on the plus icon. If you have used the Phone verification template, you will only have to create the signup flow and make a few changes in the other two flows. Finally, publish the changes and open the first flow on a new tab.
The flow connected to the first step of the form will check if the email is already registered on our API, and it will have this structure:
First, include a HTTP Request action with these settings:
If needed, add the Authorization header and the secret API key of your API in the Headers section. Remember that these settings may vary depending on how your API is configured.
Then, add an If/then condition action to create two branches and trigger different actions based on whether the mail is already registered or not.
To configure this action we will set two different conditions:
In the False branch, include a Show error message action and personalize the text to invite the user to log in instead.
In the True branch, include a Go to the next form step action, which does not need configuration, and publish the changes.
The flow connected to the second step of the form will generate an OTP and send it to the user by SMS, and it will have this structure:
First, include a Generate one-time password action and configure it as follows:
Then add a Send SMS with Twilio action, to send the one-time password by SMS. For testing purposes, you can use the Arengu sending sms action.
To configure the Send SMS with Twilio action:
Include an If/then condition action to manage Twilio's responses, with these settings:
In the False branch, include a Show error message action with these settings:
In the True branch, include a Go to the next form step action, which does not need configuration, and publish the changes.
The flow connected to the third step of the form will verify the code input by the user in the form, register the user and submit the form. This flow will have this structure:
First, include a Verify one-time password action with these settings:
Then add an If/then condition action and configure it as follows:
In the False branch, include a Show error message action and personalize the message that will be shown to the user in case the temporary code is not correct.
In the True branch, include a HTTP Request action to register the user:
If needed, add the Authorization header and the secret API key of your API in the Headers section. Remember that these settings may vary depending on how your API is configured.
Then add an If/then condition action to create two branches and trigger different actions based on if the signup is successful or not.
To configure this action:
In the False branch, include a Show error message action with these settings:
In the True branch, include a Submit the form action and customize the message to display after submitting the form. You can also include here the destination URL to which the user will be redirected. Then, publish the changes.
Go back to the Form editor and click on the Preview button to test the form. Check if everything is working properly, action by action, on the Executions tab of each flow.
Haven't you tried Arengu yet? Sign up free or schedule a demo with our team!
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.