Need help Logging/logout user In after session TImeout

Question

I am trying to implement a session timeout functionality in my project. When the user is idle and not using the web page I want it to throw a prompt message asking whether they want to continue, if the user hits yes, I want to log them back in, since this will help in regenerating Azure Adal Token, and if they say so "No" I want to log them out.

I am running into few errors when I try to log them in if they hit yes.

Here's my source code !!

The timer function.

var idleTime = 0;
$(document).ready(function() {
  //Increment the idle time counter every minute.
  var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

  //Zero the idle timer on mouse movement.
  $(this).mousemove(function(e) {
    idleTime = 0;
  });
  $(this).keypress(function(e) {
    idleTime = 0;
  });
});

function timerIncrement() {
  idleTime = idleTime + 1;
  if (idleTime > 1) { // 20 minutes
    window.confirm("Your Session Will Expire in 2 Minutes. Do you want to continue?");
    //window.location.reload();
    if (confirm == true) {
      AuthenticationContext.prototype.login();
    } else {
      AuthenticationContext.prototype.logOut();
    }
  }
  console.log(idleTime);
}
</script>

My Logout and Login Functions

AuthenticationContext.prototype.logOut = function() {
  this.clearCache();
  var tenant = 'common';
  var logout = '';
  this._user = null;
  if (this.config.tenant) {
    tenant = this.config.tenant;
  }

  if (this.config.instance) {
    this.instance = this.config.instance;
  }

  if (this.config.postLogoutRedirectUri) {
    logout = 'post_logout_redirect_uri=' + encodeURIComponent(this.config.postLogoutRedirectUri);
  }

  var urlNavigate = this.instance + tenant + '/oauth2/logout?' + logout;
  this._logstatus('Logout navigate to: ' + urlNavigate);
  this.promptUser(urlNavigate);
};

Login function

AuthenticationContext.prototype.login = function() {
  // Token is not present and user needs to login
  var expectedState = this._guid();
  this.config.state = expectedState;
  this._idTokenNonce = this._guid();
  this._logstatus('Expected state: ' + expectedState + ' startPage:' + window.location);
  this._saveItem(this.CONSTANTS.STORAGE.LOGIN_REQUEST, window.location);
  this._saveItem(this.CONSTANTS.STORAGE.LOGIN_ERROR, '');
  this._saveItem(this.CONSTANTS.STORAGE.STATE_LOGIN, expectedState);
  this._saveItem(this.CONSTANTS.STORAGE.NONCE_IDTOKEN, this._idTokenNonce);
  this._saveItem(this.CONSTANTS.STORAGE.FAILED_RENEW, '');
  this._saveItem(this.CONSTANTS.STORAGE.ERROR, '');
  this._saveItem(this.CONSTANTS.STORAGE.ERROR_DESCRIPTION, '');


  var urlNavigate = this._getNavigateUrl('id_token', null) + '&nonce=' + encodeURIComponent(this._idTokenNonce);
  this.frameCallInProgress = false;
  this._loginInProgress = true;
  if (this.config.displayCall) {
    // User defined way of handling the navigation
    this.config.displayCall(urlNavigate);
  } else {
    this.promptUser(urlNavigate);
  }
  // callback from redirected page will receive fragment. It needs to call oauth2Callback
};

I am getting error with clear cache

Uncaught TypeError: Cannot read property 'STORAGE' of undefined
    at Object.AuthenticationContext.clearCache (adal.js:396)
    at Object.AuthenticationContext.logOut (adal.js:440)
    at timerIncrement (localhost/:1208)

Cache code

AuthenticationContext.prototype.clearCache = function() {
  this._saveItem(this.CONSTANTS.STORAGE.ACCESS_TOKEN_KEY, '');
  this._saveItem(this.CONSTANTS.STORAGE.EXPIRATION_KEY, 0);
  this._saveItem(this.CONSTANTS.STORAGE.FAILED_RENEW, '');
  this._saveItem(this.CONSTANTS.STORAGE.SESSION_STATE, '');
  this._saveItem(this.CONSTANTS.STORAGE.STATE_LOGIN, '');
  this._renewStates = [];
  this._saveItem(this.CONSTANTS.STORAGE.STATE_IDTOKEN, '');
  this._saveItem(this.CONSTANTS.STORAGE.START_PAGE, '');
  this._saveItem(this.CONSTANTS.STORAGE.USERNAME, '');
  this._saveItem(this.CONSTANTS.STORAGE.IDTOKEN, '');
  this._saveItem(this.CONSTANTS.STORAGE.ERROR, '');
  this._saveItem(this.CONSTANTS.STORAGE.ERROR_DESCRIPTION, '');
  var keys = this._getItem(this.CONSTANTS.STORAGE.TOKEN_KEYS);

  if (!this._isEmpty(keys)) {
    keys = keys.split(this.CONSTANTS.RESOURCE_DELIMETER);
    for (var i = 0; i < keys.length; i++) {
      this._saveItem(this.CONSTANTS.STORAGE.ACCESS_TOKEN_KEY + keys[i], '');
      this._saveItem(this.CONSTANTS.STORAGE.EXPIRATION_KEY + keys[i], 0);
    }
  }
  this._saveItem(this.CONSTANTS.STORAGE.TOKEN_KEYS, '');
};

Answer 1

You are calling the function directly without actually creating the singleton instance. This means that CONSTANTS was never defined since the function is being called with out its base constructors being called. Please take a look at the SPA JS sample on git hub for how to work with the auth context. For how to initialize the auth context you can find it in the app.js from the sample .

    // Enter Global Config Values & Instantiate ADAL AuthenticationContext
    window.config = {
        instance: 'https://login.microsoftonline.com/',
        tenant: '[Enter your tenant here, e.g. contoso.onmicrosoft.com]',
        clientId: '[Enter your client_id here, e.g. g075edef-0efa-453b-997b-de1337c29185]',
        postLogoutRedirectUri: window.location.origin,
        cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
    };
    var authContext = new AuthenticationContext(config);