Introduction

I have written few posts on token based security, its importance, OAUTH, OIDC and IdentityServer. You can check previous  post if you are new to these topics.

Today, I will write about how to secure angular application with these technologies. We will see how to wire Angular application with IdentityServer.

Angular application is a public client type of application, these applications are not capable of keeping a secret like server-side client applications e.g. ASP .NET MVC, Nodejs etc.

In the past Implicit flow was used for angular but its no longer recommended. As we learned in previous posts that AuthorizationCode + PKCE is the norm today.

This flow involves redirection to IdentityServer from an angular app and there user enters Login/Password on IDP, validated there and then redirected back to angular application.

I have seen many applications with in-app login screens (e.g. inside an Angular application), though this can be done (usually using Resource-Owner Password Flow), but if possible, avoid this practice. It creates more issues than it solves. If you are not happy with IDP default views for login/logout, you can rather style/change IDP screens instead of building login/logout etc. screens inside your angular application.

In this post, we will cover the recommended flow, but, first, we need some API endpoint (on resource server) that will return some data. Let’s create a simple endpoint next:

API Endpoint

I have an API, which is just a .NET Core web application. To start with, I created an API for Products as shown below, which uses dapper and postgreSQL to read data from database and return it to the caller in JSON format:

#programming #angular #oauth #jwt