Implementing Two-factor authentication in an ASP.NET Core application

There are 3 common ways to authenticate someone:

• Something you know, such as a login/password or security questions
• Something you have, such as a smart card, a cell phone, an ID, etc.
• Something you are, such as a fingerprint or other biometric methods

In the previous posts, I've written a lot about authentication using passwords (Something you know). If you want to add more security, you must ask for a second authentication. That's what is called two-factor authentication (2FA). Commonly, you have a device (specialized or a smartphone) that gives you a number to write down on the computer after you entered your password. So, even if your password is compromised, an attacker cannot access your account. The device you use could also increase the security by using your fingerprint before validating the request. This way you use 3-factor authentication.

ASP.NET Core provides everything you need to enable two-factor authentication. The template allows you to authenticate using a password and a token generated by an application such as Microsoft Authenticator or Google Authenticator.

First, you can create a new project using the command line in an empty directory:

dotnet new razor --auth Individual

This will create a new project using razor pages and ASP.NET Core Identity to authenticate users. Users are stored in a SQLite database. You can create the database using the following command line:

dotnet ef database update

If you don't the first time you'll access the database from the web application, an error page will allow you to create it at this time.

By default, the authentication pages are not generated in the project. There are loaded from a NuGet package. This allows you to override only the pages you need in your project. This is very convenient because there are many pages and it's hard to update them when the template is updated. In our case, we need to update one page to display a QR code you can scan from your cell phone. You can do it using the command line, or using Visual Studio. In this post, I'll use Visual Studio.

Select the pages you want to add to your project. In our case, the Account\Manage\EnableAuthenticator

Then, download qrcode.js and place the file qrcode.min.js under wwwroot/lib/qrcode. You can now use the library to generate the QR code on the EnableAuthenticator.cshtml page. At the end of the file, add the following code:

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script src="~/lib/qrcode/qrcode.min.js"></script>
    <script type="text/javascript">
        new QRCode(document.getElementById("qrCode"),
            {
                text: "@Html.Raw(Model.AuthenticatorUri)",
                width: 200,
                height: 200
            });
    </script>
}

The page should now look like:

If you scan the code on Microsoft Authenticator, you'll get a new code every 30 seconds. Enter the current code in the verification code field to finish the configuration of the 2FA.

After you log in using your username/password, you'll be redirected to the Two-factor authentication page. You need to open the application you use the configure the 2FA and enter the code that is currently displayed:

You are now authenticated!

Thanks to ASP.NET Core, it's so simple to enable 2FA on your web application!

Do you have a question or a suggestion about this post? Contact me!