Adal.js : Token Renewal operation failed due to timeout

Quick Tip

While using adal.js with knockout.js or plain javascript, we need to write code to get the token and handle callback unlike using it with angular.js where angular-adal updates every call made with http provider ($http) with the acquired token in the header.
Here is a sample code:

	window.accessToken = null;
	window.tokenDefer = $.Deferred();
	var adLoginService = (function ($) {
	$(document).ready(function () {
	console.log("doc ready from AD Login");
	window.config = {
	clientId: '<clientId of the azure AD app>',
	postLogoutRedirectUri: window.location.origin,
	cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.
	};
	var authContext = new AuthenticationContext(config);
	var isCallback = authContext.isCallback(window.location.hash);
	authContext.handleWindowCallback();
	// if (isCallback && !authContext.getLoginError()) {
	// window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
	//}
	// If not logged in force login
	var cachedToken = authContext.getCachedToken(window.config.clientId);
	if (cachedToken) {
	console.log("user already logged in");
	// Logged in already
	authContext.acquireToken(authContext.config.loginResource, function (error, token) {
	if (error || !token) {
	console.log("ADAL error occurred: " + error);
	window.tokenDefer.reject();
	}
	console.log("got the token.. resolving tokendefer");
	window.accessToken = token;
	window.tokenDefer.resolve(token);
	});
	}
	else {
	// NOTE: you may want to render the page for anonymous users and render
	// a login button which runs the login function upon click.
	console.log("calling login");
	authContext.login();
	}
	});
	})(jQuery);

view raw

AADLogin.js

hosted with ❤ by GitHub

Code given above is the final version. Initially I was using getCachedUser() instead of getCachedToken(). In that case if the browser window was left untouched for more than an hour, acquireToken was throwing error:

Token Renewal operation failed due to timeout

I found an answer to this in an issue logged on github here.

So what happens when use, getUser() or getCachedUser() :

The getCachedUser or getUser methods look into the browser storage for id_token and returns a non-null user if there is a token inside the cache. It does not look into the token expiration time.

So when localStorage is used, tokens are preserved in the cache, when one re-opens the browser (and hence getCachedUser returns a non-null object) but the AAD cookie is expired (unless user checked the keep me signed in checkbox when logging in). Since the cookie is expired, acquire token call fails with the “login required” error.

So until they fix getCachedUser  to check for token validity we are better off using getCachedToken.


Until next time.

Cheers.