Inactivity timeout javascript

inactivity.js

<script type="text/javascript">
function idleTimer() {
    var t;
    //window.onload = resetTimer;
    window.onmousemove = resetTimer; // catches mouse movements
    window.onmousedown = resetTimer; // catches mouse movements
    window.onclick = resetTimer;     // catches mouse clicks
    window.onscroll = resetTimer;    // catches scrolling
    window.onkeypress = resetTimer;  //catches keyboard actions

    function logout() {
        window.location.href = '/action/logout';  //Adapt to actual logout script
    }

   function reload() {
          window.location = self.location.href;  //Reloads the current page
   }

   function resetTimer() {
        clearTimeout(t);
        t = setTimeout(logout, 1800000);  // time is in milliseconds (1000 is 1 second)
        t= setTimeout(reload, 300000);  // time is in milliseconds (1000 is 1 second)
    }
}
idleTimer();
</script>

Including this javascript file will create timers for user inactivity. Provide a correct url for automatic logout for your site. If included in a page, the page will reload after 5 minutes when the user is inactive. Inactive means, no keyboard strokes, mouse movement, scrolling etc..

You can adapt the timers, just keep in mind that time is measured in milliseconds (1000 is 1 second)

I appreciate your desire to give folks a good experience but I fear this approach might backfire on you.

I recommend against logging folks out automatically. This provides no actual security and is very annoying when it happens. Financial institutions are especially bad with this because they're paranoid that you might have left your tab open on a public computer or something.

Suppose someone is using your app, walks away to make some tea or have dinner or whatever, then comes back later after the timeout period only to find they have to log in again to keep doing what they were doing. Seems annoying. If they have their password saved with their browser, then they are literally just jumping through hoops and no safer for it.

If you choose to go ahead with this, you might want to wrap this code all in (function() { ... }) to avoid polluting the global namespace with common functions like "logout" or "reload."

Hope that helps!

Does this actually work? Looks to me like you would never actually end up logging out because the page would refresh and restart the timers...

@beck24. The logout function is indeed not working since the timout is longer than the reload.

@ewinslow. You are right that login would be easy especially when user keeps browser login settings. I am trying to work around this by marking login and password fields as autocomplete = "off"

That is not bullet proof either. So I can use some tips here, the idea is to logout after 30 minutes, while still a page load is possible before that and do no reset "var t". May introduce a different value for this, but seems silly ?

Thanks for sharing this! I had been searching high and low for a simple refresh of the screen after a set amount of time. This did the trick! I striped out the log out part and it was perfect.

It worth to note that reloading the page alone does not guarantee an active session. i.e If the current page does not use session as seen in the reload() function.

@ewinslow it is useful if the page is displayed in an office and is getting updates at an interval...just stopping the updates wouldn't help because you also need to hide the client info.

@gerard-kanters Hi, just found this post while thinking of a way to sort this out for our Web System that we have - and just wanted to let you know, that Smart Browers like Chrome keep an eye out on the Input Field names, and suggest automatic completion, it doesnt matter if you set autocomplete="off" the browsers will still always try to help you complete it. I found 2 ways around this, and seems to be the only way that i found, and that is 1) after a period of time when loading a screen with login details to clear the inputs, or 2) change the input field names each time you load the screen with a random input name value . Browsers use these value names to help suggest autocomplete.

In regards to having the automatic logout - depending on the system use / importance i think its quite valid to kick someone out of a system after a period of time to keep say 'records for logged in and current active users' a valid metric if your monitoring that - but of course that is in addition to actually keeping security concerns in mind. If the period to go make a coffee and come back kicks you out and is not exactly helpful, then i would just think that the inactive period is just to short - one of the systems we have does this at a 15 minute mark and works quite well.

Very useful script. Thanks for sharing! Anyone tested this on iPad? Just curious if it works with touch as well. Thanks

Thanks @gerard-kanters, this helped me a lot. :)

WOw! After tens of google searches, I seem to have made head ways, @gerard-kanters thanks many.

Instead of listing number of events you can use events on window.blur to clear timer and window.focus to start timer
You can modify this solution: https://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active

@culniga You can use the browser's Page Visibility API instead, its more reliable.

@nexxado, good suggestion:

document.addEventListener('visibilitychange', function () {
    var t;
    if (document.hidden) {
        // start inactivity timeout
        
        function logout(){
            window.location.href = '/logout';
        }
        t = setTimeout(logout, 1800000);
    } else {
        clearTimeout(t);
    }
});

@gerard-kanters
Like some others I found this after hours of fruitless Google searching. Thanks so much, this is working well for me. I have commented out the reload sections though.
How could I alter the code (I'm pretty much a noob in js) so that the code ignores my 'login' page?
Thanks

There's one in my Repo in case someone wants to check.

if the admin wants that on that page he pauses for 15 mins data will be automatically saved into the database then how to identify the page.