Refresh id_token ADAL: Angular 4

Question

I'm using Angular 4 with ADAL to authenticate users in my web application, using ng2-adal library which is a wrapper for adal.js.

The problem I'm facing is the following: So the token expires after a time limit and I have a canActivate route guard that checks if the user is authenticated. If not, it navigates the users to the login page. This is how my route guard is looking:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AdalService } from 'ng2-adal/dist/core';

@Injectable()
export class RouteGuard implements CanActivate {

  constructor(private router: Router, private adalService: AdalService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.adalService.userInfo.isAuthenticated) {
      return true;
    } else {
        this.router.navigate(['/user-login']);
        return false;
    }
  }
}

so whenever the token expires, the user is navigated to the login page, which is annoying for the users. Is there a way to renew the token whenever it expires?

Answer 1

I figured it out. This is how I added it:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AdalService } from 'ng2-adal/dist/core';

@Injectable()
export class RouteGuard implements CanActivate {

  constructor(private router: Router, private adalService: AdalService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.adalService.userInfo.isAuthenticated) {
      return true;
    } else {
      this.adalService.acquireToken(this.adalService.config.clientId).toPromise().then((data) => {
      console.log('Generating a new authentication token.');
      return true;
    },
     (error) => {
       console.log('No user logged in.');
       this.router.navigate(['/user-login']);
       return false;
     }
    }
  }
}

Answer 2

I had the same issue and my fix worked. In app.component.ts, add this code to ngOnit().

this.adalService.handleWindowCallback();
 this.adalService.acquireToken(this.adalService.config.loginResource).subscribe(token => {
  this.adalService.userInfo.token = token;
  if (this.adalService.userInfo.authenticated === false) {
    this.adalService.userInfo.authenticated = true;
    this.adalService.userInfo.error = '';
  }
}, error => {
  this.adalService.userInfo.authenticated = false;
  this.adalService.userInfo.error = error;
  this.adalService.login();
});

When token expires, app component gets called, and acquire token refreshes the token silently. But the this.adalService.userInfo.authenticated is still false leading to redirection or again calling login method. So manually setting it to true fixes the redirection error. this.adalService.config.loginResource this is automactically set by adal-angular itself with the resource that we need token for.

Also add expireOffsetSeconds: 320, to adal configuration data settings along with

tenant: configData.adalConfig.tenant,
  clientId: configData.adalConfig.clientId,
  redirectUri: window.location.origin,

expireoffsetseconds invalidates the token based on the time that we specify before its actual expiry.