How to allow users to configure 2FA from a custom website page

In certain setups, WordPress users may not have access to the WordPress dashboard area (wp-admin). For example, this is common when running a WooCommerce/eCommerce site, a membership website, or some form of custom solution in which users access a custom user dashboard or profile page.

In such cases, WP 2FA offers two solutions for administrators who want their users to configure and manage WordPress two-factor authentication – a frontend 2FA settings page and shortcodes. You should use the frontend 2FA settings page if you want WP 2FA to create the page from where users can set their 2FA. On the other hand, you should use the shortcodes if you want to add the 2FA setup form to an existing page.

Enabling the frontend 2FA settings page

If you want the plugin to create the page from where users can set up their 2FA, and then link to it from your users’ custom dashboard. From your WordPress dashboard, navigate to WP 2FA > 2FA Policies, set the Frontend 2FA settings page setting to Yes, and specify the URL. You can then link the page from your users’ custom dashboard. The following settings are available for configuration:

• Frontend 2FA settings page – Use this option to enable or disable the 2FA frontend settings page
• Frontend 2FA settings page URL – Enter the URL slug you want to use for the custom 2FA frontend settings page. WP 2FA will automatically create this page for you
• Redirect users after 2FA setup – Enter the URL slug you would like to redirect users to once they’ve completed the 2FA setup

Setting up a WordPress frontend 2FA settings page

Once you save the settings, the plugin automatically creates the page. It also adds the URL of the page to the 2FA email notification that is sent to the users. Therefore, when the users receive the notification email to configure 2FA, if 2FA is enforced on them, they can simply click on the link, authenticate, and configure 2FA within seconds.

Customizing the page

The page the plugin creates simply adds a WP 2FA shortcode to a new page. Therefore, the page can be fully customized like any other WordPress page. You can further customize your users’ 2FA experience through additional shortcodes. Refer to the ‘Further WordPress user 2FA customizations’ section below for more information.

Using shortcodes for the custom user 2FA configuration page

If you want to add the 2FA setup form to an existing custom user profile page, you can add the below shortcode in between square brackets to the custom page:

[wp-2fa-setup-form]

By using the above shortcode, you can add our handy setup wizard to your custom user profile pages, no matter what kind of setup you are running. Here is an example of how this form looks when using the default twenty-twenty theme.

As you can see, the output includes a message letting the user know they need to set up 2FA and a neat countdown if 2FA is enforced on the users. If not, that notification won’t appear. Once the user has configured 2FA, they will see the following options instead of the CONFIGURE 2FA button:

Users will be able to use the easy-to-use wizards to change their 2FA configuration, remove 2FA (if enabled by the administrator), and generate new backup codes –  all within the comfort of their custom member area page.

Further WordPress user 2FA customizations

WP 2FA provides a number of additional shortcodes that enable you to further customize your users’ 2FA experience. In this section, we will take a look at these shortcodes alongside examples of how they can be implemented.

Customizing the text

You can hide the text of the 2FA setup form and replace it with your own. All you need to do is add the show_preamble=”false” parameter to the shortcode. This will hide the text, giving you even more control over the look and feel of the 2FA setup form.

[wp-2fa-setup-form show_preamble="false"]

Removing the “Currently configured”

By default the plugin displays the currently configured primary and secondary 2FA methods on the frontend 2FA configuration page. To remove these, use the shortcode option do_not_show_enabled and set it to true, as per the below example:

[wp-2fa-setup-form do_not_show_enabled="false"]

Styling the form

The form automatically inherits your theme’s styling. However, you can still apply your own custom styling should you wish. In this section, we will detail some key CSS selectors and some examples of how you can style common elements, like buttons and inputs.

To apply your own styling to the buttons that trigger the wizard, use the following CSS:

.wp2fa-modal .button {
padding: 13px 20px;
background-color: #337ab7;
color: #ffffff;
letter-spacing: 0.4px;
text-transform: uppercase;
}

Text inputs, on the other hand, can be customized using the following CSS. Of course, you will need to tweak this to suit your needs and requirements:

.wp2fa-modal input {
padding: 13px 20px;
border: 1px solid #cccccc;
}

Styling the user 2FA notification

Users with an applicable 2FA policy who can access the WordPress dashboard will see a notification like the one shown below. This notification informs users that they need to configure 2FA and by when.

If users do not have access to the WordPress dashboard, you can use the following 2FA notices shortcode to display the notices on any page you wish:

[wp-2fa-setup-notice]

With the above shortcode, any user who visits the page (and is required to configure 2FA) will see a notice just like the admin notice shown above. This only applies to user-facing pages.

The content is identical to the admin notice, and as with everything else, the styling is inherited from your theme. The screenshot above shows how the notification looks using the default twenty-twenty WordPress theme.

Changing the 2FA wizard link in the notification

By default, the CONFIGURE 2FA NOW button will open either:

1. The standard setup wizard we provide by default, or
2. The custom user page configured in the plugin settings page

If, however, you want to specify where the CONFIGURE 2FA NOW button should link to when outputting the notice via shortcode, we have created a parameter for this task. Simply add your desired page URL via this parameter, and you’re all set:

[wp-2fa-setup-notice configure_2fa_url="<a href="http://domain.com/custom-page">Configure 2FA</a>"]

Just like you see in the example above, replace the sample URL with your custom page’s URL (typically the page where you have placed the setup shortcode), and you’re all set.

Using the shortcode within a template file

In some cases, you may not wish to add the shortcode directly to a page’s content area. Instead, you may want to use a bespoke template file or such. If this is the case, you can use WordPress’ handy do_shortcode function to turn our shortcode into something more useful for you as follows:

do_shortcode('[wp-2fa-setup-form]');