Open Closed

2 Factor Authentication with Forced options - show authenticator app wizard #8534

User avatar
0
RobertSCG created

Hello ,

I've check recommended solution from this issue , https://abp.io/support/questions/8185/2FA-Authenticator-App-Registering-form-after-login .

It works fine but we would like to ask about forcing an authenticator app wizard. Scenario :

  1. Login as a admin host
  2. Go to Administration - Settings - Account - Two Factor tab : Force Two factor authentication

  1. Logout

  2. Login as a tenant admin , without configured Authenticator App

  3. The result - You are logged in

checked on pure tiered project using newest abp framework 9.0.2 , with @volo/account": "~9.0.2"

Expected result : User sees the authenticator app configuration wizard , configures the app and login with 2FA.

**Notes and thoughts: **

  • such expected scenario is a standard behaviour while logging in to application on which the 2factor authentication is enabled ( in example all microsoft applications , when do not recognize user , performs an authenticator app wizard just after loggin in )

  • from admin host perspective , when I set the Two factor option to Forced, I expect every user while loggin in to have an authenticator app wizard opened - if not configured.

  • ABP Framework version: v9.0.2

  • UI Type: Blazor Server

  • Database System: EF Core (SQL Server)

  • Tiered (for MVC) or Auth Server Separated (for Angular): yes

Go to accepted answer
25 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You need to set Require confirmed email or Require confirmed phone number to achieve this.

  • User Avatar
    0
    jacek.bialy created

    Robert is on vacation for a few days, so let me continue describing the problem. It’s true that the two mentioned options will make MFA available during login. Unfortunately, in our case, we need to enforce one specific MFA method for users. It must always be the Authenticator App. Therefore, we need the next step after entering the username and password to either be the token app configuration (for first-time login) or a screen requiring login confirmation in the Authenticator App, depending on whether the user is logging in for the first time or not.

    Example flow: https://www.youtube.com/watch?v=JCFAoMPFq-Q

    We believe this is a very standard approach offered by most providers, e.g., Microsoft Entra. Hence, our question is how this can be achieved using ABP.

    Key requirements:

    • Enforcing MFA exclusively through the Authenticator App.
    • During the first login, after successfully entering the username and password, the user should be able to configure the Authenticator App.
    • During subsequent logins, the step requiring login confirmation in the Authenticator App should immediately appear.
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    okay, I see.

    ABP supports Authenticator TOTP, but does not force the user to set it when logging in.

    https://abp.io/docs/9.0/modules/identity/two-factor-authentication#user-side

    You need to implement it yourself. For example, override login page to check If the user has configured Authenticator. Redirect to the configure page if not.

    //inject IAccountAppService
protected IAccountAppService AccountAppService;
....


if(!await AccountAppService.HasAuthenticatorAsync())
{
   return Redirect("/Account/Manage#Volo-Abp-Account-AuthenticatorApp");  
}

    You should also add a new middleware to check whether the current user has configured the Authenticator.

  • User Avatar
    0
    RobertSCG created

    Hi ,

    thanks for response.

    We've managed to overwrite login page , and got an access to the login process programmatically. Injection of AccountAppService was also a good hint ! Thanks for that.

    Our next steps is to check whether the setting is set to Forced and if yes then redirect to the authenticator app wizard.

    further questions :

    1. Is there also a possibility to give some information about how can I obtain the TwoFactor option ( Forced / Optional ) from Settings , which can be settled up by admin host account ? ( i try to use ISettingsProvider in overwritten Login.cshtml.cs , to obtain this settings but idk how it is named )

    2. Is it possible to attach to the end of the authenticator app configuration process and then for example force user to relogin after he will end the configuration process , and will have to re-authenticate within the configured authenticator app ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Is there also a possibility to give some information about how can I obtain the TwoFactor option ( Forced / Optional ) from Settings , which can be settled up by admin host account ? ( i try to use ISettingsProvider in overwritten Login.cshtml.cs , to obtain this settings but idk how it is named )

    var twoFactorForcedEnabled = await IdentityProTwoFactorManager.IsForcedEnableAsync();
var twoFactorEnabled = await ProfileAppService.GetTwoFactorEnabledAsync();
var tasAuthenticator = await AccountAppService.HasAuthenticatorAsync();
};

    Is it possible to attach to the end of the authenticator app configuration process and then for example force user to relogin after he will end the configuration process , and will have to re-authenticate within the configured authenticator app ?

    you can override the /Pages/Account/Components/ProfileManagementGroup/TwoFactor/Default.js

  • User Avatar
    0
    RobertSCG created

    Hi , thank You very much .

    I saw there is a problem with downloading Abp.Account.Pro module.

    I want to do this to analyze the /Pages/Account/Components/ProfileManagementGroup/TwoFactor/Default.js , and apply changes You mentioned.

    Is it possible to send the source code on email : robert.sgodzaj@connexure.co ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can get it from the browser

    for example: https://xxxx/Pages/Account/Components/ProfileManagementGroup/TwoFactor/Default.js

  • User Avatar
    0
    RobertSCG created

    Hi ,

    I've managed to get this code from Default.js , but it looks quite different than on the screen You showed .

    Is it a correct file ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Try Pages/Account/Components/ProfileManagementGroup/AuthenticatorApp/Default.js

  • User Avatar
    0
    RobertSCG created

    Hi , thanks!

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    :)

  • User Avatar
    0
    RobertSCG created

    Hi , can I also kindly ask for a hint with overriding the 2 factor step page ( this on the screen below ) , some direction to source code would be great :

    With overriding the Login.cshtml and Login.cshtml.cs page from this source : https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml.cs

    I've noticed this method :

    as far as i understand the process , once user has configured authenticator app , the result from this part :

    contains RequiredTwoFactor property set on true and Succeeded property set on False.

    Does it mean that we have to also overwrite the Two Factor Verification step ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    You can download the account pro module source code using abp suite

  • User Avatar
    0
    RobertSCG created

    Yes , I've also used CLI to download the source code but since I've done custom redirection for authenticator app configruation wizard , I saw that there is a need to also overwrite the VerifySecurityCode.cshtml view in order to show the Two Factor Verification step . Am I right ?

    I've done something like this :

    and the TwoFactorConfigurationWizard method :

    I've renamed this method from TwoFactorLoginResultAsync method .

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Yes, you can overwrite them according to your needs.

  • User Avatar
    0
    RobertSCG created

    Hi , thank You for the answers , i have one more question.

    Is it possible to overwrite this authenticator app configuration page :

    and put only the wizard , on the view like this below ? :

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    You can copy the authenticator source code from the settings page to a new page if you want.

    Get source code from here https://abp.io/support/questions/8534/2-Factor-Authentication-with-Forced-options---show-authenticator-app-wizard#answer-3a172ed4-c03c-7042-b97c-edf641d389a4

  • User Avatar
    0
    RobertSCG created

    Hi , I've managed to get Authenticator App Configuration Wizard , but I found issue that there is no QR Code generated . I've copied the code from Volo.Abp.Account.Pro.Public.Web/Pages/Account/Components/ProfileManagementGroup/AuthenticatorApp

    and also I've copied the javascript file and injected it like this :

    is there something more to do , in order to have that QR code generated ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    you can debug the inintQrCode js method

  • User Avatar
    0
    RobertSCG created

    Hi,

    thanks for the tips , I'm nearly at the end of this implementation. I had to create my custom view component in order to leave Account Management as it is originally implemented.

    Is there also a possibility to add these custom steps with using the ExternalProvider login ? So when user is loggin in through some external entry in example MFA , and then check the same things like within normal log in ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Yes, you can override the Login and Register. use same logic check if it's an external login

  • User Avatar
    0
    RobertSCG created

    Hi , thank You ,

    are there any options to login with TwoFactor and ExternalLogin entry ?

    To perform the same operation like here ?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Sorry I didn't get it

  • User Avatar
    0
    RobertSCG created

    While we are sign in without for example OpenIdConnect , so with standard flow , we can detect if user has configured his authenticator app and also if the TwoFactor auth is forced. If yes then we can show the Two Factor Authentication step and ask user for a code.

    With this scenario we are obligated to sign in the user with a SignInManager.TwoFactorSignInAsync method to confirm the code which he provided.

    So now using the OpenIdConnect so the external login and using the OnGetExternalLoginCallbackAsync method we can also detect the same case - if user has configured his authenticator app and also if the TwoFactor auth is forced.

    Once user has his authenticator app configured we can show the Two Factor Authentication step and ask user for a code.

    And here comes my question : is there any option to sign in the external user with TwoFactor code and provider ?

    Using the same method :

    didn't worked , because the result.Succeeded was equal - false.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    External users are no different from users; you can use SignInManager.TwoFactorySignInAsync without problems.

    didn't worked , because the result.Succeeded was equal - false.

    How about others? .RequiresTwoFactor, IsLockedOut, or IsNotAllowed. can you also provider logs

Assignee
User avatar liangshiwei
Labels
None yet
Made with ❤️ on ABP v9.2.0-preview. Updated on January 16, 2025, 11:47