Angular2-jwt after rc0 broken

Ionic Framework ionic-v3
21

Just use local: Storage = new Storage(). As far as I am aware it no longer takes a parameter and uses IndexedDB by default.

22

Are you using AuthHttp? You need to add it to your providers. in app.module.ts. @cyberbobjr example above should solve your issue. If not, I can help if you post your app.module.ts.

23

This is my app.module.

import { NgModule } from ā€˜@angular/coreā€™;
import { IonicApp, IonicModule } from ā€˜ionic-angularā€™;
import { MyApp } from ā€˜./app.componentā€™;

import { CloudSettings, CloudModule } from ā€˜@ionic/cloud-angularā€™;
import { Storage } from ā€˜@ionic/storageā€™;

import { HomePage } from ā€˜ā€¦/pages/home/homeā€™;

import { AuthService } from ā€˜ā€¦/providers/auth-service/auth-serviceā€™;

// Import the Auth0
import {AuthHttp, AUTH_PROVIDERS, AuthConfig} from ā€œangular2-jwtā€;
import {Http} from ā€œ@angular/Httpā€;
export function getAuthHttp(http) {
return new AuthHttp(new AuthConfig({
noJwtError: true
}), http);
}

@NgModule({
declarations: [
MyApp,

],
imports: [
IonicModule.forRoot(MyApp, {
mode: ā€˜mdā€™,
prodMode: true
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,

],
providers: [
Storage,
AuthService,
AuthHttp, {
provide: AuthHttp,
useFactory: getAuthHttp,
deps: [Http]
}
]
})
export class AppModule {}

24

Take a look in this
https://github.com/ecureuill/Ionic2RC-Auth0

Despite there is an issue with blank page after login, jwt is working and is possible to login if you use the commented workaround to avoid blank page issue

25

just referencing https://github.com/auth0/angular2-jwt/issues/173
finally made stuff working for ionic2 rc0
with help of: https://github.com/ecureuill/Ionic2RC-Auth0
at least it compiles fine and I can trace the code
but it still not sending JWT token
I assume it because of changed storage mechanism

export function getXSRF() {
    return new CookieXSRFStrategy('csrftoken', 'X-CSRFToken');
}

export function getAuthHttp(http) {
    return new AuthHttp(new AuthConfig({
      noJwtError: true,
      headerPrefix: 'JWT',
      globalHeaders: [{'Accept': 'application/json'}],
    }), http);
}

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
  ],
  providers: [
    AuthService,
    {
        provide: AuthHttp,
        useFactory: getAuthHttp,
        deps: [Http]
    },
    {
        provide: XSRFStrategy,
        useFactory: getXSRF,
    }
  ],
  declarations: [
    MyApp,
...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
...
  ]
})

export class AppModule {}

attempt to put custom token getter doesnā€™t helps, I assume it because of asynchronous response
may be somebody knows how to fix that?

var storage = new Storage();
function tokenGet() {
    storage.get('id_token').then(token => {
        console.log('id_token', token);
        return token;
    });
}

export function getAuthHttp(http) {
    return new AuthHttp(new AuthConfig({
      noJwtError: true,
      headerPrefix: 'JWT',
      globalHeaders: [{'Accept': 'application/json'}],
      tokenGetter: tokenGet,
    }), http);
}
26

ok
working function should be just:

var storage = new Storage();
function tokenGet() {
    return storage.get('id_token');
}
27

Does this work? Prior to RC, I was trying to find a way to make this work with SqlStorage but it kept return a promise object.

28

just clarifying my working solution:

var storage = new Storage();

export function getXSRF() {
    return new CookieXSRFStrategy('csrftoken', 'X-CSRFToken');
}

export function getAuthHttp(http) {
    return new AuthHttp(new AuthConfig({
      noJwtError: true,
      headerPrefix: 'JWT',
      globalHeaders: [{'Accept': 'application/json'}],
      tokenGetter: (() => storage.get('id_token')),
    }), http);
}

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
  ],
  providers: [
    AuthService,
    {
        provide: AuthHttp,
        useFactory: getAuthHttp,
        deps: [Http]
    },
/*    {
        provide: XSRFStrategy,
        useFactory: getXSRF,
    }*/
  ],
  declarations: [
    MyApp,
...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
...
  ]
})

export class AppModule {}
29

Hi I tried the above suggestions. I do not get any compile errors, but get the following run-time error ionic $ 0 490344 error TypeError: core_1.provide is not a function. (In ā€˜core_1.provideā€™, ā€˜core_1.provideā€™ is undefined), http://localhost:8100/build/main.js, Line: 90255

30

try ionic serve it gives more context

31

Does everything work in Ionic Serve for you?

When I emulate or run off a device, it works great. But on Ionic Serve it white screens and the console says ā€œno provider for Http in ./MyAppā€

When I add Http in the provider Array, then it says ā€œNo provider for ConnectionBackendā€.

Does yours do that?

32

Nvm, had to import HttpModule

  imports: [
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
33

It works for me in ioniс build and ionic serve, I think because of importing AuthService which dependant from Http,
I donā€™t know why it failing for you, but if it helps then great, letā€™s put it into imports as well.

34

I think itā€™s because Iā€™m also making some http calls without authHttp

35

I updated my angular-jwt module to latest version and the issue is gone

1 Like
36

Still getting this error with latest versions: Auth0 is not defined

37

Hi rajashekar, how are you including your token to further api calls?
Do you need to attach to the header?
I am not using Auth0 but a custom JWT enabled api.
Thanks.

38

Yes, I am including this in the headers. Basically all my calls to backend via REST will have this token and token validation is done in the backend

39

Thank you,
I had the same problem, forget add authHttp to the list of providers

40

For future reference, here is how I am adding the token to my headers:

let headers: Headers = new Headers
headers.append('Content-type', 'application/json');
headers.append('Authorization', 'Bearer ' + token);