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: