Wordfence 2FA Conflicts with [members_login_form] Shortcode in Members Plugin

[omaraelhawary]

Description

After enabling Two-Factor Authentication (2FA) via Wordfence, the [members_login_form] shortcode provided by the Members plugin no longer functions correctly. Users attempting to log in via this form receive an error stating “Invalid username or password” despite entering the correct credentials. This issue does not occur on the default WordPress login page (/wp-login.php), where Wordfence 2FA functions as expected.

Steps to Reproduce

1. Install and activate the Members plugin.
2. Create a login page using the [members_login_form] shortcode.
3. Enable Wordfence and configure 2FA for user accounts.
4. Attempt to log in using the custom login page.
5. Observe the error message: “Invalid username or password.”

Expected Behavior

Users should be prompted for 2FA verification or successfully logged in after submitting correct credentials via the Members login form.

Actual Behavior

Users are incorrectly denied access with an invalid credentials message.

Hosting Environment

No response

Payment Gateway (if applicable)

None

Transaction ID (if applicable)

No response

API, Server, or Error Logs (if applicable)

Screenshots or Videos

Support Ticket Link

https://wordpress.org/support/topic/wordfence-2fa-issue/

Additional Information

No response

Site Health Check Report

[ThemeGravity]

@cartpauj I investigated this issue and when you enable 2FA in Wordfence and activate it in your users profile, it forces you to provide secure code for each login including Members login page. The code returned for each login is "Please provide your 2FA code when prompted.". We don't support Wordfence 2FA so it returns this error for all users who activate 2FA.

I checked Wordfence code and I couldn't find any hook that we can use to override and disable 2FA on members login page. Without hook the only option to resolve it is to either log in via wp-login.php page or disable 2FA in Wordfence.

BTW: I also tested this on MemberPress login page and I couldn't sign up too. I received the same error. Here's the screenshot:

[omaraelhawary]

I need to mention that I did some research and I can find the below:
https://wordpress.org/support/topic/2fa-issue-have-custom-log-in-forms-the-2fa-redirect-to-wp-log-in-form/

Please note that our 2FA and reCAPTCHA features only work with the default WordPress/WooCommerce login and registration pages currently.

[ThemeGravity]

@omaraelhawary The problem is that it affects login process so it doesn't matter if it is wp-login.php page or custom login page. It requires 2FA for all login forms. Instead of saying:

They may not work on custom login forms.

they should provide some hook to make it possible to disable it on custom login form.

[omaraelhawary]

I tried to check the old threads, but it looks like they don't like to support custom coding as below:

However, we’re unable to provide any support for custom code because our own future plugin updates may cause some to break and we don’t have the resources to follow-up on independent development cases.

[omaraelhawary]

@ThemeGravity I checked and I can see that code may help:

add_filter('login_form_bottom', function($content) {
    if ( !is_admin() && !defined('DOING_AJAX') ) {
        ob_start();
        ?>
        <div id="members-2fa-wrapper" style="margin-top: 16px;">
            <label for="members-2fa-code">2FA Code</label>
            <input type="text" name="members_2fa_code" id="members-2fa-code" class="input" autocomplete="one-time-code" />
        </div>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var form = document.getElementById('loginform');
            var twoFA = document.getElementById('members-2fa-wrapper');
            var pass = form ? form.querySelector('input[type="password"]') : null;
            if(form && twoFA && pass) {
                // Move the 2FA field right after the password field
                pass.parentNode.insertBefore(twoFA, pass.nextSibling);
                // Combine password and 2FA code on submit
                form.addEventListener('submit', function(e) {
                    var code = form.querySelector('input[name="members_2fa_code"]');
                    if(pass && code && code.value) {
                        pass.value = pass.value + code.value;
                    }
                });
            }
        });
        </script>
        <?php
        $content .= ob_get_clean();
    }
    return $content;
});

[ThemeGravity]

@omaraelhawary Good work. That would add 2FA field to our members login form.

One issue I can see is that the field is visible for all users, but keep in mind that if 2FA is optional for users they might not activate it in their profile so they won't be able to add any code and log in.

Another thing is that the error is still "Invalid username and password" even though the problem might be with empty/wrong 2FA code. I didn't see any data in the POST that could allow us to determine if the issue is with wrong 2FA code.
One way to resolve it would be to change the error text.

Anyway, I think that this code snippet is a good workaround.

@cartpauj What are your thoughts?

[omaraelhawary]

@ThemeGravity For the first point, the user will be able to log in and maybe we can add a note that it is not a required field as below

[ThemeGravity]

@omaraelhawary I think that you can safely share the code snippet with customer if we leave it as a workaround.

[cartpauj]

Leaving issue open while we explore official integration with WF and 2FA