Adding user authentication to a .Net Core Angular project - Part 1

Create a new Angular project

Visual Studio includes a great starter template for using Angular 4 with an ASP.NET Core 2.0 backend.  However, this template lacks some pretty important functionality - authentication and authorisation.  When you create a new project based on this template, the Change Authentication button is disabled and the authentication type is locked at No Authentication.

In this series of posts, I am going to extend this default template to include authentication and authorisation functionality using Microsoft Identity.  At the end of this series, we will have a project that supports the following functionality:

1. Users will be able to register for the site using their email address.  Registration will require email verification.
2. Users will also be able to register for the site using a social media account.  I will only include support for Facebook and Google accounts.  This functionality can easily be extended to support plenty of other account providers.
3. Users will be able to optionally sign in to the site.  We will use JWT tokens for authentication.  We will write Angular route guards to prevent unauthenticated users gaining access to authorised functionality.
4. We will provide all of the standard account management functionality - change password, sign out, forgot password, etc.
5. Where appropriate, our forms will be protected using reCaptcha to stop automated posting of sensitive information.

So, strap your self in.  Although this all seems pretty standard functionality, we have quite a lot of work to do before we reach our end goal.

First things first, let's create a project based on the default Angular template in Visual Studio.  I will be using Visual Studio 2017 Enterprise edition and C#.  Start by creating a new ASP.NET Core Web Application.  In honour of my blog host, I will be calling my new project Blogger.

New project dialog

After you choose ASP.NET Core Web Application, you will be presented with a number of project templates.  The Angular template is only available with ASP.NET Core 2.0, so make sure you have selected it in the drop down list at the top of the dialog.  To keep things simple, I am not including Docker support.

New ASP.NET Core 2.0 project types

Restore NPM packages

Select the Angular template and click OK.  Visual Studio does it's thing, and, before you know it, you have an Angular site created.  Now, an important thing to remember with this template is that it is not ready to run straight away.  The template has a lot of NPM dependencies, and these are not included with the project template.  So, to load these, right click the package.json file in the Solution Explorer window and select Restore Packages.  There's a lot to download, so it can take a while.  Use the Bower/npm Output window to track the progress.

As a slight aside, if you work in a company that uses an NTLM web proxy, NPM does not work with these types of proxies.  However, there is a simple fix.  If you don't already have it, install and run Fiddler whilst you are using Visual Studio.  Fiddler performs the necessary proxy authentication required for NPM to run.

Once the NPM packages have all been downloaded, you have a working website.  Run the project and you will see the default site in action.

Angular IE error

Or will you?!?  Well, if you are using any version of Internet Explorer prior to version 12, your website won't run and you will get the error shown on the left.  By default Angular targets "evergreen" browsers which means that some versions of IE are not immediately supported.  Fortunately, you can add support by importing polyfills.  To do this, edit your boot.browser.ts file.  This file is found in the ClientApp folder of your project.  Immediately after the first line, add the line import 'core-js/client/shim';.

Rerun the application, and you will see the default Hello, world! website.

Default ASP.NET Core 2.0 Angular website

Now that we have a working Angular site, in my next post I will modify this default site to add a bootstrap popup to allow the user to register for our site.

Source code (2214k)