Angular2-jwt: Authorization Header not added within Ionic 3

[rogiervandenberg]

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.

[niconaso]

@rogiervandenberg in order to add the authorization header you need to configure the whitelisted urls in your jwt factory.

Eg.:

`export function jwtOptionsFactory(config) {
const url: string = 'localhost:8080';

return {
tokenGetter: () => {
return storage.get('id_token');
},
whitelistedDomains: [url]
}
}`

[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'], } } }

[rogiervandenberg]

in order to add the authorization header you need to configure the whitelisted urls in your jwt factory.

That did not work. As a workaround I made my own HTTP interceptor adding the JWT's.

[nerijunior]

@rogiervandenberg please post your solution. Tks.

[phpweb]

@rogiervandenberg yes, please post your solution. Thanks in advance...

[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]
      }
    }),
    ...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you have not received a response for our team (apologies for the delay) and this is still a blocker, please reply with additional information or just a ping. Thank you for your contribution! 🙇‍♂️