Guides & tutorials

Multi-factor authentication with WordPress

Import this tutorial scenario in your workspace
Table of contents

Reinforcing the security of your WordPress back office is easier and faster than you might imagine. This plugin will allow you, in addition to create and embed any kind of form, to improve the security of your admin panel without harming your own user experience.

To build this authentication flow, we simply need to create a form with 2 steps. In the first one, we will ask for the common credentials, the email and password we use to access, and for a temporary code sent by SMS or email, in the second step.

Templates and native actions are available to easily set up and integrate everything. You will only need to copy an API key and a secret key to configure it.

Install the plugin with a single click

Arengu's plugin will allow you to set up this 2 factor authentication method in minutes. Simply install it in your WordPress account 'Plugins' section. Click on 'Add New', and write 'arengu' on the search bar. Then, click on 'Install Now', and it's done!

Create a form with 2 steps

We recommend to use the available templates, because they are fully editable and customizable, and they create the required server-side logic automatically.

You can build it from scratch too, creating two flows to set it up, but with arengu's templates - 'Email Verification Form' or 'SMS Verification Form' templates -, you will only need to copy and paste some data, instead of building everything by yourself.

To correctly build this form, simply remember to ask for the email and the password in step 1, and for the code in step 2. Check also that all the fields are required in each 'Field settings' section. Then, click on the 'Publish' button to get the form to work.

Set up the 2 automatically created flows

If you have used one of the templates, in the 'Flows' tab, you will see that two step validation flows have been created automatically. Click on the 'Preview flow in a new tab' button to complete their configuration. If you have not used a template, you will have to create them manually, clicking on the + button.

Flow 1: Check credentials & Send a OTP

The first flow we need will have the structure you can see in the picture below. It may seem long or complex but, if you have used the template, you will only need to add two actions, and copy and paste a couple of data! Let's see how to complete it.

1. Verify the email & the password

The first step is to click on the + button to add the WordPress native action: 'Login with password', just on the top of the flow. This is our first authentication factor, and it will check if the email is registered, and if the password is also correct.

To configure this WordPress native action, you just need:

  • The login endpoint URL from the plugin. Get it from the 'Arengu Settings' section in your WordPress account, and paste it in the 'Base URL' field.
  • The API Key, also from the 'Arengu Settings' section in your WordPress account. You will find it under the endpoint URLs. Remember to keep it secret.
  • Email + Password variables. Get both of them from dropdown. If you need more info, you can check here how to reference variables in arengu.
  • Redirect URL (optional). If we leave this field blank, by default, users will be redirected to their account page after form submission. If we want to change the destination page, simply paste here its URL.

2. Manage verification responses

Depending on the response that WordPress returns, we should continue the verification process or, instead of this, to inform the user if the email is not registered or the password is not correct. For this, we simply need to include an 'If/then condition' action that checks that response. As usual, you can get this variable from the drop-down menu.

3. Show the proper error message

If the email is not registered or the password is not correct, we need to use a 'Show error message' action to show the proper message on the form, as you can see in the picture. Simply, get the error message variable from the drill-down too.

4. Store state variable, if credentials are valid

Next, include a 'Store state variable' action in the 'True' result branch and, after executing the form and this flow once, click on the dropdown to get the login URL variable from the first action in the flow. Give it a simple name to reference it later.

This variable contains the user's authentication token, although we won't use it until the second authentication factor - the one-time password - is verified.

5. Generate and send a one-time password

If you have used the template, just complete is the sending email action. The rest will be automatically configured. Simply copy and paste the API Key from your SendGrid account, indicate sender email and get the recipient email variable from the drop-down.

Check also if the OTP code variable is included in the message, otherwise it will not reach the user. The following actions of the flow - 'If/then condition', 'Show error message' and 'Go to the next step' - are already configured in the template.

You can also change the length of the one-time password in the corresponding action, simply indicating the number of characters you want it to have. Once everything is properly configured, publish and test this flow.

Flow 2: Verify the OTP & Log in

The last step in the process is to verify the second authentication factor: the one-time password. Again, if you have used a template, you will have a flow with the structure that you can see in the image, and you just need to complete a single detail.

1. Reference the stored state variable

Click on the 'Submit the form' action, and activate the checkbox 'Redirect to URL'. A new field will appear, and you will be able to get the state variable that we have stored in the previous flow from the drop-down menu. It will contain the user's authentication token from the first authentication factor. That's all you need to set up in this flow!

Remember that the rest of the actions of this flow will be automatically configured by the template but, just in case and if you change or add something, remember to test it and take a look at the 'Execution' tabs on each flow.

Embed it anywhere

Get the proper piece of code from the 'Embed' tab to embed the form wherever you need it. You can build a specific landing page, replace the form on the WordPress admin page, or even create a specific subdomain. Choose the best option for yourself.

Remember to disable or replace your current login form to avoid bypassing the 2FA, and to check that everything is working properly, before embedding it anywhere.

You might like to read

See more tutorials

Getting started with Arengu

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.