angular2-jwt: 1.1.0 doesn't add the authorisation bearer to the header

Seeing as how this library can sometimes be buggy, I decided to write my own HTTP_INTERCEPTOR, very easy, simply replace ‘rawJWT’ with the location of your JWT from local storage.:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class JwtHttpInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('rawJWT');
      let clone: HttpRequest<any>;
      if (token) {
        clone = request.clone({
          setHeaders: {
            Accept: `application/json`,
            'Content-Type': `application/json`,
            Authorization: `Bearer ${token}`
          }
        });
      } else {
        clone = request.clone({
          setHeaders: {
            Accept: `application/json`,
            'Content-Type': `application/json`
          }
        });
      }
      return next.handle(clone);
  }
}

Then in app.module.ts (note you have to import the above first as normal)

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtHttpInterceptor, multi: true },

This library is great for decoding JWT’s but this is not the first time an update has broken the code, so with this easy code I can control how and where my JWT gets sent

Repeating from #481 - If you leave the whitelist empty the isWhitelistedDomain method will always return false. It will never match anything, and hence never send the authorization headers. (This is contrary to the documentation, which implies that having an empty whitelist will match local domain requests.) Furthermore, adding localhost won’t work, because the domain for a domain-less request is null.

Workaround - If you use domain-less routes, the workaround is to add the null domain to the whitelist, which you can do through a RegExp. In other words, do this:

whitelistedDomains: [ /^null$/ ]

I had the same problem and solved this with whitelistedDomains: I was using: whitelistedDomains: ["https://api.mydomain.com/api/v1"] and it was not working I changed it to whitelistedDomains: ["api.mydomain.com"] **without “https://” and “/api/ v1” ** that way it works!

@chenkie or @joshcanhelp please update the documentation, I really had to use { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true } for this to work, spent to much time and almost dropped the library for giving such a hard time on integrating this (if this project is still maintained anyway). Also make the whitelistedDomains option is optional, as it is unclear if this causes the library not to provide the bearer token with each request. The idea is nice when I would be targeting multiple endpoints but for the sake of ‘getting started’ it’s really annoying (include protocol or not, specific sub urls, etc.)

@badre429 Auth0 provide and maintain this code for free, if you don’t like it, roll your own version. Your attitude towards open source software is disgusting.

I have posted a working fix/workaround above.

I too had the same problem and @rafaelzmt solution worked for me. I was managed to get it work for localhost. Earlier : whitelistedDomains: [‘http://localhost:8080/api’] Now: whitelistedDomains: [‘localhost:8080’]

whitelistedDomains: new Array(new RegExp('^null$')) compiles but it doesn’t work for me either (using serverless domains, serving Angular app from Spring Boot).

(Sorry left an erroneous comment about using ngtools/webpack before)

@rt-gavrilov - it works for me using AOT, but that’s because I’m using the jwtOptionsProvider and useFactory for my options factory - you’re right injecting a literal array of RegExps directly into the config won’t work through AOT.

However - you can try to declare both the Array and RegExp via initialization -

whitelistedDomains: new Array(new RegExp('^null$'))

It certainly compiles for me in AOT; perhaps you can confirm if it works as expected.

As HttpClient is just loading a service and does not offer any components, we just have to import it once. So I now load it only in the app.module.ts and searched through the project that no other instance was loaded. Then it worked

@crooksey You’re my hero!!!

for anyone needing an ionic-storage (which needs to fetch the stored token from a promise) compatible fix:

jwt-interceptor.ts

import { Storage } from '@ionic/storage';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

@Injectable()
export class JwtHttpInterceptor implements HttpInterceptor {
  constructor(public storage: Storage) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return Observable.fromPromise(this.storage.get('access_token')).mergeMap(token => {
      console.log('TOKEN -> ', token)
      let clone: HttpRequest<any>;
      if (token) {
        clone = request.clone({
          setHeaders: {
            Accept: `application/json`,
            'Content-Type': `application/json`,
            'X-Access-Token': token
          }
        });
      } else {
        clone = request.clone({
          setHeaders: {
            Accept: `application/json`,
            'Content-Type': `application/json`
          }
        });
      }
      return next.handle(clone);
    })
  }
}

app.module.ts

import { JwtHttpInterceptor } from './../interceptors/jwt-interceptor';
import { HttpClient, HttpClientModule, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';

... 
providers: [
... 
    { provide: HTTP_INTERCEPTORS, useClass: JwtHttpInterceptor, multi: true },
... 
]

Note: I’m using X-Access-Token instead of Authorization: Bearer TOKEN just FYI

@PartyArk whitelistedDomains: [ /^null$/ ] is a great workaround, but it only works with JiT-mode, AoT fails with ‘Expression form not supported.’ BTW, [new RegExp(‘^null$’)] doesn’t work as well.

@chenkie the possible solution for this is to return true for ‘null’ domain in isWhitelistedDomain method