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!

Create a 2-step form in Arengu

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!

Build a 2-step form like this to build a passwordless process. Step 1 should ask for an email, for example, and step 2 must include a number field to paste the OTP. Remember to check the 'Required' field option in both cases! Edit texts, labels, placeholders, colors...

Build 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

First, include a 'Check email' WordPress native action to check if the email is already registered. To configure this action, you just need to follow the 3 steps below.

  • Passwordless login endpoint URL from the plugin. Go to your WP account, copy this URL from the 'Arengu Settings' section, and paste it in the 'Base URL' field.
  • API Key, also from your WordPress account. You will find it in the 'Arengu Settings' section. Remember that it is important to keep it secret.
  • Email variable. You can get it from the dropdown. If you need more information, you can check here how to reference variables in Arengu.

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 WordPress 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

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.

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. Send user to the next form step

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 is working 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 the 'True' flow branch, include a 'Passwordless login' WordPress native action to send validated user data to WordPress!

To set up this action, you just need:

  • Passwordless Login endpoint URL. Go to your WordPress account, copy this URL from the 'Arengu Settings' section, and paste it in the 'Base URL' field.
  • API Key, also from your WordPress account. You will find it in the 'Arengu Settings' section. Remember that it is important to keep it secret.
  • Email variable. You can get it from dropdown. If you need more information, you can check here how to reference variables in Arengu.
  • Redirect URL (optional). If we leave this field blank, by default, user will be redirected to their account page after form submission. If we want to change destination page, simply paste here the URL.

7. Submit the form

Simply add a 'Submit the form' action to write a custom success message, and reference the 'login_url' variable from the sign up native action. You can get it form the dropdown. Publish the flow... and now your form is ready to embed.

Embed your form 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!

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.

View Comments
Next Post

How to create dynamic payments in forms

Previous Post

How to create and embed custom login forms in WordPress