jwt - Auth0 and Angular 2: login and routing failing using the login widget -

i starting develop web applications , chose angular 2 front-end framework. i'm trying out auth0 user authorisation. problem follows: trying implement landing page login -> redirect functionality. after opening website should check if there user's token in localstorage , either show login widget or redirect home page. have ran nasty bug:

when i'm logging in, page refreshes , widget appears again: tokennotexpired() reason returns false. press login again same credentials - page refreshes, login widget disappears, logging shows tokennotexpired() returning true now, redirect still doesn't work. if enter base address, http://localhost:4200, redirects me home , tokennotexpired() returns true.

i tried debugging without luck - can't find failing.

essentially, sure there problems in way approach coding redirect feature, since lack of experience. kindly appreciate help, been sitting on while.

i'm including excerpts of code omitting redundant parts. injecting auth service globally bootstrapping in main.ts.

app.routes.ts:

import {providerouter, routerconfig} "@angular/router"; import {authguard} './secure/auth.guard'; import {adminguard} "./secure/admin.guard";  import {userhomecomponent} "./main/user-cpl/user-home.component"; import {adminhomecomponent} "./main/admin-cpl/admin-home.component"; import {loginpagecomponent} "./login/login-page.component";  const app_routes: routerconfig = [    { path: 'home', canactivate: [authguard],     children: [       { path: '', component: userhomecomponent },       { path: 'admin', component: adminhomecomponent, canactivate: [adminguard] },       ] },   { path: 'login', component: loginpagecomponent },   { path: '', redirectto: 'home', pathmatch: 'full' },   { path: '**', redirectto: 'home', pathmatch: 'full' } ];  export const app_routes_provider = [   providerouter(app_routes) ]; 

login-page.component.ts:

import {component, oninit} '@angular/core'; import {router_directives, router} '@angular/router'; import {auth} '../secure/auth.service';  @component({   moduleid: module.id,   selector: 'login-page-component',   template: `     <router-outlet></router-outlet>     `,   directives: [router_directives] }) export class loginpagecomponent implements oninit {    constructor(private auth: auth, private router: router) {   }    ngoninit():any {     console.log('logged in - ' + this.auth.loggedin());     if (this.auth.loggedin()) {       if (this.auth.isadmin()) {         this.router.navigate(['/home/admin']);       } else if (!this.auth.isadmin()) {         this.router.navigate(['/home']);       }      } else {       this.auth.login();     }   } } 

auth.service.ts:

import {injectable} '@angular/core'; import {tokennotexpired} 'angular2-jwt';  declare var auth0lock: any;  @injectable() export class auth {   // configure auth0   lock = new auth0lock('omitted', 'omitted', {     closable: false   });    //store profile object in auth class   userprofile: any;    constructor() {     // set userprofile attribute if saved profile     this.userprofile = json.parse(localstorage.getitem('profile'));      // add callback lock `authenticated` event     this.lock.on("authenticated", (authresult) => {       localstorage.setitem('id_token', authresult.idtoken);        // fetch profile information       this.lock.getprofile(authresult.idtoken, (error, profile) => {         if (error) {           // handle error           alert(error);           return;         }          localstorage.setitem('profile', json.stringify(profile));         this.userprofile = profile;       });     });   }    login() {     this.lock.show({       callbackurl: 'http://localhost:4200/home'     });   }    logout() {     localstorage.removeitem('profile');     localstorage.removeitem('id_token');     this.userprofile = undefined;   }    loggedin() {     return tokennotexpired();   }    isadmin() {     return this.userprofile && this.userprofile.app_metadata       && this.userprofile.app_metadata.roles       && this.userprofile.app_metadata.roles.indexof('admin') > -1;   } } 

auth.guard.ts:

import {injectable} '@angular/core'; import {router, activatedroutesnapshot, routerstatesnapshot} '@angular/router'; import {canactivate} '@angular/router'; import {auth} './auth.service';  @injectable() export class authguard implements canactivate {    constructor(private auth: auth, private router: router) {   }    canactivate(next: activatedroutesnapshot, state: routerstatesnapshot) {     if (this.auth.loggedin()) {       console.log('auth guard passed');       return true;     } else {       console.log('blocked auth guard');       this.router.navigate(['/login']);       return false;     }   } } 

admin.guard.ts:

import {injectable} '@angular/core'; import {router, activatedroutesnapshot, routerstatesnapshot} '@angular/router'; import {canactivate} '@angular/router'; import {auth} './auth.service';  @injectable() export class adminguard implements canactivate {    constructor(private auth: auth, private router: router) {}    canactivate(next: activatedroutesnapshot, state: routerstatesnapshot) {     if (this.auth.isadmin()) {       return true;     } else {       return false;     }   } } 

you must set redirect: false in configuration since single page app. auth0 otherwise make call redirecturl. call preventing authenticated event firing up. thus, in auth.service.ts file:

lock = new auth0lock('omitted', 'omitted', {   closable: false,   auth: { // <--- mind nesting     redirect: false   } }); 

this invoke 'authenticated' event in service on login. want redirect user once login done. thus, in callback invoke this._router.navigate(['path']). don't forget import { router } 'angular/router' , creating instance in constructor: constructor(private _router: router) {}.