Enhancing the jQuery idleTimeout plugin to sync tabs and allow a custom logout procedure

At work we use the following plugin ( https://github.com/philpalmieri/jquery-idleTimeout ) to handle our session expiration on the front end with an auto logout modal that allows the user to stay sign in, or kicks him off if no response is given.

Since we started using this plugin, we have added two new features to it that were needed in our application. We have released this feature to GitHub thanks to our CTO (http://thinkinginsoftware.blogspot.com/ ) :)

The first feature was tab synching. Our users were opening up multiple tabs of our application and we needed a way to make sure that when Tab #2 was opened, the idle timeout on the first tab would reset itself to now be in sync with the timeout on Tab #2, and so forth.

We were able to come up with a solution which uses HTML5Storage (localStorage) to store the last user update on ANY tab. When the plugin detects a tab that is about to timeout, it will check this local storage property, and if the last time it was updated is longer than the timeout property, it will work as expected, if it is NOT, then it will update its own timer to fire exactly when that last timestamp will expire.

Thankfully, all you have to do is add one more setting to the init script. For example:

$(document).ready(function(){
     $(document).idleTimeout({
       inactivity: 30000, 
        noconfirm: 10000, 
        sessionAlive: 10000,
        multipleTabs: true
     });
});

The last thing you will have to do is include the following library: https://github.com/marcuswestin/store.js - Why? StoreJS allows us to support older browsers that don't have localStorage through the use of cookies.

It abstracts this functionality away so that you only have to use a single API when dealing with localStorage.

The second feature we added was the ability to perform a custom callback on the logout procedure. We liked most of the functionality but had to enhance the logout procedure to perform extra tasks, thus we added another init option called "customCallback".

$(document).ready(function(){
     $(document).idleTimeout({
       inactivity: 30000, 
        noconfirm: 10000, 
        sessionAlive: 10000,
        multipleTabs: true,
        customCallback: function() {
            // perform custom action here
        }
     });
});

Keep in mind that if customCallback is defined, it will not continue with the regular logout procedure and it expects that function to take care of this process.

We hope this helps some of you there.

Github Link: https://github.com/josebalius/jquery-idleTimeout