Reinforce your WordPress login security with Arengu and this 2-step form without coding! In this post, we assume that you have the plugin already installed and a custom signup form built. So, let's see how to do it!
Build your form in Arengu's editor
Go to 'Forms' > 'Create a form' > Choose 'Blank Form' to completely customize it. You can edit templates but, this time, let's start from scratch!
Create a 2-step form to build this passwordless process. Step 1 can ask for an email, for example, and step 2 must include a number field to paste the OTP. Remember to check 'Required' field option in both cases! Edit texts, labels, placeholders, colors...
Create a flow for each form step
To run our login passwordless form, we will need 2 flows. The first one is needed to check if email is already registered, and generate and send the one-time password. The second one will verify if the code in the form is correct to complete the login process.
Flow 1: Check the email and send the OTP
To execute these actions, we need to create a flow with this structure:
1. Check if the email is already registered
At first, include an 'HTTP request' to check if the email is already registered. To configure this action, use the login passwordless endpoint URL from Arengu's plugin documentation and properly reference the input email variable on the body field. Do you need help with this? Learn here how to get and reference variables in Arengu!
Remember to include 'Authorization' header too, copy-pasting your WordPress account Private API Key, and also check 'Accept any status code as successful request' option. Then, save and publish it to link this flow with your form.
2. Connect it with your form's step 1
Before continue building the flow, go back to 'Forms' > 'Form edition' > 'Flows', and select this flow from the drill down on 'Step validation flows' > 'Step 1'. Remember to publish!
Do you want to learn more about step validation flows? Check this post about how to connect flows and forms.
3. Manage 'HTTP request' responses
After checking if the email is already registered, include an 'If/then condition' action and reference the WordPress response variable, as you can see in the picture:
4. Show an error message on the form
If the email is not registered, we need to use a 'Show error message' action to show the proper message on the form, as you can see in the picture.
5. Generate a one-time password
Next action to include in this flow is 'Generate one-time password'. This one is really easy to configure: just reference the input email variable, the code length... and save!
6. Send your OTP by email
To configure this action you need to have a Mailjet account, and copy-paste the API Key and Secret Key. You should also indicate sender email and name, and look for the recipient email variable clicking on drill down.
Write your email's subject and reference the OTP variable on the message, for example, as you can see in the picture. You can find it, after publishing and executing the flow, in the drill down inside the OTP generation action.
7. Close the flow and redirect to form's step 2
Finally, include a 'Go to the next form step' action to redirect the flow to your form's second step. Test your own form to check if it works properly!
Flow 2: Verify the OTP and redirect user
Next step is to verify if the code pasted on the form is correct, and then complete the login process. To manage this, we need another flow with this structure:
1. Check if the OTP is correct
Include a 'Verify one-time password' action, and reference email and OTP code variables. You can find them, after a flow execution, in the drill down, inside the 'Input data' section.
2. Connect the flow with your form
Go back to 'Forms' > 'Form edition' > 'Flows', and select this flow from the drill down on 'Before submission flow'. Remember to publish!
3. Manage OTP verification responses
Back on the flow and after checking if the code is correct, include an 'If/then condition' action and reference its variable, as you can see in the picture:
4. Show a error message on the form
If the OTP code is not correct, send to a 'Show error message' action, and custom the text to show on the form:
5. Login the user if code is correct
On 'True' flow branch, include a 'HTTP Request' action to send validated user data to WordPress! You just need to paste here the passwordless endpoint URL from your WordPress account > 'Arengu Settings', and include email variable on body field, as you can see in the picture. Remember to check data structure!
6. Set session cookies
Add this action and set its configuration! You can find these variables on drill down, inside 'HTTP Request' action. Remember to check 'Enable secure cookie'!
7. Submit the form and include destination URL!
To close the process, just add this action and paste here the URL to finally redirect the user, save and publish... and your form is ready to embed!
How to embed your forms in WordPress
Arengu's forms can be embedded in any post or page just copy-pasting a line of code. You can find it in your form's edition, on 'Share' tab!
Then go back to WordPress and open the post or page where do you want to embed it. Paste the code on the text editor, and update or publish!