breaking into the unknown…

1 Comment

inactivity warning and logout timer

Almost all the secured Application support session time out due to inactivity after specific period of time say 15 minute or 30 minute. It is good to warn the user of logout due to inactivity. Say if your application support session expire on 30 minutes of inactivity. warn user at 25 minutes. If he do not click on the warning for next 5 minute but say after 6 minute, log him out.

You should note that, you have to handle the session expiry at your application level. I am from ruby on rails background and handle this with devise gem. Devise internally clear session and cookies, if the user is inactive for 30 minute. So if user come after 30 minutes and try to reload or submit the page he is taken back to the login page.

Here, we will warn the user at 25 minutes and log him out after 30 minutes.

The logic should be :

=> You need to track user doing something on your site or not. If not keep increasing the idle time.

=> If idle time reach 25 minute give him warning popup ( I used bootstrap modal for the popup)

      NOTE : don’t use alert . it will stop your timer

=> Once popup is shown, keep counting the sub-time for the logout

=> If user come after sub-time log him out

      NOTE : In my case, as I have told above session expiry is managed by devise, reloading the page is sufficient to take user back to the login page.

In case your application do not do that, clear session cookies etc using jquery (not covered in this post) and redirect him to login page.

=> whenever user show some activity : move mouse, press key or reload page, reset the timer i,e idle time to 0 value.

To create the timer we will use setInterval and clearInterval function of JavaScript . setInterval repeat the code within it after the specified time. The time is specified in milisecod i,e if you want to repeat the process after 1 seocnd, you should pass 1000 to it .

let us first create other required things.

=> create Alert PopUP.

As mentioned above alert will stop the execution of setInterval. so let us create our own popup. I have used bootstrap . The code is as below.

<div id="inactivity_warning" class="modal hide fade" data-backdrop="static" style="top:30%">
  <div class="modal-header">
    <button type="button" class="close inactivity_ok" data-dismiss="modal" aria-hidden="true">&times;</button>
  <div class="modal-body">
    <div class="row-fluid">
      <div id="custom_alert_message" class="span12">
       You will be logged out in 5 minutes due to inactivity. Please save your credit 
       application if you have not already done so.
  <div class="modal-footer">
    <a href="javascript:void(0)" class="btn inactivity_ok" data-dismiss="modal" aria-hidden="true">O.K</a>

save these lines in you layout so that it is available through out the application.

=> set hidden flag to decide logout and timer

Below hidden field will decide whether to logout the user or not. we will change its value to inactive when time reach 30 minutes .Set the user_loged_in value to true when user is loged in, otherwise keep it false

<input id="user_activity" name="user_activity" type="hidden" value="active" />
<input id="user_loged_in" name="user_loged_in" type="hidden" value="true" />

=> jquery code for timer

    // reset main timer i,e idle time to 0 on mouse move, keypress or reload
    window.onload = reset_main_timer;
    document.onmousemove = reset_main_timer;
    document.onkeypress = reset_main_timer;
    // create main_timer and sub_timer variable with 0 value, we will assign them setInterval object
    var main_timer = 0;
    var sub_timer = 0;

    // this will ensure that timer will start only when user is loged in
    var user_loged_in = $("#user_loged_in").val()

   // within dilog_set_interval function we have created object of setInterval and assigned it to main_timer.
   // within this we have again created an object of setInterval and assigned it to sub_timer. for the main_timer
   // value is set to 15000000 i,e 25 minute.note that if subtimer repeat itself after 5 minute we set user_activity
   // flag to inactive
    function dialog_set_interval(){
        main_timer = setInterval(function(){
            if(user_loged_in == "true"){
                sub_timer = setInterval(function(){
   // maintimer is set to 0 by calling the clearInterval function. note that clearInterval function takes
   // setInterval object as argument, which it then set to 0
    function reset_main_timer(){

    // logout user if user_activity flag set to inactive, when he click ok on popup. whenuser click O.K
    // on the warning the subtimer is reset to 0
        if($("#user_activity").val() == "inactive"){
            window.location = window.location // if your application not manage session expire 
                                              //automatically. clear cookies and session her

NOTE : value taken by setInterval is in milisecond i,e 1000 = 1 second. In the above code 25 minutes = 15000000 and 5 minute = 300000