Angular2-jwt: Incompatability with Ionic2 Storage (outdated access to storage)

[moatazsoli]

The angular2-jwt page has some instruction for configuring jwt with ionic2

The instructions are outdated and doesn't work anymore.
Ionic2 has updated the storage module to be used as injectable , please see https://ionicframework.com/docs/v2/storage/

import { Http } from '@angular/http';
import { Storage } from '@ionic/storage';

let storage = new Storage();

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

let storage = new Storage(); Doesn't work anymore.

Could you please update this to use the new storage injectable in ionic storage page

[ngehlert]

The "fix" is actually quite simple. Just use storage as second parameter of the function (and remove the let storage = new Storage() assignment)

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

and then at the providers just add storage as dependency

providers: [
        {
            provide: AuthHttp,
            useFactory: getAuthHttp,
            deps: [Http, Storage]
        }

[dearibujar]

I get Cannot read property 'get' of undefined , any idea?

[bkarv]

I think storage.get is a promise so you may have to do this instead:

storage.get('id_token').then((val)=>{return val});

I havent tested this yet but will be trying to implement within the next day or so will let you know how I go,

[escardin]

angular2-jwt supports resolving promises, specifically to support ionic storage. You don't need a .then. If get is undefined then you haven't setup storage properly.

[enraiser]

Can't resolve all parameters for Storage: (?).

[hansvn]

@enraiser

Can't resolve all parameters for Storage: (?).

this is basically the issue...

@ngehlert already posted a solution for this:

import { Storage } from '@ionic/storage';
...
export function getAuthHttp(http, storage) {
    return new AuthHttp(new AuthConfig({
        headerPrefix: '',
        noJwtError: true,
        globalHeaders: [{'Accept': 'application/json', 'Content-Type': 'application/json'}],
        tokenGetter: (() => storage.get('id_token')),
    }), http);
}
...
@NgModule({
    ...
    providers: [
        {
            provide: AuthHttp,
            useFactory: getAuthHttp,
            deps: [Http, Storage]
        }
    ]
})

Note that the parameters of the getAuthHttp function changed and therefore also the dependencies in the AuthHttp provider (Storage was added there too).

maybe the docs could give you a better understanding of the storage engine.

[karlpatrickespiritu]

Was there a fix for this?

Can't resolve all parameters for Storage: (?).

[karlpatrickespiritu]

I'm also getting the Can't resolve all parameters for Storage: (?). error. Tried suggestion above and doesn't seem to fix the issue. Anyone solved this kind of error?

[bkarv]

I had the same issue with the latest versions. I use an older version and it works (unfortunately I am unable to tell with version from the files I have but I am guessing 0.1.7 or 0.1.4 will work).

After that all I do is the following to use it in my service:

import { JwtHelper } from 'angular2-jwt';
In export class
jwtHelper: JwtHelper = new JwtHelper();

[lypborges]

let storage = new Storage({});

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

In my app.module work for me.

[karlpatrickespiritu]

Just solved my issue of Can't resolve all parameters for Storage: (?)..

After hours of searching, I found out that I had a component that had Storage as a provider. So what I did was removed it.

javascript @Component({ selector: 'login', templateUrl: 'login.component.html', providers: [ AuthService, // Storage, <-- removed this one JwtHelper ] })

[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! 🙇‍♂️