How to create a passwordless login form in WordPress

Introduction
How to create a passwordless login form in WordPress

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 2-steps form and ask for email in step 1 and OTP code in 'Step 2'.

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:

Create a flow to check if email is registered, and generate and send the OTP by email.

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!

Make a POST request to check that email is already registered.

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.

Reference email variable, include the Private API Key and check 'Accept any status'.

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!

Select this flow on 'Step validation flows' > 'Step 1' and 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:

Include 'checkEmail' variable in 'Condition' field. Remember to check data structure!

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.

Write the error message to show on the form if email is not registered.

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!

Just reference the input email variable with proper data structure!

6. Send your OTP by email

You can easily integrate external providers, like Mailjet and SendGrid, to send emails. In this case, we are going to use Mailjet, for example.

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.

Paste API & Secret key, set sender email and select recipient email variable.

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.

Remember to include the one-time password code variable on the message!

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!

Close the flow and redirect it to form's step 2!

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:

Create another flow to check the code and finally redirect the user.

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.

Just reference properly email and OTP code variables to configure this action.

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!

Link this flow with the form on 'Before submission flow' stage.

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:

Get the OTP code variable form the drill down > Verify OTP action.

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:

Write the error message to show on the form if code is not correct!

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!

Paste passworldless endpoint URL and reference email variable on body field.
Include Private API Key with 'Authorization' header and check 'Accept any status'.

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!

Remember to include a message to show when redirection is loading!

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!

Go to Forms > Form edition > Share tab, to get the shortcode.

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!

Just paste the code on WordPress text editor! That easy!

Do you want to try it yourself? Install our WordPress plugin, sign up for free or discover more about why to reinforce your form's user verification. See you soon!

Author

Andrea L. Lozano

Social Media & Content Specialist @ Arengu.

View Comments
Next Post

How to create dynamic payments in forms

Previous Post

How to create and embed custom login forms in WordPress