How to customize the 2FA user experience

Customizing users’ 2FA experience is easy thanks to WP 2FA’s white labeling and customization options. You can change the looks and feel, and text of the 2FA code page, wizards, and email templates for a more cohesive user experience.

Email settings and templates

WP 2FA can send your website 2FA users emails, depending on the user’s setup as well as actions the user may or may not take. For example, it sends emails on the following occasions:

• When a user requests a login link (OOB)
• When a user requests a one-time login code via email
• When a user account is locked due to an expired grace period
• When a user account has been unlocked

All of the emails the plugin can send are stored as templates, and they can all be edited by the site administrator.

To start configuring email options and editing email templates:

• Click on WP 2FA in the WordPress menu
• Click on Settings
• Click on the Email Settings & Templates tab

Change the ‘from’ email address

By default, the “from e-mail address” used by the plugin is wp2fa@website-URL. So for example on melapress.com, the default email address used is wp2fa@melapress.com. You can easily change the email address and the display name from which all 2FA emails are sent from here.

Use the email address from the WordPress general settings – Enable this option to keep sending emails from the email address configured in WordPress general settings.

Use another email address – Enable this option to enter a different email address and display. Enter the new values in the corresponding fields.

Important: The the plugin uses the wp_mail function to send emails. The correct email configuration must be present for this to work. Kindly speak to your administrator to verify correct setup.

To save changes, click the Save email settings and templates button located at the bottom of the page.

To confirm that the plugin can send emails from the configured address, click on the Test email delivery button located under the Email delivery test section.

Email Templates (changing the text)

Under the email templates section, you will find all the emails that the plugin can send. Each email template follows the same structure and includes a subject line and body. Both of these can be edited freely. You may also include any of the available template tags, which allow for dynamic information to be included in the email for an even more personalized experience. 

Template tags

Template tags are information placeholders that allow you to add content dynamically. For example, the {user_first_name} template tag will insert the recipient’s first name dynamically so you do not have to type it in each time. In all, there are nine template tags available across all four emails as follows:

• {site_url} – Use this template tag to include the website URL as configured in WordPress settings
• {site_name} – Use this template tag to include the website name as configured in WordPress settings
• {grace_period} – This displays the configured 2FA grace period value, for example, 3 days.
• {user_login_name} – Use this template tag to include the user’s login name as configured in WordPress
• {user_first_name} – Use this template tag to include the user’s first name as configured in the user’s profile page
• {user_last_name} – Use this template tag to include the user’s last name as configured in the user’s profile page
• {user_display_name} – Use this template tag to include the user’s display name as configured in the user’s profile page
• {login_code} – Use this template tag to include the 2FA login code or login URL. Can only (and needs to) be included in the Login OOB code and Login code emails.
• {user_ip_address} – Use this template tag to include the IP address from which a 2FA request code originated. Can only be included in the Login OOB code and Login code emails.
• {backup_codes} – Use this template tag to include the list of backup codes in an email.

Available email templates

You can send a test email of each template by clicking the Send test email button underneath the text editor.

• Login link email (OOB method) – This email is sent when a user using the Link via email (Out-of-band email) 2FA authentication method is trying to authenticate. Must include the {login_code} template tag as otherwise, the user will not receive the link and thus will not be able to log in.
• Login code email – This email is sent when a user using the One-time code via email (HOTP) 2FA authentication method is trying to authenticate. Must include the {login_code} template tag as otherwise, the user will not receive the code and thus will not be able to log in.
• User account locked email – This is an optional email sent to a user whose account has been locked. Check the Uncheck to disable this message option to enable this email to be sent and uncheck it to disable the email from being sent.
• User account unlocked email – This is an optional email sent to a user whose account has been unlocked. Check the Uncheck to disable this message option to enable this email to be sent and uncheck it to disable the email from being sent.
• User reset password code email – This email is sent to a user when requesting a password reset and email 2FA is required during a password reset.
• User backup codes email – This email is sent to a user when they request a new list of backup codes. It must include the { backup_codes} tag as otherwise, the codes won’t be included in the email.

White labeling

The white labeling feature offers extensive white labeling options that can help you customize the look and feel of all user/customer-facing screens, such as the 2FA setup wizards and the 2FA login page. These options give you the opportunity to include your branding colors, fonts, tone, and logo in these screens or create an entirely new experience for your users.

To start configuring white labeling options:

• Click on WP 2FA in the WordPress menu
• Click on Settings
• Click on the White labeling tab

Here you’ll find two sub-tabs, as highlighted in blue in the above screenshot.

The first tab, titled 2FA Code page design, allows you to customize the 2FA code page. The second tab titled User 2FA setup wizard is a drop-down menu, from where you can select which slide from the 2FA wizard you’d like to edit, which users go through to set up their 2FA.

2FA code page design

In this section, we will be covering the various white labeling options available for the 2FA code page, which is shown in the screenshot below. Basically, you can change every aspect of the 2FA login page so that it fits your branding guidelines.

Change the background color

Change the background color of the 2FA code page by selecting the color that you would like to show. You can choose a color from the palette or enter the HEX code in the available field.

Change the logo

Change the logo that appears on the 2FA page by uploading the logo that you would like to use instead of the existing one.

Change the text

Change the text that appears on the 2FA code input page by replacing the text available in the text field. Do note that only plain text is allowed here.

Change the font type

Change the font type used in the 2FA code page text by selecting an alternative font from the drop-down menu.

Change the button color

Change the color of the Log in button by selecting the color that you would like to use. You can choose a color from the palette or enter the HEX code in the available field.

Change the button text

Change the text of the Log in button by replacing the text available in the text field. Do note that only plain text is allowed here.

The 2FA wizard text templates

The User 2FA setup wizard tab is a drop-down menu from where you can select which slide from the wizard you’d like to edit, or edit the wizard’s CSS. To see the available options, click on the arrow pointing downwards at the right edge of the tab.

The 2FA setup wizard text

The first five options available in the drop-down menu represent each step of the wizard that your website users have to follow to configure 2FA for their users. These are:

• Welcome & Initial message: This slide is disabled by default. You can enable this slide and add any text you’d like. For example, you can use this as a welcome screen where you can display any information related to your business/website such as legal disclaimers, support options, etc.
• 2FA Method Selection: In this step of the wizard users select which method they would like to use for 2FA.
• 2FA Method Verification: In this step of the wizard users verify that the selected 2FA method works.
• Backup Codes & Final Steps: In this step of the wizard users configure the secondary 2FA method, which can be backup codes or one-time code over email.

The reconfigure 2FA wizard option

The next entry in the drop-down menu is the 2FA Method Reconfiguration. This wizard is launched from the user profile page when a user who is already using 2FA would like to reconfigure their 2FA method or change it.

Configuring the looks and feel of the 2FA wizards

The last entry in the drop-down menu is Custom CSS. In this section, you can enter custom CSS to be used in the wizard, and edit some other settings to change the look & feel of the 2FA wizards. The following is an explanation of all the settings.

Enable styling option: By default, the 2FA wizard uses the CSS of your website’s theme. If you are not happy with that you can also enable this option to use the plugin’s default styling, which is a simple black and white theme without any logos, as seen in the below screenshot.

Display logo: Use this setting to add the logo on all the 2FA wizard slides. You can upload the logo from the 2FA code page design tab, using the option Logo on page.

Custom CSS: In this section, you can add your own styling to the 2FA wizards via CSS.

More WP 2FA configuration options

WP 2FA offers multitudes of features designed to help you improve security and usability at the same time. Make sure you don’t miss on valuable features and ensure your WordPress 2FA implementation is a resounding success.