Angular

Recently, there’s been a bit of a palaver around a draft specification proposed to the OAuth Working Group and its recommendation of abandoning the implicit flow in browser-based applications, e.g. Single Page Applications (SPAs), in favor of the authorization code flow with Proof-Key for Code Exchange (PKCE).

This article is going to look at how to update the Angular application found in my previous article “SPA Authentication using OpenID Connect, Angular CLI and oidc-client”, to start using the authorization code flow and PKCE.

Back in September 2017, I spoke at the .NET South West user group, and I’ve just realized that this is the first time one of my talks has made it online. I thought it was worthwhile sharing, especially since it’s a talk I probably won’t be doing again.

It’s always odd seeing yourself on camera, but I’m fairly happy with how well this talk went, especially considering that this talk took place on one of the few nights in September that I was actually at home/in the country (sorry again, Rachel).

OpenID Connect is the go to protocol for modern authentication, especially when using Single Page Applications, or client-side applications in general. A library I often recommend to clients is oidc-client, a plain JavaScript library that is part of the IdentityModel OSS project. This handles all of the necessary protocol interactions with an OpenID Connect Provider, including token validation (which strangely some libraries neglect), and is a certified OpenID Connect Relying Party conforming to the implicit RP and config RP profiles.

In this article, we are going to walk through a basic authentication scenario using the Angular CLI and the oidc-client library, during which we will authenticate a user, and then use an access token to access an OAuth protected API. This will use the implicit flow, where all tokens pass via the browser (something to always remember when dealing with code executing on the client, because the application cannot be trusted with features such as long lived tokens, refresh tokens or client secrets).