Angular2 Auth0 Token Not Being Stored When Using Options In Auth0Lock Object
<p>I am using Auth0 to authenticate users in my NG2 app. I setup <code>AuthGuard</code> to block users from accessing certain pages in the application without a token. </p>

<p>When I use the Lock widget without any options the token is saved to the <code>localStorage</code> with no problems. However, if I use the options it is not saved to the <code>localStorage</code>.</p>

<p>To be more specific I can use some options, but when I add <code>auth:</code> and its parameters the token will not save to the <code>localStorage</code>.</p>

<p>This is the part that causes the problem:</p>

<pre><code>auth: { responseType: 'token', redirect: true, redirectUrl: "http://localhost/dashboard" },
</code></pre>

<p>When it is added to the options it will not save the token to the <code>localStorage</code>.</p>

<p>File <code>auth.service.ts</code>:</p>

<pre><code>import { Injectable }                      from '@angular/core';
import { tokenNotExpired, JwtHelper }      from 'angular2-jwt';
import { Router }                          from '@angular/router';
import { myConfig }                        from './auth.config';

declare var Auth0Lock: any;

var options = {
  theme: { logo: '../assets/img/logo.png', primaryColor: '#779476' },
  auth: { responseType: 'token', redirect: true, redirectUrl: "http://localhost/dashboard" },
  languageDictionary: { emailInputPlaceholder: "eve@example.com", title: "Login" }, 
};

@Injectable()
export class Auth {
  lock = new Auth0Lock(myConfig.clientID, myConfig.domain, options, {});

  constructor( private router: Router ) {
    this.lock.on('authenticated', (authResult) =&gt; {
      localStorage.setItem('id_token', authResult.idToken);
    });
  }

  public login() { this.lock.show(); };
  public logout() { localStorage.removeItem('id_token'); };
  public authenticated() { return tokenNotExpired(); };
}
</code></pre>

<p>File <code>guard.service.ts</code>:</p>

<pre><code>import { Injectable }           from '@angular/core';
import {
    CanActivate,
    Router,
    ActivatedRouteSnapshot,
    RouterStateSnapshot
}                               from '@angular/router';
import { Auth }                 from './auth.service';
import { Observable }           from 'rxjs/Observable';

@Injectable()
export class Guard implements CanActivate {

    constructor(protected router: Router, protected auth: Auth ) {}

     canActivate() {
        if (localStorage.getItem('id_token')) {
            // logged in so return true
            return true;
        }
        // not logged in so redirect to login page
        this.router.navigate(['/pages/home']);
        return false;
    }
}
</code></pre>