Angular2-jwt: Authorization Header is not added for Ionic 4

[hang321]

in Ionic 4, Authorization Header is not added to the HTTP request. Following error logged in console.

core.js:14597 ERROR Error: Http failure response for (unknown url): 0 Unknown Error
    at CatchSubscriber.selector (<your_own_file>:123)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at SafeSubscriber.push../node_modules/rxjs/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:209)

It is due to Ionic Storage return a Promise. To fix it then() is required in tokenGetter configuration in app.module.ts. README.md is going to be updated.

import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { Storage } from '@ionic/storage';

export function jwtOptionsFactory(storage) {
  return {
    tokenGetter: ()=> {
     return storage.get('access_token').then((value) => {});   // <-- append .then() here
    }
  }
}

// ...

@NgModule({
  // ...
  imports: [
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [Storage]
      }
    })
  ]
})

Get Data:

getTest() {
    return this.http.get(`${this.url}/api/test`)
      .pipe(
        catchError(e => {
          throw new Error(e.message);
        })
      )
  }

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.13.0
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 8 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v11.2.0 (/usr/local/Cellar/node/11.2.0/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[lesrpo]

You need to add the whitelistedDomains, without http, it worked for me.

export function jwtOptionsFactory(storage) { return { tokenGetter: () => { return storage.get('id_token'); }, whitelistedDomains:['myapiurl:8080'] }; }

[bhargavy]

It should be

export function jwtOptionsFactory(storage) {
    return {
        tokenGetter: () => {
            return storage.get('token').then((value) => { return value; });
        },
        whitelistedDomains: ['127.0.0.1'],
    };
}

[stevehobbsdev]

@hang321 Hopefully your problem has been solved. If not, feel free to continue the conversation.

[alainkaiser]

Add your api url to the whitelisted Domains like this:

export function jwtOptionsFactory() {
  return {
    tokenGetter: () => {
      return localStorage.getItem('jwtToken');
    },
    whitelistedDomains: environment.whitelist,
  };
}

In the env-file:
whitelist: ['localhost:5001']