Tel Map

Blog

Angular 5 HttpInterceptor – Add Bearer Token to HttpClient Requests

In this article I will describe how to add a Http Authentication Bearer token to each request done from Angular via HttpClient by implementing a Angular 5 HttpInterceptor. This way the bearer token has not be added to each request separately while doing Ajax request e.g. to a REST api. This is for example useful, if you have some api that is protected by OAuth and you have to sent a JWT token in order to get access.

HttpInterceptor:

Here is the code for the HttpInterceptor itself. It has to implement the HttpInterceptor interface and therefore provide an implementation for the intercept method.

A couple of things to notice here. Since I’m working with async / await and I use Promises in my code and the intercept method returns an Observable, I have to convert my Promise to an Observable using the Observable.fromPromise method.

In the handleAccess method I get my access token from my msalService. This is a service for handling login / access etc. using Microsoft Authentication Library for JavaScript (In my case Azure AD B2C).

The next step is to actually add the token to the HttpClient request.

Immutable Request / RequestHeader

One very important point is, that you cannot simply set or add new headers to the request object.

The request and header objects are immutable. Even if you change something by adding a new header or trying to set some header, this will not work. This took me a while to figure out, because the api of these objects allows you to do so. But the changes you make are then not reflected in the requests you make later on.

So the solution is to copy / clone the original objects and do the changes there (see code above)

Add CustomHttpInterceptor to @NgModule

So the only thing left to do is to register the new CustomHttpInterceptor, so that it will be used from now on.

That’s it!

So this article demonstrates how to add a custom authorization header to all HttpClient request in Angular 5. Similarly you could e.g. add code to do a redirect to a login page here in case you get a 401 (unauthorized) from the REST api.

I hope this article helps some people save some time I wasted because of the immutable object request header.

If you have any questions etc…. leave a comment below.

23 Antworten auf „Angular 5 HttpInterceptor – Add Bearer Token to HttpClient Requests“

  1. LaTriese Paxton

    Hello,
    I am thankful for your tutorial and would like to ask if i could ask a specific question about oauth and angular 5. I am very new to this aspect of web applications and am a bit confused.

      1. Sebastian Lindner Post Autor

        I called the services msal service, because in my case it uses the Microsoft Authentication Library for JavaScript (MSAL.js).

    1. Sebastian Lindner Post Autor

      For me this method simply calls
      return await this.clientApplication.acquireTokenSilent(this.tenantConfig.b2cScopes);

      with
      clientApplication = new UserAgentApplication(…)
      This UserAgentApplication is from the msal library.

      Basically how this is works is the following:
      original page -> redirect to microsoft login page (with a provided redirect url back to your „original page“ e.g. original_page/authentication) – after login microsoft will redirect you back to that page with a lot of appended url parameters.

      You have to make sure that the msal library intercepts the parameters of that url. In these parameters there will be your access token. The library will store those for you. All subsequent calls to acquireTokenSilent will return that token for you instead of doing a login again.

      Hope this helps. More details would probably require a separate blog article 🙂

  2. vinitesh purohit

    I get this error Property ‚getAccessToken‘ does not exist on type ‚MsalService‘ when I call msalService.getAccessToken() method. I am using angular 8.

    1. Sebastian Lindner Post Autor

      MsalService is a service I created on top of Microsoft’s MSAL library, so unless you also created one, you of course cannot have it… 🙂

  3. Kevin Fan

    Hi,

    Is that can ensure this.handleAccess(request, next) before return? i used similar way while it always return before handleAccess() finished.

    1. Kevin Fan

      And it’s better to share the code about this.msalService.getAccessToken(), i want to double check if there is any differ from your service.
      My accessToken() is as below:

      js
      getToken(): Promise{
      return new Promise((resolve, reject)=>{
      this.commonService.getToken().subscribe(token=>{
      this.localDate = new Date();
      localStorage.setItem('token', JSON.stringify(token));
      resolve(token);
      })
      })
      }

    1. Sebastian Lindner Post Autor

      What to do if your token expires totally depends on your authentication method. Sometimes you have 2 different tokens, one of them being a refresh-token. You could then call the API to get a new second token to be authenticated again. Another option would be to do a redirect to a login page.

    1. Sebastian Lindner Post Autor

      Inside the webapi you have to either parse the header in the request yourself and do authentication or you have some authentication middleware that takes care of the whole authentication itself.

  4. Supun

    I have no words to say thanks to you. I have been trying this interceptor thing for three days, and this was the only working solution.
    *****
    small correction for users who use rxjs 6+
    ——————————————————————–
    import { from } from ‚rxjs‘;
    …….

    intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
    var observableFromPromise = from(this.handleAccess(request, next));
    return observableFromPromise;

    //Observable.fromPromise may not be working in latest versions
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert