Angular Asp Net Core Authentication With Identity Server 4
Setting up Authentication for applications can be intimidating. Usually it doesn’t involve writing a lot of code, because good folks like these have invested their time to do all the hard work for us. As a result, most of the time we are dealing with configurations. Setting up authentication for Angular SPA is no different.
This post covers the following topics:
- Integrating Angular SPA with Identity Server Implicit Flow
- Configuring ASP.NET core web API to validate tokens
This post doesn’t cover setting up Identity Server. I’ll be using this Identity Server demo site in my sample since it can be easily accessed and integrated. Read this post by Scott Brady to learn more about Identity Server.
Identity Server Implicit Flow
The implicit grant type is optimized for browser-based applications. Either for user authentication-only (both server-side and JavaScript applications), or authentication and access token requests (JavaScript applications).
http://docs.identityserver.io
Create Angular Project
Let’s create an angular application using dotnet CLI.
dotnet new angular
Default template has old angular packages. So, let’s update them to their latest versions. We will be using Angular 4.4.6 Since the AspNet core template doesn’t support Angular 5 properly.
Angular OAuth Packages
Identity Server has provided a JavaScript plugin odic-client-js to integrate browser based applications. However, it was not implemented targeting modern browser-based applications such as Angular and React. So you will run in to issues when using server-side rendering and AoT compilation. Thankfully, the community has come forward with solutions! There are two OpendID Certified plugins for Angular:
- angular-oauth2-oidc by Manfred Steyer
- angular-auth-oidc-client by Damien Bowden
I chose angular-oauth2-oidc since it supports password flow as well.
npm i angular-oauth2-oidc --save
I had to install es-promise package to prevent build failure.
npm install es6-promise --save
Angular-oauth2-oidc Setup
Now that we have the base project, it’s time to configure angular SPA for identity server. First, we should import the OAuth Module and HttpClient Module to our application.
Then we should define Identity sever details.
Next, OAuth Module should be initialized using config object. We don’t need our application trying to connect to Identity Server and retrieve tokens during server pre-rendering, so everything is wrapped inside isPlatformBrowser code blocks.
Now, how are we going to force users to log-in to our application?
Setup Route Guard
We can define a logic in a route guard to be validated before navigating to a requested route. Using a route guard, we can prevent users navigating to our application without a valid token.
Setup OAuth Callback
If you check the authConfig redirect URI, Identity server is configured to redirect to ‘/’ after a successful authentication attempt. It is important NOT to have an AuthGuard for that particular route. Otherwise the application won’t be able to retrieve the token from the query string, resulting in a redirect loop.
Now we should be getting a token from Identity server. But how do we add it to our API requests and validate it from Web API side?
Making HTTP Requests with OAuth Tokens
We can use HTTP interceptor, that was introduced in Angular 4.3, to include the OAuth token in all HTTP requests. You might notice it resolves dependencies differently. The reason is a known issue which makes circular dependencies between modules.
ASP.NET Core OAuth Token Validator
Finally we need to validate OAuth tokens in the web server. That can be easily achieved using the Identity Server Access Token Validation package.
dotnet add package IdentityServer4.AccessTokenValidation
Now Angular SPA should be redirected to Identity server to authenticate, and should redirect back to angular SPA upon successful authentication.
Full source code can be found on GitHub.
Next, how do we use server side rendering for Authenticated users? Find out in my next post.