'Force Logout users if users are inactive for a certain period of time

Assume that you are doing a banking application. If users are logged into your site, how to detect their inactivity and ask them to log out if they remain inactive for a period of time? Inactive here means they have either switch to other tabs, or not touching the browser application.

I guess think I can do this by registering every mouse movement or keyboard movement when users are doing on EVERY page of my application. But the code would be very ugly and hard to maintain. Is there other more elegant ways of doing this?

php session

Solution 1:^[1]

This is the code I use. It is not mine, but I did modify it to it's 'perfection'.

// Add the following into your HEAD section
var timer = 0;
function set_interval() {
  // the interval 'timer' is set as soon as the page loads
  timer = setInterval("auto_logout()", 10000);
  // the figure '10000' above indicates how many milliseconds the timer be set to.
  // Eg: to set it to 5 mins, calculate 5min = 5x60 = 300 sec = 300,000 millisec.
  // So set it to 300000
}

function reset_interval() {
  //resets the timer. The timer is reset on each of the below events:
  // 1. mousemove   2. mouseclick   3. key press 4. scroliing
  //first step: clear the existing timer

  if (timer != 0) {
    clearInterval(timer);
    timer = 0;
    // second step: implement the timer again
    timer = setInterval("auto_logout()", 10000);
    // completed the reset of the timer
  }
}

function auto_logout() {
  // this function will redirect the user to the logout script
  window.location = "your_logout_script.php";
}

// Add the following attributes into your BODY tag
onload="set_interval()"
onmousemove="reset_interval()"
onclick="reset_interval()"
onkeypress="reset_interval()"
onscroll="reset_interval()"

Good luck.

Solution 2:^[2]

A very easy and effective way of doing this is by placing something like this in your HTML HEAD section:

<META HTTP-EQUIV="refresh" CONTENT="1800;URL=logout.php?timeout">

Replace the logout.php?timeout with the appropriate script .. In the example above, if ?timeout is in the query string, I show them a login page with information indicating that they've been logged out due to inactivity.

Replace 1800 with the time in seconds that you wish to allow them to stay inactive before automatically logging them out. Set this to the same time that you have your session expiration set to.

Edit - Another easy mechanism to implement is to have a session variable called last_time, or last_activity, or something along those lines, and set it to a timestamp everytime there is activity. In most of my stuff, I have a general include file that I do this in. In the same file, you could check to ensure that it's within the constraints that you've set forth for an active session. If it's been too long -- just do a 300 redirect to the logout page and display the appropriate inactivity message there.

Good luck!

Ian

Solution 3:^[3]

We can improve our codes to jquery now

idleTime = 0;
$(document).ready(function() {

    var idleInterval = setInterval("timerIncrement()", 60000); // 1 minute //60000
    $(this).mousemove(function(e) {
        idleTime = 0;
    });
    $(this).keypress(function(e) {
        idleTime = 0;
    });

});

function timerIncrement() {

    idleTime = idleTime + 1;

    if (idleTime >= 5) {
        window.location = $('#base_url').val() + 'home/logout_user';
    }
}

Solution 4:^[4]

You can do it more elegantly with underscore and jquery javascript libraries-

$('body').on("click mousemove keyup", _.debounce(function(){
    // logout user here
}, 1800000)) // 30 minutes inactivity

Solution 5:^[5]

It depends how they are "logged in" in the first place. Doesn't the session expiration on the server do this for you? If you really want to do it manually then you could use some javascript in a setTimeout, but thats ugly

Solution 6:^[6]

Usually the session lifetime is used to determine whether a user is logged in or not. So you could set a flag in the session that represents this state. And if it’s missing (either the user didn’t log in yet or the session timed out), he is considered as not logged in.

Solution 7:^[7]

You can have a bit of javascript that checks the server every x minutes to see when the user's last activity was. Shouldn't be more than a few lines of code. I would also add a meta refresh if the user has javascript disabled.

Solution 8:^[8]

I took the timestamp 'now' and check on each click if the delay is less than 3000 seconds or more than billions of seconds, which means that the user just logged in, if it's not it will redirect to logout

    var time = 0;

$(document).on('click', function() {

    var now = Date.now() / 1000 | 0;

    if (now - time < 3000 || now - time > 1480000000) {
        time = now;
    } else {
        window.location.replace("http://url");
    }
})

Solution 9:^[9]

    put in header of your java  script page.. if you want to avoid the backend calls   

    Below is the snip-let under script tag : 
    <script>
          var idleTime = 0;
          function func(){
              console.log(idleTime);
                $(this).keypress(function(e) {
                    idleTime = 0;
                });
                $(this).click(function(e) {
                    idleTime = 0;
                });
                timerIncrement();
            }
          function timerIncrement() {
              console.log("timerIncrement");
              console.log(idleTime);
                idleTime = idleTime + 1;
                if (idleTime >= 1) {
                    console.log(window.location);
                    logoutcall(); //API call
                    window.location = window.location.origin+"/riskoffice_UI/Login";
                }
          }
            setInterval(func,1800000) //Runs the "func" function every second
    
    </script>

Update : localStorage can be use to keep idle time for the application with multiple tabs are opened. 

        // Check browser support
      if (typeof(Storage) !== "undefined") {
        // Store an item to localStorage
        localStorage.setItem("timeIdle", "0");
        console.log(localStorage.getItem("idleTime"));
        // Retrieve the added item
      } else {
        //display this message if browser does not support localStorage
        console.log("Sorry, your browser does not support Web Storage.");
      }
      function func(){
            $(this).keypress(function(e) {
                localStorage.setItem("timeIdle", "0");
            });
            $(this).click(function(e) {
                localStorage.setItem("timeIdle", "0");
            });
            timerIncrement();
        }
      function timerIncrement() {
            var timeIdle = localStorage.getItem("timeIdle");
            timeIdle = parseInt(timeIdle) + 1;
            if (timeIdle >= 1) {
                logoutCall();
                window.location = window.location.origin+"/riskoffice-ui/Login";
            }
            localStorage.setItem("timeIdle", timeIdle.toString());
      }
     setInterval(func,1800000); //Runs the "func" function every second

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	peterh
Solution 2
Solution 3	Cloud
Solution 4	Kruttik
Solution 5	Andrew Bullock
Solution 6	Gumbo
Solution 7	dawnerd
Solution 8	maxDef
Solution 9

'Force Logout users if users are inactive for a certain period of time

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]