Adal js Library - this.adalService.acquireToken method giving "Token renewal operation failed due to timeout" on first time login

Question

Though there are some link related to this questions but I did't find any relevant answer, So hoping someone will answer this time.

Here is the scenario, In my Angular Application I am using adal-angular4 which is wrapper over Adal.js

Issue : this.adalService.acquireToken method during only first time login. I am getting timeout error but after login if i will do page refresh then this.adalService.acquireToken method working properly and the interesting part are following.

1. Issue is only coming in deployed environment not in the localhost.
2. Error "Token renewal operation failed due to timeout" coming only sometimes when network is slow or random times.

Here is my request interceptor service

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> | Observable<HttpSentEvent | HttpHeaderResponse
| HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
if (req && req.params instanceof CustomAuthParams && req.params.AuthNotRequired) {
  return this.handleAuthentication(req, next, null);
} else {
  if (!this.adalService.userInfo.authenticated) {
    console.log(req, 'Cannot send request to registered endpoint if the user is not authenticated.');
  }
  var cachedToken = this.adalService.getCachedToken(environment.authSettings.clientId);
  console.log('cachedToken', cachedToken);
  if (cachedToken) {
    return this.adalService.acquireToken(resourceURL).timeout(this.API_TIMEOUT).pipe(
      mergeMap((token: string) => {
        return this.handleAuthentication(req, next, token);
      })
    ).catch(err => { console.log('acquire token error', err); return throwError(err) })
  } else {
    this.adalService.login();
  }
}

}

Answer 1

Well, after struggling for 1 to 2 days I have found the root cause. So posting this answer so that it will help others.

adal-angular4 library is using 1.0.15 version of adal-angular which is old version where default timeout for loadFrameTimeout is 6 seconds and in this version there is no configuration to increase the loadFrameTimeout. please see below link

Adal configurations

Now during first time login there are many steps happens.

1. After authentication, application redirect to configured URI by azure AD, By appending ID and Access token in the reply URL.
2. Then Library set all these token in the local storage or session storage depends on the configuration.
3. Then your applications loads and start making calls to webapi. Now here is the interesting things was happening, for each request I am calling acquireToken method against webapi application, So if network is slow acquireToken calls will give timeout error since 6 second is not enough sometimes. But for some of the API it will able to get the token.
4. Now on first call acquireToken method takes time but for subsequent request it takes token from the cache if it is available, so timeout error was coming only for first time not after that.

So, In this library for now there is no way to increase the loadFrameTimeout so I used Angular5 warpper which is using 1.0.17 version of adal-angular where we can increase loadFrameTimeout which solved my issue.