Angular 2 Session Handling

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • Angular 2.0.1
Show requirements

In the previous steps of this tutorial, we enabled user login with the Lock widget and then with auth0.js.

In this step, we will create a session for the user and also allow them to log out.

Create Session

Once the user is authenticated, we need to create a client-side session for them so that our Angular 2 app knows that they are currently authenticated. To do this, we need to store the value of the id_token attribute that is returned in the Lock authenticated callback parameter.

NOTE: This example uses localStorage, but you can use any storage library.

// auth.service.ts

@Injectable()
export class Auth {
  // Configure Auth0
  lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {});

  constructor() {
    // Add callback for lock `authenticated` event
    this.lock.on("authenticated", (authResult) => {
      localStorage.setItem('id_token', authResult.idToken);
    });
  }
  // ...
}

Check Session

To check if a user is authenticated, we can use tokenNotExpired from angular2-jwt which allows us to check whether the user's JWT is expired or not. Since JWT is a "stateless" manner of doing user authentication, the best way to know if the user should be regarded as authenticated on the front end is to know whether the token is unexpired.

// auth.service.ts

import { tokenNotExpired } from 'angular2-jwt';

// ...
public authenticated() {
  // Check if there's an unexpired JWT
  // It searches for an item in localStorage with key == 'id_token' by default
  return tokenNotExpired();
}

To use this service, inject Auth into your component:

// app/app.component.ts

@Component({
    selector: 'my-app',
    providers: [ Auth ],
    templateUrl: 'app/app.template.html'
})

export class AppComponent {
  constructor(private auth: Auth) {}
}

and then use it in your component's template:

  <!-- app/app.template.html -->
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Auth0 - Angular 2</a>
    <button class="btn btn-primary btn-margin" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</button>
    <button class="btn btn-primary btn-margin" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button>
  </div>

Logout

Since authentication with JWT is stateless, the only thing necessary for logging the user out is to remove their token from storage.

// auth.service.ts

// ...
public logout() {
  // Remove token from localStorage
  localStorage.removeItem('id_token');
}
Previous Tutorial
3. Custom Login
Next Tutorial
5. User Profile
Use Auth0 for FREECreate free Account