Logging into Auth0 with Angular 2

Question

I am following a tutorial for logging into Auth0 in Angular 2. There are some difficulties here because I am using the A2 CLI and he is not, which means that our code is not necessarily going to be the same. This no doubt is the cause for my issue here.

Still, I would like to be able to learn this concept while using the CLI.

Anyway, the issue here is that when I use the Auth-0 Log In, the page is supposed to show the Log Out link. It does not. Log In is still revealed while Log Out remains hidden.

Also, when I log in, there is no console.log message, nor is there anything stored in my localStorage. Thus, making me wonder if I really have logged in. However, my Auth0 widget acknowledges that I have logged in. And my Auth-0 dashboard confirms this as well.

I get no error messages.

app.component.html

<ul>
    <li [class.active]="isActive('')"><a [routerLink]="['Home']">Home</a></li>
    <li [class.active]="isActive('/about')"><a [routerLink]="['About']">About</a></li>  
</ul>

<ul>
    <li><a href="#" *ngIf="!loggedIn()" (click)="login()">Log In</a></li>
    <li><a href="#" *ngIf="loggedIn()" (click)="logout()">Log Out</a></li>  
</ul>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { tokenNotExpired, JwtHelper } from 'angular2-jwt';

declare var Auth0Lock;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
lock = new Auth0Lock('mike lient id', 'my dome main');
jwtHelper = new JwtHelper();
location: Location;
constructor(location: Location){this.location = location;}

login(){
var self = this;
this.lock.show((err: string, profile: string, id_token: string) => {
    if (err) {throw new Error(err);}
    localStorage.setItem('profile', JSON.stringify(profile));
    localStorage.setItem('id_token', id_token);
    console.log(
    this.jwtHelper.decodeToken(id_token),
    this.jwtHelper.getTokenExpirationDate(id_token),
    this.jwtHelper.isTokenExpired(id_token)
    );
self.loggedIn();    
});
}
logout(){ 
    localStorage.removeItem('profile');
    localStorage.removeItem('id_token');
    this.loggedIn();
}
loggedIn(){return tokenNotExpired();}
isActive(path) {return this.location.path() === path;}
}

To make sure that I have provided all the necessary information, I have also included my app.module.

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { routing, appRoutingProviders } from './app.routes';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NavigationComponent } from './navigation/navigation.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    NavigationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I'm assuming that this.lock.show is a subscription.

There are two problems here: you don't have an error callback for your this.lock.show function and calling a the self.loggedIn() doesn't do anything, it just returns a boolean value. If you want to set it you'll have to do something else.

login(){
    var self = this;
    this.lock.show((err: string, profile: string, id_token: string) => {
        if (err) {throw new Error(err);}
        localStorage.setItem('profile', JSON.stringify(profile));
        localStorage.setItem('id_token', id_token);
        console.log(
            this.jwtHelper.decodeToken(id_token),
            this.jwtHelper.getTokenExpirationDate(id_token),
            this.jwtHelper.isTokenExpired(id_token)
            );
        self.loggedIn(); // returns true/false but doesn't set anything!
    }, (error) => console.log(error) // I think you need this
    );
}

Even though you have the if (err) {throw new Error(err);} line, if the entire this.lock.show function errors, then I assume that it would invoke the error callback function instead of the success callback that you have.