Token Based Security: Angular Applications – Part 2

Introduction

In previous post, on the topic of Token Based Security, we created an API endpoint and protect it (using Authorize attribute) with IdentityServer. Then we setup a simple Angular application with an AuthService to use oidc-client library. We also created few angular components and at the end of previous post, we created two buttons for login/logout purposes in appComponent and then wired the following method with click events:

Today, we will continue from previous post and complete the login/logout process. We will see how the OIDC client library makes it very easy to implement the complex redirect flows out of the box.

So, let’s start and complete the logout method code first:

So, notice, from AppComponent logout() method, we are simply delegating the work to authService, which will use OIDC Client library to make this happen. Let’s see that next:

Login/Logout Process Completion

So from AppComponent UI buttons we are calling methods in AuthService. Here again, we are simply calling appropriate methods on userManager object and that will do all the heavy lifting for us:

Notice, the word Redirect in both methods, and yes, this code will redirect the user to IDP, where he/she will be loggedin/loggedout on IDP level, once that completes, user is redirected back to angular application.

Handling Redirect Callbacks

When user is redirected back to angular application, we need to add some more angular code to let angular application handle the login/logout completion process.

For that purposes, I created following two methods in AuthService.ts:

The code is self explanatory, we are calling appropriate methods on userMnager object to handle the Redirect Callbacks. So completeLogin will be called (using signin-callback.component we will see later in this post) at end of login process (after user enters username/password on IDP). This method is also raising notification about user login.

Similar to that completeLogout will be called at end of logout process (using signout-callback.component, will see next). This code is also clearing up user property on authService.

Signin/Singout Callback Components

Here are the components to handle Signin/Signout callbacks. IDP will redirect users to these components as part of authorization flow:

The following code shows SigninCallback component

As you can see we are calling the completeLogin() method, which we created earlier in the AuthService and once completed, we are navigating user to root URL (also removing the signinRedirect from the back navigation stack of browser). Notice, for the template part, its just an empty div.

Next, let’s see the code for SignoutCallback component:

This is very similar to SigninCallback component, an empty div and completeLogout method call.

At this point, our login/logout functionality is in place, now, lets configure STS to allow angular client by adding client information as shown next:

Configure IDP with Angular Client Information

Here is the client setup (Config.cs) in the IDP:

We have discussed, all this information in the earlier posts of this series. Notice the RedirectUris and PostLogoutRedirectUris, we need to create these routes in our angular app and wire signin and signout callback components we created earlier, so that redirects can happen as planned.

Angular Routes for RedirectURIs

Let’s update the routing information in angular application:

and notice, that path are setup as configured in IDP and the components we created earlier for login/logout completion process. This is how they all wired up and work together to implement the flow.

Test the Application

Let’s test the application, by running .NET Core projects (IDP, API etc.) and Angular application. If we navigate to the root URI of angular app, following screen shows up:

Now, click the login button and we are redirect to IDP (notice the address-bar):

Here, enter the Username and Password (you can use TestUsers we configured in earlier posts) and click the Login button and we are redirected to Angular application as shown below:

So, our login/logout flow is working as expected. If we openup the browser window (session storage), we can see that following user information is available:

Now, when I click the Logout button, user is redirected to IDP for logout purposes:

Authorizing Calls to API

We are able to login/logout successfully. Let’s login again and try to access the Products page. You will notice, we are still not able to see the products data and console windows shows us 401 error:

It is because, even we have access-token from IDP, we have not yet passed it as an HTTP header to API when making http calls. Typically this involves introducing a Http Interceptor and this we will cover in next post along with some other enhancements.

You can download the source code from this git repository. We will continue in next post, if you have some comments or questions, let me know. Till next time, Happy Coding.

My Recent Books