Guides & tutorials
Guides & tutorials
In this article we will cover the main concepts on how to build a custom multi-factor authentication flow on top of your identity provider or custom API, so you can add an extra layer of security whatever email or SMS service you want to use for the 2nd factor or the custom logic you want to add to the process.
Build the UI of your forms with our drag-and-drop editor, and completely personalize its look and feel to make them fit consistently anywhere.
Click on 'Create a form', and select 'Login Form' template. All the templates are fully editable. Simply include a new step for the second authentication factor. Ask for email and password on the first one, and for the temporary code on the second one.
You can also edit styles and colors in the 'Design' tab, in no time. This editor allows you to change the most basic styles, but if you want to make a more advanced customization, you can use all these CSS variables to make it fit perfectly with your brand image.
Our editor allows you to add flows that will execute custom server-side logic between form steps or before submitting the form, so for this case we will add two flows just after each step as you see in the image below:
The first flow will do the following actions:
We will add an ¡HTTP Request' action using Auth0's Resource Owner Password API which allows you to check if the user provided credentials are valid or not, if they are, the API will return an access_token which we can use to authorize the user.
We will set this action using the endpoint https://YOUR_DOMAIN.auth0.com/oauth/token and body field:
You can get the variables from drill down on previous fields or from the 'Executions' tab, checking the data structure. If you need more information about this, you can take a look at how to reference variables in Arengu, and at Auth0's authentication API documentation.
This action will only check if Auth0 returned a success response. It's as simple as adding an 'If/then condition' action and referencing the Auth0 response variable. Get the response variable from the drill down.
State allows you to create private variables that will be available across your current flows executions and as Auth0 returns an access_token but we don't want to give it to the user yet, we will store it in a private state and only use it once the user provides a second authentication factor.
Just click on the dropdown to get the access_token variable from the first action and give it a simple name to reference in the second flow.
To configure the generation of the temporary codes you just need to include this action, and reference the email variable. You will find it on the drill down. This action also allows you to set up the length of the temporary code that is going to be sent.
Choose between Mailjet or SendGrid native actions to send the code by email. In both cases, you will need to have an account created in one of these services, and to copy paste its API key and Secret key.
Both actions will allow you to customize the email template and different settings, all you have to do is remember to include the generated OTP in your email template. You will find it, for example, on the 'Subject' field's drill down after an execution of the flow with 'Generate one-time password' action working properly.
Now, we will just close the first flow adding a 'Go to the next form step' action.
The last step is to set up a flow with a simple structure:
Include this action and reference user email and temporary code variables. You can find them on each field drill down after a form execution, as usual. Remember also to link this flow with the form step 2 to make them work properly together.
Add an 'If/then condition' action to manage the different responses. Reference the OTP validation output variable, and choose 'is true' from drill down. That easy.
If the temporary code is not correct, we need to show the proper error message on the form. So, let's include a 'Show error message' action, and write a custom message.
If the OTP code is valid, we will submit the form displaying a custom success and redirecting the user to the private area. Here you can include the access_token variable to authorize the user on your callback URL.
Go to the 'Embed' tab and test your own form with the Preview option, and get the code to embed it anywhere you need it. Our forms are compatible with any tech stack.
You can also easily integrate Twilio to send one-time passwords by SMS. Create an account, and include this action in the flow after the OTP generation one.
Just copy and paste 3 data (the Account ID, the Auth token and its phone number) and get 2 variables from the drill-down (user's phone number and OTP code in the message) to set up this action. That's all you need to start sending temporary codes!