Force Users to Enable Two-Factor Authentication in Umbraco 13

EnforceTwoFactorAuthentication.js

(() => {
    
    angular.module("umbraco").run(["authResource", "twoFactorLoginResource", "editorService", "notificationsService", "eventsService", "overlayService",  async (authResource, twoFactorLoginResource, editorService, notificationsService, eventsService, overlayService) => {
        const state = {};
        
        const init = async (firstInit) => {
            "app.ready"
            state.currentUser = await authResource.getCurrentUser();
            state.twoFactorAuthProviders = await twoFactorLoginResource.get2FAProvidersForUser(state.currentUser.id);

            if(firstInit && !twoFactorIsEnabled()) {
                configureTwoFactor();
            }
        };
        
        const twoFactorIsEnabled = () => {
            return !!state.twoFactorAuthProviders.find(provider => provider.isEnabledOnUser);
        };
        
        const configureTwoFactor = () => {
            
            // Have an overlay to give a short explanation as to what the user is seeing and why
            var options = {
                title: 'Configure Two-Factor Auth',
                content: 'You are required to have MFA enabled on your account. Please close this dialog and follow the prompts to enable MFA.',
                disableBackdropClick: true,
                disableEscKey: true,
                closeButtonLabel: 'Close',
                hideSubmitButton: true,
                view: 'views/common/overlays/confirm/confirm.html',
                submit: function () {
                    overlayService.close();
                }
            };
            overlayService.open(options);
            
            editorService.open({
                create: true,
                user: state.currentUser,
                isCurrentUser: true,
                size: "small",
                view: "views/common/infiniteeditors/twofactor/configuretwofactor.html",
                close: async () => {
                    await init();
                    
                    if(twoFactorIsEnabled()) {
                        notificationsService.success("Two-Factor Auth", "You have successfully configured two-factor authentication.");
                        editorService.close();
                    } else {
                        notificationsService.error("Two-Factor Auth", "You must configure two-factor authentication before continuing.");
                    }
                }
            });
        };
        
        eventsService.on("app.ready", (name, args) => {
            init(true);
        });
    }]);
})();

package.manifest

{
    "javascript": [
        "~/App_Plugins/path/to/EnforceTwoFactorAuthentication.js"
    ]
}

Hey @Rockerby This worked on umbraco versions for 13 and below. I want this for umbraco 15 as well; could you please make it happen for v15 also?

If I need a version of this for the new back office, and it hasn’t been done by then, I’ll be sure to share it with the community 🙂

Hey, thnx for the code! Works great! Just add
overlayService.close();
after
editorService.close(); (line 48) to close overlay after success 2FA implementation, otherwise refresh is needed.

Where abouts in Umbraco 13 would you place this code, and is there any other config to do other than the usual Umbraco 2FA stuff?

Where abouts in Umbraco 13 would you place this code, and is there any other config to do other than the usual Umbraco 2FA stuff?

You’ll need to have the 2FA setup from Umbraco (or your own implementation). You’ll need to put these files into App_Plugins/somefolder/ - just be sure to update the path in the package.manifest to point to the path.