Umbraco 10 - How to set the view for 2fa angular or in c#?

Question

I'm trying to work out how I should modify the two factor view provided to users that have 2fa enabled in umbraco.

First I've created a provider: UmbracoUserAppAuthenticator. I've then called builder.Services.Configure to add the 'SetupViewPath'. Which works fine.

builder.Services.Configure<TwoFactorLoginViewOptions>(UmbracoUserAppAuthenticator.Name, options =>
{
    options.SetupViewPath = "..\\App_Plugins\\DuoMFACode\\twoFactorProviderGoogleAuthenticator.html";
});

Now I want to modify the views for Umbraco.Editors.ConfigureTwoFactorController and Umbraco.Login2faController.

However, I can't see a way to specify a path as I have with the SetupViewPath.

I'm wondering if I'm expected to configure this in Angular. So I've tried this:

angular.module("umbraco").controller("Umbraco.Login2faController",
    function ($scope, $http, authResource, userService, twoFactorLoginResource) {
         console.log("foo");
    }

When the view loads I can see 'foo' printed to the console. However, I'm unsure how I would inject a new view into the response. And if this is the correct way to go about this.

I'm also concerned that I'm unable to find documentation on which approach to take. Any thoughts would be apprecaited.

I can see that a post request is made to /umbraco/backoffice/umbracoapi/authentication/PostLogin with the response containing:

)]}',
{"twoFactorView":"views\\common\\login-2fa.html","userId":9}

I would like to change this view to remove the need for a user to enter a code. Since I'm using DUO as the 2fa provider, a code is not required, just an action in the app to confirm access.

Please could someone explain if I should modify umbraco or angular to achieve this.

Answer 1

You can create a class that implements IBackOfficeTwoFactorOptions and register it as a singleton. Then you can override the GetTwoFactorView method and return the path desired.

public class UmbracoAppAuthenticatorComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        // add the backoffice provider
        identityBuilder.Services.AddSingleton<IBackOfficeTwoFactorOptions, CustomtBackOfficeTwoFactorOptions>();
    }
}
// overwrite the GetTwoFactorView method
public class CustomtBackOfficeTwoFactorOptions : IBackOfficeTwoFactorOptions
{
    public string GetTwoFactorView(string username) => "\\somepath\\2fa-login.html";
}