Customizing the 2FA activation screen is not working

We have implemented 2FA and it has been working fine in earlier version of v17. Recently, we upgraded to v17.5.0 and it seems that Customizing the 2FA activation screen is not working. It is using the default 2FA screen. It is not picking up /App_Plugins/TwoFactorProviders/2fa-activation.js

Please can you provide your thoughts on this issue or if you need any further information then I happy to relay.

	{
	  "$schema": "../../umbraco-package-schema.json",
	  "name": "2fa providers",
	  "version": "1.0.0",
	  "extensions": [
	    {
	      "type": "mfaActivationProvider",
	      "alias": "UmbracoUserAppAuthenticator",
	      "name": "UmbracoUserAppAuthenticator",
	      "forProviderName": "UmbracoUserAppAuthenticator",
	      "element": "/App_Plugins/TwoFactorProviders/2fa-activation.js", // This line is the only change
	      "meta": {
	        "label": "Google Authenticator"
	      }
	    }
	  ]
	}

Hi @shaishavkarnani

The extension type looks wrong. In v17 the only MFA type in the registry is mfaLoginProvider, there’s no mfaActivationProvider. An entry with a type that doesn’t match anything just gets discarded, which is why you’re getting the default screen.

Also, I assume the comments in your JSON file are added for this post as that is not valid JSON if they are actually present…

Justin

Hi Justin,

Many Thanks! I have followed this notes from this link Two-Factor Authentication | CMS 17.latest (LTS) | Umbraco Documentation

We are using 2FA for Users. It has this method mfaActivationProvider and provides option for Customizing the 2FA activation screen.

Not sure if this has changed in v17.5 as it has been working in earlier versions?

Cheers,
Shaishav

Cheers,
Shaishav

Hi @shaishavkarnani

I think that’s an error in the docs, I can’t find mfaActivationProvider anywhere in the source code.

Have you tried this:

{
  "type": "mfaLoginProvider",
  "alias": "UmbracoUserAppAuthenticator",
  "name": "UmbracoUserAppAuthenticator",
  "forProviderName": "UmbracoUserAppAuthenticator",
  "element": "/App_Plugins/TwoFactorProviders/2fa-activation.js",
  "meta": {
    "label": "Google Authenticator"
  }
}

If nothing is working for you, it may be worth you raising an issue on the Umbraco issue tracker, explaining that you’re following the docs but it’s not working.

Justin

Thanks - I am raising a ticket and will update you on this thread. here is the ticket.

Hi Shaishav,

Justin is right — this is a documentation error, and I’m afraid it’s been there since the v14 docs were written (by me, no less :sweat_smile:). The extension type has only ever been mfaLoginProvider in the source; mfaActivationProvider has never existed. The article even uses the correct type in the earlier registration step and then switches to the wrong one in the “final form” snippet.

I’ve opened a fix for the 16, 17, and 18 docs here: Security: Fix extension type for custom 2FA activation screen (16, 17, 18) - Pull Request #8247 - umbraco/UmbracoDocs - GitHub

If you change the type in your umbraco-package.json to mfaLoginProvider, your custom activation element should load. One thing worth knowing: with the wrong type, the manifest is silently ignored and the built-in activation screen is shown instead — which also displays a QR code and a code input, so it’s easy to mistake it for a custom one. That’s most likely why it appeared to work in earlier versions; nothing changed in 17.5 in how these extensions are resolved.

Please let me know if it works after the change, and thanks for reporting it!