Secure Angular 11 App with Code Flow PKCE and IdentityServer4
Update: On May 12, 2021, Google released Angular version 12. The sample Angular app in this tutorial has been upgraded from version 11 to 12. You can find the upgraded source code in the ng-12-upgrade branch. The master branch is still at version 11.
I have worked with the Angular framework since version 2. Over the years, I figured that building robust security into Single Page Application (SPA) is complex and repetitive. If you are a developer who is looking for instructions to secure your Angular application using JSON Web Token (JWT), this story is for you.
To demonstrate how easy it is to secure Angular, I will start an application from scratch and then secure it with the OpenID Connect (OIDC) library. The task is divided into two parts:
Part 1: Scaffold an Angular app using starter kit Ngx-Rocket
Part 2: Install an OIDC client library and configure Code Flow Proof Key for Code Exchange (PKCE)
If you are creating new apps I would definitely recommend using PKCE over the Implicit flow. The OAuth Working Group has published some new guidance around the Implicit flow and JavaScript-based apps, specifically that the Implicit flow should no longer be used.
