Here I take a quick look at Auth0 authentication via both Universal & embedded methods, securing ASP.NET Core Web API & Azure Function resources and calling these from an Angular web app.

In a previous post I looked at using Azure B2C with the new MSAL Angular Preview library. I mentioned Auth0 in that post and how it was a breeze to setup, so I thought I would provide an Auth0 version of the same example - an Angular app making calls to a secured ASP.NET Core Web API & an Azure Function.

The code for this example is available here.

I'm not going to go into a huge amount of detail in this post as Auth0 have a lot of documentation and example code. I've provided two different examples of how you can use Auth0 - one via the Auth0 Lock widget embedded in the Angular app, and one redirecting to their Universal Login page which serves the Lock widget from Auth0 servers (and can be fully customised).

The embedded Lock example is the closest in terms of flow & functionality to the Azure B2C example in my previous post, and does not require a separate callback route. Note however that Auth0's Universal Login is the recommended approach and more information about why this is recommended can be found here. I'm using the free tier, so no custom domain in this example.

Both examples will prompt you to login by either clicking the 'Login' menu option or (if not already logged in) when clicking the 'Fetch Data' option. If the user refreshes the page or closes the browser (and returns) without logging out the application will automatically renew the token in the background if it is able to so the user is not prompted to login again.

Both examples are in the LetsBuildIt.Blog.Web project, in the ClientApp.Lock & ClientApp.Universal directories. The important code for the configuration, service, guard & interceptor is in '/src/app/core/auth/auth0'.

I've disabled the SPA stuff in the ASP.NET Core application, so to run the example you'll need to:

  1. Set multiple startup projects to start both the ASP.NET Core Web API & Azure Function projects when debugging.
  2. Run 'ng serve' from either the ClientApp.Lock or the ClientApp.Universal directories.
  3. Navigate to http://localhost:4200 once Angular has finished starting up.

I've based these examples on the code provided in the Auth0 'Real World Angular Series'. This example was for Universal Login only so I've adapted it to also work for Lock. Both examples have token renewal, etc, and the Lock example supports logging in without redirect (setting is configurable in the Auth0Service.ts file).

I also made some modifications to fix some issues I was having - I was getting errors with redirection when refreshing the page, and the Lock example needed to renew the token with the audience & scope parameters specified in order to get a correct access token back. I also found the Lock widget did not work in Angular 6 unless I used the CDN versions of the required scripts due to an issue with global not being defined - this issue is known & this is one of the available workarounds.

A quick note about the APIs - the ASP.NET Core Web API validates the token & that the correct scope ('read:all' for this example) is present. The Azure Function does not validate the scope, just the access token itself.

You can use the settings I've provided for testing if you like, but I may change/remove these at any time.

Some screenshots:

Logging in with embedded Lock (overlays over app):

Screen-Shot-2018-08-22-at-23.34.06

Fetch Data route after login:

Screen-Shot-2018-08-22-at-23.36.32

Logging in with Universal Login (redirects to Auth0 servers):

Screen-Shot-2018-08-22-at-23.44.50

And if I refresh / close browser and return without logging out first:

Screen-Shot-2018-08-22-at-23.33.26

In case you missed it earlier, code is available here.

And that's it! Hopefully you find this post helpful - it took a bit of work to get it all up and running, particularly with the embedded Lock example - and as always please feel free to reach out if you have any comments or questions.