Auto logout when there is no user activity

Question

I want to implement auto logout functionality in a webpage where it will show the login page when there is no activity on this webpage for a predefined interval(say 15 mins,30 mins,45 mins and 60 mins). I have written a function which listens specific events and resets counter.If the counter exceeds then I will call login page.

Here , the issue is , calling setInterval on user event makes so many function calls . Let me know , how to avoid this. Or , is there any other solution to achieve this.

var inActiveTimeout = 5; //temp
var minInActiveTimeout = 5;
var idleTime = minInActiveTimeout;
var idleIntervalTimer;

function listenEvents() {
            idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000); // multiple of 1 minute
            $('body').mousemove(function (e) {
                console.log(new Date($.now()) + " :: " + "Mouse Move"+idleTime);
                idleTime = minInActiveTimeout;
                clearInterval(idleIntervalTimer);
                idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000);
            });
            $('body').keypress(function (e) {
                console.log(new Date($.now()) + " :: " + "Key Press"+idleTime);
                idleTime = minInActiveTimeout;
                clearInterval(idleIntervalTimer);
                idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000);
            });
            $('body').click(function () {
                console.log(new Date($.now()) + " :: " + "Body Click"+idleTime);
                idleTime = minInActiveTimeout;
                clearInterval(idleIntervalTimer);
                idleIntervalTimer = setInterval(logoutTimeCounter, minInActiveTimeout * 60000);
            });
}


function logoutTimeCounter() {
            console.log(new Date($.now()) + " :: " + "idleTime  >>" + idleTime + "inActiveTimeout >>" + inActiveTimeout);
            if (idleTime === inActiveTimeout) {
                console.log(" <<Warning >>");
                $('#InactiveTimeoutModal').modal({backdrop: 'static', keyboard: false});
                $("#InactiveTimeoutModal").modal("show");
                clearInterval(idleIntervalTimer);
                setTimeout(logoutTimeCounter, 60000);
            }
            else if (idleTime > inActiveTimeout) { // 20 minutes
                console.log(new Date($.now()) + " :: " + "<< Time elapsed Hide and Logout>>");
                $("#InactiveTimeoutModal").modal("hide");
            }
            idleTime = idleTime + minInActiveTimeout;
}

Thanks

This is really a task for your server backend NOT for your Front End Code — Nick D, Apr 13 '16 at 11:11
That is the requirement . We dont have rights to modify the backend code. — JavaUser, Apr 13 '16 at 11:12
http://stackoverflow.com/a/4029518/4613398 can help and some ajax — madalinivascu, Apr 13 '16 at 11:13
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute. I dont want to call the function at every min . Since my minimum interval is 15 mins. — JavaUser, Apr 13 '16 at 11:31

score 3 · Answer 1 · answered Apr 13 '16 at 11:21

3

That should execute Back-end.

if it is impossible,,, You must monitor user events as scroll, mousemove, click.

var previous = 0;

document.addEventListener("mousemove", function(evt) {
 if(previous > 0) return;
 previous++;
});

document.addEventListener("click", function(evt) {
  if(previous > 0) return;
  previous++;
});

window.addEventListener("scroll", function(evt) {
  if(previous > 0) return;
  previous++;
});

//other event check..
//document.addEventListener....


setInterval(function(){
  if(previous > 0 )console.log("detect user action");
  else console.log("not detect user action");
},10000);

answered Apr 13 '16 at 11:21

superui

654
5
10

Will this handle all the cases ? . – JavaUser Apr 13 '16 at 11:38
No. i don't think so. it will vary depending on the features of your web site. I thinks enough that monitor scroll and mousemove event. – superui Apr 13 '16 at 11:50
events are fine . i am worrying about the usecase – JavaUser Apr 13 '16 at 11:53
I think this way may cover mostly case. @JavaUser – superui Apr 14 '16 at 02:07

score 1 · Answer 2 · answered Apr 22 '19 at 13:44

There is a good way to do that(but you will need to add Jquery to bind events):


var stop = false;
var initial_timer = (1000*15);
var timer = initial_timer;
var logoutUrl = 'unlock.html?last_page_visited='+window.location.pathname ; // URL to logout page.

function logOut(){
    window.location = logoutUrl;
}

if(!stop){
    setInterval(function(){
        timer-=1000;
        console.log("Timer:"+timer);
        if(timer==0 || timer<0){
            logOut()
            stop = true;
        }
    }, 1000);
}

$('body').bind('click dblclick mousedown mouseenter mouseleave keyup mouseover',
function(e){
    timer = initial_timer;
});

For more details or a complete example : https://github.com/Sanix-Darker/LogOutTimer

See it here: https://jsbin.com/dabobil/edit?html,js,console,output

Auto logout when there is no user activity

2 Answers2