Web Application - Automatically Show Login Page After Session Timeout

Show Login Page After Session Timeout

One can define the session timeout time in the web.xml of a web application and can also set it programmatically by using the Session API.

The server automatically takes care of the session invalidation once the timeout has occurred with user don’t doing any activity.

But to make an application more user friendly, one should prompt user about the session being going to expire and proper message once the session has expired. Some applications will prefer to redirect the user to login page once the session has timed out.

All these features of session timeout detection are not supported by J2EE API’s. One needs to use JavaScript to show warning messages and redirect users.

There are many ways by using which the session timeout can be made more graceful. The two most used approaches are to use the timer functions in JavaScript or to use cookies.

With timer functions, an initial timer equal to the session timeout is set and the JavaScript function decrements the seconds and shows warning and directs user at appropriate time.

With cookies, two cookies with expiration time of warning time and session timeout time are created and a JavaScript function constantly polls for the existence of the cookies. If the cookies are not found, the corresponding actions are performed.
The sample code for both the approaches is shown below. The code is for showing warning messages only. You can create similar functions for handling the session timeout scenario. Also, please note that the code shown below is not of production quality is intended to give you the start only.

function alertUser(){
    var a_p = "";
    var d = new Date();
    var curr_hour = d.getHours();
    if (curr_hour < 12) {
        a_p = "AM";
    }
    else {
        a_p = "PM";
    }

    if (curr_hour == 0) {
        curr_hour = 12;
    }

    if (curr_hour > 12) {
        curr_hour = curr_hour - 12;
    }

    var curr_min = d.getMinutes();

    curr_min = curr_min + "";

    if (curr_min.length == 1) {
        curr_min = "0" + curr_min;
    }

    var curT=curr_hour+':'+curr_min+' '+a_p;
    document.getElementById('sessionExpirySpace').style.display='block';
    alert(You have been inactive and have not saved your work for last 10    Minutes.\n Please save your work in next 5 minutes to avoid  any Data Loss due to  Session timeout.');
}

Similarly for cookies based approach, the code should look something like:

function createCookie(name,value) {
    argv=arguments;
    argc=arguments.length;
    var today = new Date(); 
    today.setTime( today.getTime() );
    var expires=argv[2];
    expires = expires * 1000 * 60;
    var expires_date = new Date( today.getTime() + (expires) ); 
    path=(argc>3) ? argv[3] : null;
    domain=(argc>4) ? argv[4] : null;
    secure=(argc>5) ? argv[5] : false;
    document.cookie = name + "=" +escape( value ) + ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + ';path=/;';
    checkCookie('MyAPP','Test');
}
function checkCookie(name,value) {
    var today = new Date(); 
    var curr_hour = today.getHours();
    var curr_min = today.getMinutes();
    if (curr_min < 9) 
        curr_min = '0' + curr_min;

    var n=name;
    var i = document.cookie.indexOf(name);
    if(i==-1)
       alert('Dear User,Your session has been inactive and you have not saved your  work for the last 25 Minutes.\nPlease save your work within next 5 minutes.\n \t\t\t\t' +  ' (Message at'+ ' ' + curr_hour + ':' + curr_min + ' Hrs)');
    else
        setTimeout("checkCookie('MyAPP','Test')",10000);
}

There are other things to keep in mind like:
1) What if user opens a new tab and opens the website
2) What if the user manually logouts