Angular2-jwt: Cannot read property 'decode' of undefined

[MSC29]

Hi,

I'm getting this error in ionic2.
Cannot read property 'decode' of undefined.

When debugging, I find my token is read correctly from Storage, but when transpiled to JS, during the check of the Base64 encoding of parts[1], the Base64 object is missing a property.

TS: (line 179)
export class JwtHelper {

  public urlBase64Decode(str: string): string {
    let output = str.replace(/-/g, '+').replace(/_/g, '/');
    switch (output.length % 4) {
      case 0: { break; }
      case 2: { output += '=='; break; }
      case 3: { output += '='; break; }
      default: {
        throw 'Illegal base64url string!';
      }
    }
    // This does not use btoa because it does not support unicode and the various fixes were... wonky.
    return Base64.decode(output);
  }

JS

var JwtHelper = (function () {
    function JwtHelper() {
    }
    JwtHelper.prototype.urlBase64Decode = function (str) {
        var output = str.replace(/-/g, '+').replace(/_/g, '/');
        switch (output.length % 4) {
            case 0: {
                break;
            }
            case 2: {
                output += '==';
                break;
            }
            case 3: {
                output += '=';
                break;
            }
            default: {
                throw 'Illegal base64url string!';
            }
        }
        // This does not use btoa because it does not support unicode and the various fixes were... wonky.
        return js_base64_1.Base64.decode(output);
    };

So the result is that a property cannot be read.
And I can't send a header on a get request.

I'm using ionic serve -l to do the build.

Hope you guys have a suggestion, cheers!

[tripathi-swapnil]

I am also facing issue earlier it was working with same npm dependencies.
Listed are my dependencies and code

"dependencies": {
    "angular2-jwt": "^0.1.24",
    "ionic-angular": "^2.0.0-rc.0",
    "ionicons": "^3.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-native": "^2.0.3"
  },

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {LocalStorage} from '../local-storage/local-storage';
import {JwtHelper} from 'angular2-jwt';
import {Observable} from 'rxjs/Rx';

/*
  Generated class for the Auth provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Auth {
    loggedIn;
    storage_service;
    jwt_helper_service;
    user_data;
    /**
     * Initializes jwt helper and storage service
     */
    constructor(@Inject(LocalStorage) storage_service: LocalStorage,
        @Inject(JwtHelper) jwt_helper: JwtHelper) {
      this.loggedIn = false;
      this.jwt_helper_service = jwt_helper;
      this.storage_service = storage_service;
    }

this.loggedIn = !this.jwt_helper_service.isTokenExpired(token);
i always get this.jwt_helper_service as a blank object. Even using new HwtHelper() return blank obj

[escardin]

@MSC29 please see this comment: https://github.com/auth0/angular2-jwt/issues/192#issuecomment-252910580 Please close if this resolves your issue, since it's a duplicate.

@Anshdesire your issue is unrelated, please file a new issue.

[FdezRomero]

@escardin I'm having the same problem as @MSC29 with Ionic 2 RC.0.
I think that issue #192 is unrelated, since Ionic 2 uses Rollup and not SystemJS.

[escardin]

@FdezRomero Do you have to tell Rollup about all the libraries you use? If so the problem is essentially the same, but the specific solution is different. If that is the case, can you report back with your solution, or a sample project I can poke at? I'll get the docs updated one way or another.

[HectorFGarcia]

I'm having the same problem too with Ionic 2 RC0 and Auth0 library wich uses angular2-jwt.

[FdezRomero]

@escardin I gave up and wrote a simpler HTTP wrapper, as I don't need to verify the expiration or get information from the JWT, etc. I avoided the issue by not using the js-base64 package.

Honestly, I'm new to Rollup so I don't understand what the problem is. I just wanted to point out that Ionic 2 RC.0 uses it in order to help getting to the root cause.

[escardin]

Ah. I am not an Ionic user, and I don't use rollup. If I had to guess, it's a matter of declaring the dependency in a way ionic can find it, same as systemjs. If you had to tell it about angular2-jwt, then you also need to tell it about js-base64.

Given the problems everyone seems to be having with the dependency, I might just copy the code in explicitly or find another solution.

[FdezRomero]

Actually I didn't have any problem importing angular2-jwt, it worked right away from NPM without further config. Only js-base64 gave me this problem at runtime.

[escardin]

I don't suppose you have a sample project I could look at?

[FdezRomero]

Sure, you can pull the Ionic 2 sample project: https://github.com/driftyco/ionic-conference-app

[escardin]

It didn't work out of the box...

[mitcholya]

after install [email protected] fixed that issue

[jayhuang75]

@mitcholya Confirm this fix my issues too! Thanks

[HectorFGarcia]

Yep, downgrade to 0.1.23 fix the problem.

[sandor11]

@mitcholya confirmed your suggestion fixed the issue

[MSC29]

+1, [email protected] fixed that issue