Lock: [v10] [Angular 2] TypeError: Cannot read property 'length' of undefined

Created on 4 Aug 2016  路  3Comments  路  Source: auth0/lock

Lock version: 10.0.1
framework: Angular 2
bundler: webpack
OS: Windows 10
browser: Chrome 52.0.2743.82 m (64-bit)

Error

browser_adapter.js:84TypeError: Cannot read property 'length' of undefined at Object.decode (http://127.0.0.1:3000/vendor.bundle.js:109538:24) at Auth0.decodeJwt (http://127.0.0.1:3000/vendor.bundle.js:58010:32) at Auth0.parseHash (http://127.0.0.1:3000/vendor.bundle.js:58055:20) at Auth0WebAPI.parseHash (http://127.0.0.1:3000/vendor.bundle.js:43064:34) at parseHash (http://127.0.0.1:3000/vendor.bundle.js:28955:39) at http://127.0.0.1:3000/vendor.bundle.js:28946:35 at http://127.0.0.1:3000/vendor.bundle.js:20122:24 at List.__iterate (http://127.0.0.1:3000/vendor.bundle.js:19244:14) at IndexedIterable.filterSequence.__iterateUncached (http://127.0.0.1:3000/vendor.bundle.js:20121:17) at seqIterate (http://127.0.0.1:3000/vendor.bundle.js:17642:17) at IndexedIterable.IndexedSeq.__iterate (http://127.0.0.1:3000/vendor.bundle.js:17358:15) at IndexedIterable.forEach (http://127.0.0.1:3000/vendor.bundle.js:21419:20) at http://127.0.0.1:3000/vendor.bundle.js:19107:15 at List.Map.withMutations (http://127.0.0.1:3000/vendor.bundle.js:18391:8) at new List (http://127.0.0.1:3000/vendor.bundle.js:19105:21) at reify (http://127.0.0.1:3000/vendor.bundle.js:20608:38) at List.filter (http://127.0.0.1:3000/vendor.bundle.js:21766:15) at handleAuthCallback (http://127.0.0.1:3000/vendor.bundle.js:28945:20) at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15403:39) at Object.onInvokeTask (http://127.0.0.1:3000/vendor.bundle.js:74949:42) at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15402:44) at Zone.runTask (http://127.0.0.1:3000/polyfills.bundle.js:15303:49) at ZoneTask.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15470:35) ------------- Elapsed: 374 ms; At: Thu Aug 04 2016 13:02:28 GMT+0200 (艢rodkowoeuropejski czas letni) ------------- at Object.onScheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:14985:24) at ZoneDelegate.scheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:15380:51) at Zone.scheduleMacroTask (http://127.0.0.1:3000/polyfills.bundle.js:15320:41) at http://127.0.0.1:3000/polyfills.bundle.js:16337:27 at setTimeout (eval at createNamedFn (http://127.0.0.1:3000/polyfills.bundle.js:16029:19), <anonymous>:3:37) at Auth0Lock.Base (http://127.0.0.1:3000/vendor.bundle.js:111294:8) at new Auth0Lock (http://127.0.0.1:3000/vendor.bundle.js:60211:52) at new Auth (http://127.0.0.1:3000/main.bundle.js:782:22) at http://127.0.0.1:3000/vendor.bundle.js:74459:48 at ReflectiveInjector_._instantiate (http://127.0.0.1:3000/vendor.bundle.js:71352:28) at ReflectiveInjector_._instantiateProvider (http://127.0.0.1:3000/vendor.bundle.js:71290:26) at ReflectiveInjector_._new (http://127.0.0.1:3000/vendor.bundle.js:71279:22) at ReflectiveInjectorDynamicStrategy.getObjByKeyId (http://127.0.0.1:3000/vendor.bundle.js:70931:51) at ReflectiveInjector_._getByKeyDefault (http://127.0.0.1:3000/vendor.bundle.js:71459:39) at ReflectiveInjector_._getByKey (http://127.0.0.1:3000/vendor.bundle.js:71431:26) at ReflectiveInjector_.get (http://127.0.0.1:3000/vendor.bundle.js:71240:22) at DebugAppView._View_AdminComponent_Host0.createInternal (AdminComponent.template.js:22:74) at DebugAppView.AppView.create (http://127.0.0.1:3000/vendor.bundle.js:93687:22) at DebugAppView.create (http://127.0.0.1:3000/vendor.bundle.js:93899:45) at ComponentFactory.create (http://127.0.0.1:3000/vendor.bundle.js:71861:37) at http://127.0.0.1:3000/vendor.bundle.js:50844:45 at http://127.0.0.1:3000/vendor.bundle.js:50822:27 at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15370:30) at Object.onInvoke (http://127.0.0.1:3000/vendor.bundle.js:74958:42) at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15369:36) at Zone.run (http://127.0.0.1:3000/polyfills.bundle.js:15263:45) at NgZoneImpl.runInner (http://127.0.0.1:3000/vendor.bundle.js:74989:72) at NgZone.run (http://127.0.0.1:3000/vendor.bundle.js:53599:67) at ApplicationRef_.run (http://127.0.0.1:3000/vendor.bundle.js:50820:15) at ApplicationRef_.bootstrap (http://127.0.0.1:3000/vendor.bundle.js:50842:22) at http://127.0.0.1:3000/vendor.bundle.js:50624:51 at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15370:30) at Object.onInvoke (http://127.0.0.1:3000/vendor.bundle.js:74958:42) at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15369:36) at Zone.run (http://127.0.0.1:3000/polyfills.bundle.js:15263:45) at http://127.0.0.1:3000/polyfills.bundle.js:15618:59 at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15403:39) at Object.onInvokeTask (http://127.0.0.1:3000/vendor.bundle.js:74949:42) at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15402:44) at Zone.runTask (http://127.0.0.1:3000/polyfills.bundle.js:15303:49) at drainMicroTaskQueue (http://127.0.0.1:3000/polyfills.bundle.js:15521:37) at HTMLDocument.ZoneTask.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15473:23) ------------- Elapsed: 19 ms; At: Thu Aug 04 2016 13:02:28 GMT+0200 (艢rodkowoeuropejski czas letni) ------------- at Object.onScheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:14985:24) at ZoneDelegate.scheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:15380:51) at Zone.scheduleMicroTask (http://127.0.0.1:3000/polyfills.bundle.js:15317:41) at scheduleResolveOrReject (http://127.0.0.1:3000/polyfills.bundle.js:15616:16) at resolvePromise (http://127.0.0.1:3000/polyfills.bundle.js:15580:23) at http://127.0.0.1:3000/polyfills.bundle.js:15562:15 at http://127.0.0.1:3000/polyfills.bundle.js:15674:27 at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15370:30) at Object.onInvoke (http://127.0.0.1:3000/vendor.bundle.js:74958:42) at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15369:36) at Zone.run (http://127.0.0.1:3000/polyfills.bundle.js:15263:45) at http://127.0.0.1:3000/polyfills.bundle.js:15618:59 at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15403:39) at Object.onInvokeTask (http://127.0.0.1:3000/vendor.bundle.js:74949:42) at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15402:44) at Zone.runTask (http://127.0.0.1:3000/polyfills.bundle.js:15303:49) at drainMicroTaskQueue (http://127.0.0.1:3000/polyfills.bundle.js:15521:37) at HTMLDocument.ZoneTask.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15473:23) ------------- Elapsed: 0 ms; At: Thu Aug 04 2016 13:02:28 GMT+0200 (艢rodkowoeuropejski czas letni) ------------- at Object.onScheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:14985:24) at ZoneDelegate.scheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:15380:51) at Zone.scheduleMicroTask (http://127.0.0.1:3000/polyfills.bundle.js:15317:41) at scheduleResolveOrReject (http://127.0.0.1:3000/polyfills.bundle.js:15616:16) at resolvePromise (http://127.0.0.1:3000/polyfills.bundle.js:15580:23) at http://127.0.0.1:3000/polyfills.bundle.js:15618:19 at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15403:39) at Object.onInvokeTask (http://127.0.0.1:3000/vendor.bundle.js:74949:42) at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15402:44) at Zone.runTask (http://127.0.0.1:3000/polyfills.bundle.js:15303:49) at drainMicroTaskQueue (http://127.0.0.1:3000/polyfills.bundle.js:15521:37) at HTMLDocument.ZoneTask.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15473:23) ------------- Elapsed: 192 ms; At: Thu Aug 04 2016 13:02:28 GMT+0200 (艢rodkowoeuropejski czas letni) ------------- at Object.onScheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:14985:24) at ZoneDelegate.scheduleTask (http://127.0.0.1:3000/polyfills.bundle.js:15380:51) at Zone.scheduleMicroTask (http://127.0.0.1:3000/polyfills.bundle.js:15317:41) at scheduleResolveOrReject (http://127.0.0.1:3000/polyfills.bundle.js:15616:16) at ZoneAwarePromise.then (http://127.0.0.1:3000/polyfills.bundle.js:15691:19) at RuntimeCompiler.compileComponentAsync (http://127.0.0.1:3000/vendor.bundle.js:66882:46) at RuntimeCompiler.resolveComponent (http://127.0.0.1:3000/vendor.bundle.js:66871:22) at http://127.0.0.1:3000/vendor.bundle.js:50623:38 at http://127.0.0.1:3000/vendor.bundle.js:50822:27 at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15370:30) at Object.onInvoke (http://127.0.0.1:3000/vendor.bundle.js:74958:42) at ZoneDelegate.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15369:36) at Zone.run (http://127.0.0.1:3000/polyfills.bundle.js:15263:45) at NgZoneImpl.runInner (http://127.0.0.1:3000/vendor.bundle.js:74989:72) at NgZone.run (http://127.0.0.1:3000/vendor.bundle.js:53599:67) at ApplicationRef_.run (http://127.0.0.1:3000/vendor.bundle.js:50820:15) at Object.coreLoadAndBootstrap (http://127.0.0.1:3000/vendor.bundle.js:50620:20) at Object.bootstrap (http://127.0.0.1:3000/vendor.bundle.js:76592:20) at main (http://127.0.0.1:3000/main.bundle.js:2903:40) at HTMLDocument.<anonymous> (http://127.0.0.1:3000/main.bundle.js:2952:73) at ZoneDelegate.invokeTask (http://127.0.0.1:3000/polyfills.bundle.js:15403:39) at Zone.runTask (http://127.0.0.1:3000/polyfills.bundle.js:15303:49) at HTMLDocument.ZoneTask.invoke (http://127.0.0.1:3000/polyfills.bundle.js:15470:35)

vendor.browser.ts

// Angular 2
import '@angular/core';
import '@angular/http';
import '@angular/forms';
import '@angular/common';
import '@angular/router';
import '@angular/compiler';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';

// ngrx
import '@ngrx/core';
import '@ngrx/store';
import '@ngrx/notify';
import '@ngrx/effects';

// RxJS
import 'rxjs';

// jQuery
import 'jquery';

// jQuery libs
import 'bootstrap';
import 'nprogress';
import 'malihu-custom-scrollbar-plugin';

// auth0 deps
import 'auth0-lock';
import 'angular2-jwt';


if ('production' === ENV) {
  // Production
} else {
  // Development
  require('angular2-hmr');
}

auth.service.ts

import Auth0Lock from 'auth0-lock';

import { Router } from "@angular/router";
import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';


@Injectable()
export class Auth {
  public userProfile: Object;
  private lock = new Auth0Lock(
    'OoxNRgWdR3vohddjr1c87XutR7RT2KLK',
    'snello.eu.auth0.com',
    {
      mustAcceptTerms: true,
      socialButtonStyle: "big",
      language: "pl",
      languageDictionary: {
        emailInputPlaceholder: "please enter you email",
        title: "My Company"
      },
    }
  );

  constructor(
    private router: Router
  ) {
    // Set userProfile attribute of already saved profile
    this.userProfile = JSON.parse(localStorage.getItem('profile'));

    this.lock.on("authenticated", authResult => {
      localStorage.setItem('id_token', authResult.idToken);

      this.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error) {return console.log(error);}

        localStorage.setItem('profile', JSON.stringify(profile));
        this.userProfile = profile;
      });

      this.router.navigate(['dashboard']);
    });
  }

  public login() {
    this.lock.show();
  };

  public authenticated() {
    return tokenNotExpired();
  };

  public logout() {
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
    this.userProfile = undefined;
  };
}

polyfills.browser.ts

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

// Typescript emit helpers polyfill
import 'ts-helpers';

// Web Animations API
// actual npm installed module is incomplete
// contents must be deleted and cloned from github development repository
import 'web-animations-js';


if ('production' === ENV) {
  // Production


} else {
  // Development

  Error.stackTraceLimit = Infinity;

  require('zone.js/dist/long-stack-trace-zone');

}
duplicate
Source
picture dszmaj
👍3

Most helpful comment

I get the same error. It looks like the Hash is UriEncoded, but the Auth0.parseHash fails to do a decodeURIComponent on the hash before trying to parse it.

The parseHash always creates a 'faulty' object that holds one property (which is the whole hash decoded) with an empty value, like this:
Object {access_token=ikxxxK8&id_token=exxxanp0&token_type=Bearer&state=upxxxj4: ""}
I 'xxx'ed out the long strings.

The fix would be to read the hash like this:
hash = hash || decodeURIComponent(window.location.hash);
instead of this:
hash = hash || window.location.hash;
on the first line of Auth0.parseHash

picture Hojou on 22 Aug 2016
🎉2

All 3 comments

+1

igorivaniuk picture igorivaniuk on 18 Aug 2016

I get the same error. It looks like the Hash is UriEncoded, but the Auth0.parseHash fails to do a decodeURIComponent on the hash before trying to parse it.

The parseHash always creates a 'faulty' object that holds one property (which is the whole hash decoded) with an empty value, like this:
Object {access_token=ikxxxK8&id_token=exxxanp0&token_type=Bearer&state=upxxxj4: ""}
I 'xxx'ed out the long strings.

The fix would be to read the hash like this:
hash = hash || decodeURIComponent(window.location.hash);
instead of this:
hash = hash || window.location.hash;
on the first line of Auth0.parseHash

Hojou picture Hojou on 22 Aug 2016
🎉2

Should be fixed by #583 and released in Lock 10.2.2

hzalaz picture hzalaz on 16 Sep 2016
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dharness picture dharness  路  6Comments
dgreuel picture dgreuel  路  5Comments
mattgibson picture mattgibson  路  3Comments
kjartanvalur picture kjartanvalur  路  8Comments
sedubois picture sedubois  路  4Comments