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.
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:
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.
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.
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.
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.
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.
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:
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.
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.