Angular 2+ Token Renewal

Sample Project

Download a sample project specific to this tutorial configured with your Auth0 API Keys.

System Requirements
  • Angular 2+
Show requirements

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 Clients 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 setSession method to set the new tokens in local storage.

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

public renewToken() {
  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 = JSON.parse(window.localStorage.getItem('expires_at'));

    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 setSession method, add the function right after setting the access_token and id_token into local storage.

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

private setSession(authResult): void {
  // Set the time that the Access Token will expire at
  const expiresAt = JSON.stringify((authResult.expiresIn * 1000) +;

  localStorage.setItem('access_token', authResult.accessToken);
  localStorage.setItem('id_token', authResult.idToken);
  localStorage.setItem('expires_at', 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 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.

Previous Tutorial
4. Authorization
Was this article helpful?
Use Auth0 for FREECreate free Account