making a user profile system for angular 2 using auth0?

Question

so I been following a tutorial on the auth0 website on how to build a user profile system for my app but I cannot get it to work exactly. I got up to the point where my login works just fine but when pull data into the user profiles, it just doesn't want to work. don't know where to go from here.

tutorial im using https://auth0.com/docs/quickstart/spa/angular2/02-user-profile

my code currently is

profile.components.html

<div class="panel panel-default profile-area">
    <div class="panel-heading">
        <h3>Profile</h3>
    </div>
    <div class="panel-body">
        <img src="{{profile?.picture}}" class="avatar" alt="avatar">
        <div>
            <label><i class="glyphicon glyphicon-user"></i> Nickname</label>
            <h3 class="nickname">{{ profile?.nickname }}</h3>
        </div>
        <pre class="full-profile">{{ profile | json }}</pre>
    </div>
</div>

profile.components.ts

import { Component, OnInit } from '@angular/core';
import { AuthenticationService  } from './../services/authentication.service';


interface User {
    id: number,
    name: string,
    image: string
}

@Component({
    selector: 'db-profile',
    templateUrl: 'app/profile/profile.component.html'
})
export class ProfileComponent  implements OnInit {

    profile: any;

    constructor(public auth: AuthenticationService) { }

    ngOnInit() {
        if (this.auth.userProfile) {
            this.profile = this.auth.userProfile;
        } else {
            this.auth.getProfile((err, profile) => {
                this.profile = profile;
            });
        }
    }

}

authentication.service.ts

    // services/auth.service.ts
import { Injectable,  NgZone } from '@angular/core';
import {Router} from '@angular/router';
import { tokenNotExpired } from 'angular2-jwt';


// We want to avoid any 'name not found'
// warnings from TypeScript
declare var Auth0Lock: any;

@Injectable()
export class AuthenticationService {
    constructor( private _router: Router, private _zone: NgZone) {}

    lock = new Auth0Lock('gpnhOqi20kE7pOM61DYI6BuI93ZjgA4j', 'jasont8.auth0.com');

    login() {
        this.lock.show((error: string, profile: Object, id_token: string) => {
            if (error) {
                console.log(error);
            }
            // We get a profile object for the user from Auth0
            localStorage.setItem('profile', JSON.stringify(profile));
            // We also get the user's JWT
            localStorage.setItem('id_token', id_token);
        });
    }

    logout() {
        // To log out, we just need to remove
        // the user's profile and token
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');
    }

    loggedIn() {
        return tokenNotExpired();
    }
}

Answer 1

You might want to try this

constructor(private auth: Auth) {
    this.profile = JSON.parse(localStorage.getItem('profile'));
    this.token = localStorage.getItem('id_token');
    console.log(this.profile);    
}