Setting up 2 factor authentication and email verification with .net core 2.0

Today I played with a new .net core template just to see what the authentication options were out the box and was surprised to see just how easy it is to go from nothing to having a base project that has authentication fully baked in with 2 factor authentication and email verification.

In this post we'll cover

1. Setting up a new .net core project with local app users
2. Enabling email verification
3. Setting up 2 factor authentication

Let's get started

#Setting up a new .net core project with local app users

This first part is just setting up a new .net core 2.0 making sure you select the local app users option for security, start off by creating a new project

1. Under the .NET Core Project section
2. Select ASP.NET Core Web Application
3. Enter a name for your app
4. Click OK

Next we'll select the project and authentication options, for this example we'll

1. Select ASP.NET Core 2.0
2. We'll use a Web Application using the Model-View-Controller template
3. Click Change Authentication
4. Select Individual User Accounts
5. Then from the drop list make sure Store user accounts in-app is selected
6. Click OK
7. Click OK

Congratulations you have done no work and have a fully working template project 😁.

Luckily the rest of this can be done following posts that are conveniently located in the project, we don't even have to Google for answers 🙂.

We just need to run migrations now, for this we are just going to attempt to login

1. Click Log in
2. Enter a email address
3. Enter a password
4. Click OK

We'll get the new improved not yellow screen of death, click Apply Migrations

After a short while the screen will indicate that you can refresh and migrations should be applied

After that migrations would have been applied. We can test this by registering a new user

1. Click on Register
2. Enter an email address
3. Enter your password
4. Re-enter your password
5. Click Register

You are registered, of course at the moment you were not asked to verify your email address because we haven't enabled that yet.

#Enabling email verification

The link for enabling email verification can be found in the EmailSender.cs file under the Services folder. If you want to follow the official documentation for this section you can use the link https://go.microsoft.com/fwlink/?LinkID=532713, alternatively you can follow here where you might get some extra hints

Start off by going to the Startup.cs file and adding the following code to the ConfigureServices method

Under the services folder add a new file called AuthMessageSenderOptions.cs with the contents

public class AuthMessageSenderOptions
{
    public string SendGridUser { get; set; }
    public string SendGridKey { get; set; }
}

Now right click on the project and click on Manage User Secrets

#

Set the content to the below which will be your send grid username and key

{
  "SendGridUser": "GordonBeeming",
  "SendGridKey": "<key removed>"
}

Next go to the Startup.cs and add the below code to the bottom of the ConfigureServices method

services.Configure<AuthMessageSenderOptions>(Configuration);

You can now add the SendGrid nuget package with the command Install-Package SendGrid. Next go to the EmailService.cs file and replace the class with the below

public class EmailSender : IEmailSender
{
    public EmailSender(Microsoft.Extensions.Options.IOptions<AuthMessageSenderOptions> optionsAccessor)
    {
        Options = optionsAccessor.Value;
    }

    public AuthMessageSenderOptions Options { get; } //set only via Secret Manager

    public Task SendEmailAsync(string email, string subject, string message)
    {
        return Execute(Options.SendGridKey, subject, message, email);
    }

    public async Task Execute(string apiKey, string subject, string message, string email)
    {
        var client = new SendGrid.SendGridClient(apiKey);
        var msg = new SendGrid.Helpers.Mail.SendGridMessage()
        {
            From = new SendGrid.Helpers.Mail.EmailAddress("my-app@beeming.co.za", "My App"),
            Subject = subject,
            PlainTextContent = message,
            HtmlContent = message
        };
        msg.AddTo(new SendGrid.Helpers.Mail.EmailAddress(email));
        var result = await client.SendEmailAsync(msg);
        if (result.StatusCode != System.Net.HttpStatusCode.OK)
        {
#if DEBUG
            var error = await result.Body.ReadAsStringAsync();
            throw new Exception(error);
#else
            throw new Exception("Unable to send email!");
#endif
        }
    }
}

Open AccountController.cs and find the below line in the Register post method and comment it out or delete it. This will mean that when someone new registers we won't auto log them in

That should be all you need to do. Test this by signing up using the register page and see if you get an email

After clicking of the link you should be shown a page saying that your email address is verified

and you will now be able to login

#Setting up 2 factor authentication

Firstly it's important to note that 2 factor auth is supported with no changes but this section addresses adding the QR Code to the 2 factor auth page

The link for enabling 2 factor authentication can be found in the EnableAuthenticator.cshtml file under the Views/Manage folder. If you want to follow the official documentation for this section you can use the link https://go.microsoft.com/fwlink/?Linkid=852423, alternatively you can follow here and do it 'right'.

Now obviously with software development there is never really a right way but some solutions feel less dirty and are therefore more right 😜. Where this example will differ from the official docs is that we are going to use bower for the reference we adding instead of downloading the file and storing it in our source control.

The default experience can be seen by

1. Clicking on your profile name
2. Clicking on Two-factor authentication
3. Clicking on Add authentication app

You will see here that you are given a code that your are required to type in and a message for how you can add a QR Code

Start off by right clicking on the project and going to Manage Bower Packages...

Next we need to

1. Click on the Browse tab
2. Type qrcodejs into the search box
3. Click on the first option
4. Which should be by the author CatTail and
5. Click Install

Next open the bundleconfig.json file and add the following config

{
  "outputFileName": "wwwroot/lib/qrcode.min.js",
  "inputFiles": [
    "bower_components/qrcodejs/qrcode.js"
  ]
},

Now we have 1 small bit of configuration left, open EnableAuthenticator.cshtml mentioned above and add the below code to the script section...you can also remove line 24 which is what shows the info message on how to setup the QR Code.

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

That's all that is required and now when you go configure 2 factor authentication you will see a QR Code that you can scan with a authenticator app like the Microsoft Authenticator app. You can test this by going to your profile and

1. Clicking on Two-factor authentication
2. You still have the code if your want/need to type it but
3. Now you can also scan the QR Code, scan it with your app and then
4. Enter the verification code you see in the app and
5. Click Verify

You'll now be presented with the recovery codes which you can use if you get locked out of your account because you can't access your 2FA device

All done 🙂

#Conclusion

Doing pretty much anything that you used to do is the same if not simpler than how it used to be with the full framework before. Adding social logins from here is also very easy but I'll save that for another post 😁