Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement auto logout in Javascript

Tags:

javascript

The below code works for the most part but I am wondering if it's possible to tweak it a bit. If there is no mouse activity for x number of milliseconds, a popup window is displayed saying that you will be logged out. Then, if / when you click the ok button the script will automatically bring you to the logout file.

However, I would also like to bring the screen to the logout.php file if the ok button is not clicked after x number of milliseconds. Does anyone know how I might do this with the below code? Thanks

// Set timeout variables.
var timoutWarning = 840000; // Display warning in 14 Mins.
var timoutNow = 100000; // Timeout in 15 mins would be 900000.
var logoutUrl = 'logout.php'; // URL to logout page.

var warningTimer;
var timeoutTimer;

// Start timers.
function StartTimers() {
    warningTimer = setTimeout("IdleWarning()", timoutWarning);
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
}

// Reset timers.
function ResetTimers() {
    clearTimeout(warningTimer);
    clearTimeout(timeoutTimer);
    StartTimers();
    $("#timeout").dialog('close');
}

// Show idle timeout warning dialog.
function IdleWarning() {
//  $("#timeout").dialog({
    //modal: true
    alert("Warning, your page will redirected to login page. Due to not move your mouse within the page in 15 minutes.");
//});
}

// Logout the user.
function IdleTimeout() {
    window.location = logoutUrl;
}
like image 591
Jayreis Avatar asked Apr 11 '14 22:04

Jayreis


People also ask

How to auto logout in JavaScript?

This is the method for starting the timer. window. setTimeout() returns an ID that will be used to start and stop the timer. After the timeout is attained, the idleLogout() method is called which logs the user out.


5 Answers

Conceptually, you only need 1 timer running at a time. One timer that runs for 14 minutes and another that runs for another minute (15 minutes total). Once the 14 minute timer runs out, kill it and then start the 1 minute timer. If that one minute timer runs out, log the user out. If the user presses the "Stay Logged In" button, kill the 1 minute timer and restart the 14 minute timer. Rinse and repeat.

I changed your code the best I could. Hope you get the point.

// Set timeout variables.
var timoutWarning = 840000; // Display warning in 14 Mins.
var timoutNow = 60000; // Warning has been shown, give the user 1 minute to interact
var logoutUrl = 'logout.php'; // URL to logout page.

var warningTimer;
var timeoutTimer;

// Start warning timer.
function StartWarningTimer() {
    warningTimer = setTimeout("IdleWarning()", timoutWarning);
}

// Reset timers.
function ResetTimeOutTimer() {
    clearTimeout(timeoutTimer);
    StartWarningTimer();
    $("#timeout").dialog('close');
}

// Show idle timeout warning dialog.
function IdleWarning() {
    clearTimeout(warningTimer);
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
    $("#timeout").dialog({
        modal: true
    });
    // Add code in the #timeout element to call ResetTimeOutTimer() if
    // the "Stay Logged In" button is clicked
}

// Logout the user.
function IdleTimeout() {
    window.location = logoutUrl;
}
like image 133
VtoCorleone Avatar answered Oct 05 '22 17:10

VtoCorleone


update to @VtoCorleone's answer :

var warningTimeout = 840000;
var timoutNow = 60000;
var warningTimerID,timeoutTimerID;

function startTimer() {
    // window.setTimeout returns an Id that can be used to start and stop a timer
    warningTimerID = window.setTimeout(warningInactive, warningTimeout);
}

function warningInactive() {
    window.clearTimeout(warningTimerID);
    timeoutTimerID = window.setTimeout(IdleTimeout, timoutNow);
    $('#modalAutoLogout').modal('show');
}

function resetTimer() {
    window.clearTimeout(timeoutTimerID);
    window.clearTimeout(warningTimerID);
    startTimer();
}

// Logout the user.
function IdleTimeout() {
    document.getElementById('logout-form').submit();
}

function setupTimers () {
    document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("keypress", resetTimer, false);
    document.addEventListener("touchmove", resetTimer, false);
    document.addEventListener("onscroll", resetTimer, false);
    startTimer();
}

$(document).on('click','#btnStayLoggedIn',function(){
    resetTimer();
    $('#modalAutoLogout').modal('hide');
});

$(document).ready(function(){
    setupTimers();
});
like image 21
Saurabh Mistry Avatar answered Oct 05 '22 17:10

Saurabh Mistry


I had to do the same functionality for our project. Used the following code:-

 <script>
   $(document).click(function(){
        if(typeof timeOutObj != "undefined") {
            clearTimeout(timeOutObj);
        }

        timeOutObj = setTimeout(function(){ 
            localStorage.clear();
            window.location = "/";
        }, 1200000);   //will expire after twenty minutes

   });
</script>

The above code will set a timer every time we click anywhere on the screen. In case we don't click it auto-logs out to home screen.

like image 27
Snehal Bhusal Avatar answered Oct 05 '22 18:10

Snehal Bhusal


 <script type="text/javascript">
             var IDLE_TIMEOUT = 10; //seconds
                var _idleSecondsCounter = 0;
                document.onclick = function() {
                _idleSecondsCounter = 0;
                };
                document.onmousemove = function() {
                _idleSecondsCounter = 0;
                };
                document.onkeypress = function() {
                _idleSecondsCounter = 0;
                };
                window.setInterval(CheckIdleTime, 1000);

                function CheckIdleTime() {
                _idleSecondsCounter++;
                var oPanel = document.getElementById("SecondsUntilExpire");
                if (oPanel)
                oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
                if (_idleSecondsCounter >= IDLE_TIMEOUT) {
                //alert("Time expired!");
                document.location.href = "logout.php";
                }
                }
        </script>
like image 40
Priyabrat Rath Avatar answered Oct 05 '22 18:10

Priyabrat Rath


Just use this code.

        var timeoutTimer;
        var expireTime = 1000*60*30;
        function expireSession(){
            clearTimeout(timeoutTimer);
            timeoutTimer = setTimeout("IdleTimeout()", expireTime);
        }
        function IdleTimeout() {
            localStorage.setItem("logoutMessage", true);
            window.location.href="{{url('logout')}}";
        }
        $(document).on('click mousemove scroll', function() {
            expireSession();
        });
        expireSession();
like image 38
Mian Roshan Avatar answered Oct 05 '22 18:10

Mian Roshan