Make the Two Factor settings portable to other settings screens

[kasparsd]

Currently the two-factor setup for each user is tied to the standard user profile page. This makes it impossible to configure the two-factor authentication for sites that don't allow users to access the standard profile page.

[georgestephanis]

My main concern here would be portability of styles -- it may not render correctly.

What other plugins create user screens on the front-end, and do they have any consistent hook usage that can be used to add extra fields? Or would it be better if we provided a function that they could use to render our stuff?

Or sort out a common action?

[gytisrepecka]

Ideal situation would be to have a shortcode which would display two-factor settings.

I recently attempted to include two-factor settings into WooCommerce's my-account/edit-account page. I could enable/disable two-factor methods, but AJAX didn't work (recovery codes, showing QR code for TOTP, etc.) - I probably missed some JavaScripts that are available in wp-admin.

Here are modifications I've done:

Edited class-two-factor-core.php: following WordPress hooks (edit_user_profile and edit_user_profile_update) I have used corresponding functions in WooCommerce hooks:

add_action( 'woocommerce_edit_account_form', array( __CLASS__, 'user_two_factor_options' ) );
add_action( 'woocommerce_update_customer', array( __CLASS__, 'user_two_factor_options_update' ) );

Then, to make sure after showing two-factor settings page doesn't die rendering, also added following to providers/class.two-factor-fido-u2f-admin.php:

In function add_hooks changed:

add_action( 'show_user_security_settings', array( __CLASS__, 'show_user_profile' ) );

To:

add_action( 'show_user_security_settings', array( __CLASS__, 'show_user_profile', 'woocommerce_edit_account_form' ) );

Though in frontend settings does not display e-mail address, nor QR code, so I believe there is something still missing...

I am also unsure if enqueue_assets function should be hooked into frontend - when I tried nothing changed anyway (didn't get AJAX working):

add_action( 'wp_enqueue_scripts',       array( __CLASS__, 'enqueue_assets' ) );

Anyone care to join into solving this?

[luisjavierbautista]

Hi there,

There is any update about this? I'm trying to include two-factor settings into UltimateMember profile pages, but does not display e-mail address, nor QR code

[gytisrepecka]

Currently the two-factor setup for each user is tied to the standard user profile page. This makes it impossible to configure the two-factor authentication for sites that don't allow users to access the standard profile page.

WooCommerce redirect customers to frontend my-account page if one tries to visit wp-admin/profile.php or any other page under wp-admin.

So if we want to use two-factor with WooCommerce, we need frontent shortcodes.

[r-a-y]

When I integrated the two-factor plugin onto the frontend for BuddyPress, these are the following issues I encountered:

1. Save routines do not return useful information

See #244.

2FA core uses the user_two_factor_options_update() method to save the enabled and primary providers:

https://github.com/WordPress/two-factor/blob/736473edf5ff6d2fed18ba2406c772f30950343c/class-two-factor-core.php#L1028

Unfortunately, this method doesn't return what type of info is being saved. So to determine if a new 2FA method or primary provider was saved, you currently have to duplicate this logic.

Likewise, the TOTP 2FA routine saves error notices into user meta:

https://github.com/WordPress/two-factor/blob/736473edf5ff6d2fed18ba2406c772f30950343c/providers/class-two-factor-totp.php#L165

So you have to manually retrieve the notices to display them yourself.

2. Reliance on admin functions

convert_to_screen() and get_column_headers() are the bare minimum functions needed to be used on the frontend. These are admin-only functions., so to use on the frontend, these functions need to be either included or plugged. I chose to redeclare the functions to plug them.

3, User settings URL needs to be filtered

The Two_Factor_Core::get_user_settings_page_url() method returns the admin user-edit.php URL: https://github.com/WordPress/two-factor/blob/736473edf5ff6d2fed18ba2406c772f30950343c/class-two-factor-core.php#L202-L215

This won't work for the frontend, especially with TOTP saving. Workaround is to use the 'self_admin_url' filter to bypass this.

4. U2F fido-u2f-admin JS looks for the "Users > Your Profile" submit button

See:

https://github.com/WordPress/two-factor/blob/736473edf5ff6d2fed18ba2406c772f30950343c/providers/js/fido-u2f-admin.js#L44-L45

To workaround this, I had to register my own fido-u2f-admin script just to replace this submit form call.

5. 2FA <table> uses a nested table

The user_two_factor_options() method uses a nested table for display:

https://github.com/WordPress/two-factor/blob/736473edf5ff6d2fed18ba2406c772f30950343c/class-two-factor-core.php#L965-L971

This is problematic for use on the frontend since themes can style tables in a myriad of ways.

You can workaround this with CSS, but it's annoying to have to resort to CSS hacks to remove the first table from being displayed.

---

Other than that, calling on the options table, enqueued JS hooks and validation methods should work. You just have to write some code to workaround these issues. I'll post my code for my BuddyPress 2FA plugin later once I've cleaned things up. Update - BP Two Factor is available here: https://github.com/r-a-y/bp-two-factor

Also see #261 where some of this is being worked on.

[wuniversales]

Why not add an option in the plugin configuration to add custom style to the 2fa field?

[solaceten]

Hi there what's the status with compatibility with Woocommerce ? Possible ?

PS - I would be happy to pay for this plugin. Maybe make a "pro" version and sell it @ $15 similar to the one on codecanyon (I would rather support this plugin).

However, it looks like it's just not yet there for my needs. I will keep an eye on dev.

[iandunn]

#504 laid some groundwork for this