Angular 2+: Token Renewal

View on Github

Angular 2+: Token Renewal

Gravatar for
By Andres Aguiar

This tutorial demonstrates how to add automatic Access Token renewal to an Angular2+ application with Auth0. We recommend you to Log in to follow this quickstart with examples configured for your account.

I want to integrate with my app

15 minutes
  1. Token Lifetime
  2. Add Token Renewal

I want to explore a sample app

2 minutes

Get a sample configured with your account settings or check it on Github.

View on Github
System requirements: Angular 2+

Token Lifetime

For security, keep the expiry time of a user's Access Token short.

When you create an API in the Auth0 dashboard, the default expiry time for browser flows is 7200 seconds (2 hours).

This short expiry time is good for security, but can affect user experience. To improve user experience, provide a way for your users to automatically get a new Access Token and keep their client-side session alive. You can do this with Silent Authentication.

You can control the expiry time of an Access Token from the APIs section. You can control the expiry time of an ID Token from the Applications section. These settings are independent.

Add Token Renewal

To the AuthService service, add a method which calls the checkSession method from auth0.js. If the renewal is successful, use the existing localLogin method to set the new tokens in memory.

// src/app/auth/auth.service.ts

public renewTokens() {
  this.auth0.checkSession({}, (err, result) => {
    if (err) {
    } else {

Add a method called scheduleRenewal to set up the time when authentication is silently renewed.

Define the refreshSubscription class property, which will hold a reference to the subscription that refreshes your token.

// src/app/auth/auth.service.ts
export class AuthService {

  // ..
  // define the refreshSubscription property
  refreshSubscription: any;

  // ...
  public scheduleRenewal() {
    if (!this.isAuthenticated()) { return; }

    const expiresAt = this._expiresAt;

    const expiresIn$ = Observable.of(expiresAt).pipe(
        expiresAt => {
          const now =;
          // Use timer to track delay until expiration
          // to run the refresh at the proper time
          return Observable.timer(Math.max(1, expiresAt - now));

    // Once the delay time from above is
    // reached, get a new JWT and schedule
    // additional refreshes
    this.refreshSub = expiresIn$.subscribe(
      () => {

  public unscheduleRenewal() {
    if (this.refreshSub) {

This lets you schedule token renewal any time. For example, you can schedule a renewal after the user logs in and then again, if the page is refreshed.

In the localLogin method, add the function right after setting the Access Token and ID Token into memory.

// src/app/auth/auth.service.ts

private localLogin(authResult): void {
  // Set isLoggedIn flag in localStorage
  localStorage.setItem('isLoggedIn', 'true');
  // Set the time that the access token will expire at
  const expiresAt = (authResult.expiresIn * 1000) +;
  this._accessToken = authResult.accessToken;
  this._idToken = authResult.idToken;
  this._expiresAt = expiresAt;


Add a call to the scheduleRenewal method in the root app component to schedule a renewal when the page is refreshed.

// src/app/app.component.ts

export class AppComponent {

  constructor(public auth: AuthService) {


Since client-side sessions should not be renewed after the user logs out, call the unscheduleRenewal method in the logout method to cancel the renewal.

// src/app/auth/auth.service.ts

public logout(): void {
  // Remove tokens and expiry time
  this._idToken = '';
  this._accessToken = '';
  this._expiresAt = 0;
  // Remove isLoggedIn flag from localStorage
  // Go back to the home route


If you're having problems with token renewal (for example, you get the login_required error), make sure you're not using Auth0 dev keys for social login. You must use your own social authentication keys.

Use Auth0 for FREE