Angular Authentication: using @angular/http package

First things first ,you may be wondering why I wrote this article, which contains a deprecated package. The reason is there are plenty of people still using and finding support, despite it has been depreciated. This tutorial will cover the jwt authentication module for a web application with old angular version. The entire @angular/http package has been removed from angular 8 and up, then @angular/common/http package used instead in upcoming releases.This article will help you to implement JWT authentication module if you cannot upgrade your angular version to the latest.You can find thousands of articles demonstrating @angular/common/http package, but you won't find any article demonstrating @angular/http package easily.

From Angular 4.3 onwards the most requested feature was added which is called the HttpInterceptor interface. It has enabled developers to intercept and modify HTTP requests from one place.This was possible in AngularJS but after Angular 2+ developers started to stick in middle of attaching authentication header and interceptors. Accordingly, I will guide to implement authentication module using @angular/http package.You can find all these code snippets as GIT gists : Link to the snippets

Angular Authentication module with @angular/http package

Lets go through from the login.component.html as you can see once the form submits, the login() method will be triggered in login.component.ts

Below is the login.component.ts that packed the methods behind the login function

When dealing with authentication in an Angular app, it’s recommended to keep all http calls in a separate service before it goes through http interceptors.

Below shows the authentication.Service.ts, how it handles the authentication is it sends a POST request with encrypted user name password to the API endpoint, then Endpoint will send a Access Token and Refresh Token.

Here we come to the most-awaited part of this article, If you still need to find what is jwt web tokens, here is the link : JWT

Creating the Interceptor

The aim of this section is to include the JWT as the Authorization header in any HTTP request that is sent. The first step is to, create an Injectable class which implements Http(since we are using @angular/http package ). Then we need to add a factory class and mention the factory class it in the app.module.ts

The functions of the interceptor is :

• Attaching headers and authorization bearer : In JWT authentication each http request to API needs to be included the JWT access token as a security measure.
• Refreshing jwt Access token once it has been expired: JWT authentication consists of two tokens, which is access token and refresh token, both tokens are expiring within a given time.
• Handling errors :It’s a matter of fact that JWT authentication encounters errors in different  scenarios, to continue the smooth user transactions we need to handle errors properly.

You need to create a factory provider. Factory providers can also be useful when creating an instance of a dependency from a third-party library that wasn't designed to work with Dependency Injection. Read More

below shows the http.factory.ts which is the factory provider.

Now please welcome very long httpInterceptor.ts

We use the last method getRefreshTokenfromService () to refresh the tokens by sending the http request without going through a external service.

When access tokens expires, we will usually get a 401 Unauthorized response . This gives us an signal that we need to re-authenticate the user. One vital step is resending the failed requests , This is just a small feature that can help to significantly improve UX, especially if you have access tokens with a very short lifetime. I have demonstrated that in the code too.

Phew! ...............no no, we are not done yet !!

One more step is right ahead of us, if we skip this step above mentioned snippets will not work. Last but not least , we need to add out factory provider in to the providers at app.module.ts class. Please find it in the below snippet.

Wrapping Up

Since this article used depreciated package to demonstrate JWT authentication, this method have lot of tricky operations and need several class wrappers. Things have changed after Angular 4.3 with brand new features to work with HTTP requests, conceivably one of the most useful is the new HttpInterceptor interface which allows us to modify outgoing requests and incoming responses with little code changes.

I hope this article helped you a lot, I have been in your position when it is hard to find a example for JWT authentication with @angular/http package, so this article written in return to the people who is struggling.

Disclaimer: Due to formatting limitations of the Linkedin , I had to upload my snippets as images, therefor please ignore the unnecessary white spaces in these snippets.

You can find all these code snippets as GIT gists : Link to the snippets