title: making a user profile system for angular 2 using auth0?
body: <p>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.</p>
  
  <p>tutorial im using <a href="https://auth0.com/docs/quickstart/spa/angular2/02-user-profile" rel="nofollow noreferrer">https://auth0.com/docs/quickstart/spa/angular2/02-user-profile</a></p>
  
  <p>my code currently is </p>
  
  <p>profile.components.html</p>
  
  <pre><code>&lt;div class="panel panel-default profile-area"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3&gt;Profile&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;img src="{{profile?.picture}}" class="avatar" alt="avatar"&gt;
          &lt;div&gt;
              &lt;label&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt; Nickname&lt;/label&gt;
              &lt;h3 class="nickname"&gt;{{ profile?.nickname }}&lt;/h3&gt;
          &lt;/div&gt;
          &lt;pre class="full-profile"&gt;{{ profile | json }}&lt;/pre&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>profile.components.ts</p>
  
  <pre><code>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) =&gt; {
                  this.profile = profile;
              });
          }
      }
  
  }
  </code></pre>
  
  <p>authentication.service.ts</p>
  
  <pre><code>    // 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) =&gt; {
              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();
      }
  }
  </code></pre>