Authorization Header not added within Ionic 3

I am trying to implement JWT in my Ionic 3 app, and have been using angular2-jwt successfully before (without HttpInterceptor). But the master v1.0 branch doesn’t seem to working, with all modules fully updated.

When doing as suggested in the Configuration for Ionic 2, there are no "Authorization: " headers sent.

My app.module.ts has the following:

...
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';
...
const storage = new Storage({
                              name: 'myapp',
                              driverOrder: ['sqlite', 'indexeddb', 'websql'],
                            });
export function jwtOptionsFactory() {
  return {
    tokenGetter: () => {
      return storage.get('id_token');
    }
  }
}

@NgModule({
  declarations: [MyApp, AnnouncementModalPage],
  imports: [
   HttpClientModule,
 JwtModule.forRoot({
                        jwtOptionsProvider: {
                          provide: JWT_OPTIONS,
                          useFactory: jwtOptionsFactory
                        }
                      }),...

Doing requests

Code for doing actual requests:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { JwtHelperService } from '@auth0/angular-jwt'
...

@Injectable()
export class InspirationProvider {
  constructor(public http: HttpClient,
              private jwtHelper: JwtHelperService..) {
  }

  private fetchData(): Promise<Data[]> {

    let token: string = this.jwtHelper.tokenGetter();
    console.log("This outputs a Promise having the token", token);


    return new Promise((resolve, reject) => {
      this.http.get<Data[]>(INSPIRATION_URL)
        .toPromise()
        .then(data => {
          resolve(data);
        })
        .catch((err) => {
          // something bad happened
          reject(err);
        })
    });
  }
}

My ionic info

cli packages: (/Users/rogier/.nvm/versions/node/v6.9.3/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.2
    ios-deploy        : 1.9.2
    Node              : v6.9.3
    npm               : 3.10.10
    OS                : macOS Sierra
    Xcode             : Xcode 9.1 Build version 9B55

Problem: While looking at the request being made, there is no “authorization” header.

[tylervz]

I got it working with my app.module.ts looking like this:

...
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';
import { IonicStorageModule, Storage } from '@ionic/storage';
...
export function jwtOptionsFactory(storage) {
  return {
    tokenGetter: () => {
      return storage.get('id_token');
    },
    whitelistedDomains: ['localhost:8080']
  }
}

@NgModule({
  declarations: [MyApp, AnnouncementModalPage],
  imports: [
    HttpClientModule,
    IonicStorageModule.forRoot(),
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionsFactory,
        deps: [Storage]
      }
    }),
    ...

[EcoleDuNumerique]

Hi,

I’ve same problem, with whitelistedDomains…

export function jwtOptionsFactory() { return { tokenGetter: () => { return storage.get('access_token'); }, config: { whitelistedDomains: ['localhost:3001', 'notes.api', 'localhost:8100', '[::1]:80', 'localhost', 'localhost:8200'], } } }