two-factor icon indicating copy to clipboard operation
two-factor copied to clipboard

Woocommerce 2FA settings implementation

Open opicron opened this issue 6 months ago • 7 comments

Is your enhancement related to a problem? Please describe.

EDIT: added form save code (copy from Core class), to complete proof of concept.

I created a quick Woocommerce 2FA account settings implementation. The form save functionality needs to be implemented still, but I wanted to drop my idea here.

With the following code the form renders well and the [verify totp], [deactivate totp], [generate codes] and [download codes] buttons function.

Next, I will seperate the user profile admin saving function from the action hook, and make sure both the front end and backend will use the same save function. In theory that should be enough to have a crude(?) initial separation of the admin settings.

As the dummy and U2F provider are shown on front end I add a filter to remove these from the front end settings.

Proposed Solution

  • Add Two_Factor_Woo class

    • Endpoints
    • Filter providers
    • Generate form (using Core)
    • Save form function (using new form_save Core)
    • Enqueue Javascript
  • Adjust Two_Factor_Core class

    • Add seperate form_save function
    • Rewrite save user options to use new form_save
  • Add Two_Factor_Woo.js

    • Two step login logic javascript for Woocommerce

Proof of Concept

-edit- see plugin repo in comment below

opicron avatar Jul 06 '25 16:07 opicron

@kasparsd could you please let me know if you agree with the proposal? If so I will create a PR.

opicron avatar Jul 07 '25 09:07 opicron

Would it be possible to implement this as a standalone plugin first to validate the concept and approach? I believe the eventual implementation should be somewhat agnostic to the actual integration so that it works well WooCommerce, EDD, etc.

We could add the needed hooks to the two-factor plugin so that it is easy to implement as a plugin and then consider a more generic solution for the core two-factor plugin.

kasparsd avatar Jul 07 '25 13:07 kasparsd

Of course, I will create a plugin and link it here.

opicron avatar Jul 07 '25 14:07 opicron

@kasparsd here is the plugin repo. I verify that this plugin is working from the Woocommerce account page, and does not interfere with the /wp-admin/ login form.

https://github.com/opicron/two-factor-woo

opicron avatar Jul 09 '25 18:07 opicron

Im now using this extension on a few websites. Its working fine for admin/shopmanagers. Could you take a peek to implement the change which we need to avoid duplicating a part of the two-factor core code in the extension?

opicron avatar Sep 04 '25 11:09 opicron

@opicron Is your goal to add support for WooCommerce integration specifically or to have a generic implementation that works across any third-party screen/page?

kasparsd avatar Sep 05 '25 09:09 kasparsd

@kasparsd For now this extension is woocommerce specific. It only uses woocommerce hooks and two-factor hooks/filters. The front-end my account 2fa settings is a direct call of the show_user_profile action:

https://github.com/WordPress/two-factor/blob/6dfe32b40ec3168d46f609799bce5528f40ef817/class-two-factor-core.php#L1853

However, in its current state I can not call upon two-factor core to save the front-end settings. I assume because of the nonce check of check_admin_referer():

https://github.com/WordPress/two-factor/blob/6dfe32b40ec3168d46f609799bce5528f40ef817/class-two-factor-core.php#L2096

Which I solve by cloning its functionality here:

https://github.com/opicron/two-factor-woo/blob/15215a734b89eed5e0d8f6406f647d70e26a6060/includes/class-plugin-loader.php#L246

I have too little experience on how to implement a generic login form. I think it will always require some custom javascript to peek if 2fa is active and to add the login form.

opicron avatar Sep 10 '25 17:09 opicron