PHP Javascript Logout User After Inactivity

PHP Javascript Code Logout User After X Number Minutes Inactivity with Page Refresh

There is a lot of partial code online on how to use php or php and javascript to log a user out after inactivity. Most of the code is very basic and incomplete. For exampe code that will log the user out after x minutes of inactivity but not providing feedback of the logout.

The code below uses both Javascript and PHP to log a user out after x number of minutes inactivity which means ...

• No page loads.
• No mouse clicks.
• No key presses

Any regular code that utilizes a timer in Javascript is ineffective because when a browser tab loses focus, the browser throttles activity in that tab which causes the actual countdown of a timer via setInterval or setTimeout to slow down so the javascript and/or php code to log the user out is delayed beyond what is intented.

While this code may seem fairly lengthy, it works perfectly and is immune to innactive browser tab throttling. Also, this works on all tabs if there are multiple tabs to your website open.

The following Javascript and PHP code to log a user out after x number of minutes inactivity ...

• Creates a thread which is independant of browser tab focus so timers are not impacted in any way.
• When the number of minutes of inactivity times out a notification via ajax is sent to the server which ...
• Clear the session variables and cookies.
• Sends an alert to the user to notify them of the intactivity timeout which they will see next time they return to their device.
• Refreshes the web page so any html content that is suppose to be shown/hidden when logged is properly displayed.

At the very top of your php pages should be in a separate php file ie session-start.php

# timeout value in seconds 60 sec = 1 min * number min # in this example, 10 minutes inactivity timeout $_SESSION["timeout_minutes"] = (60 * 10); # set php session and cookie configuration 'lifetime' is overridden ini_set("session.gc_maxlifetime", $_SESSION["timeout_minutes"]); ini_set("session.cookie_lifetime", $_SESSION["timeout_minutes"]); # start the session session_start(); # new session id for security session_regenerate_id(true); # holds the boolean value of whether a user is logged in. If not # set to false. Set to true on successful user login if (!isset($_SESSION["loggedin"])) { $_SESSION["loggedin"] = false; }

In your Javascript code at the bottom of the page(s) you want auto logged out of after x number minutes inactivity ...

let thread = null; function reset(event) { // web worker supported in this browser if (typeof(Worker) !== "undefined") { // pass your php session variable of being logged in to GLOB_loggedIn // this would be set to TRUE when the user successfully logs in let GLOB_loggedIn = <?=$_SESSION["loggedin"]?>; if (GLOB_loggedIn) { // create the new thread/worker if it does not already exist if (!thread) { // create new thread object and append random query to // ensure fresh not cached version of thread.js file thread = new Worker("path-to-thread.js?nocache=" + new Date().getTime()); } // send message to thread.js thread.postMessage ({ type: "reset", url: "url-to-php-logout.php", expire: <?=$_SESSION["timeout_minutes"]?> }); // path-to-thread.js is replying back with message thread.onmessage = function(event) { const data = event.data; let msg = ""; if (data.type === "error") { msg = ("thread.onmessage error: " + data.message); } else if (data.type === "response") { // if response text starts with js: we know its js code to run if (typeof data.message === "string" && data.message.substring(0, 3) == "js:") { let jscode = data.message.substring(3, data.message.length), script = document.createElement("script"); // sets the code of the script object script.textContent = jscode; // adds the javascript code to the current web page document.body.appendChild(script); } msg = ("thread.onmessage response: " + data.message); } //=> else if (data.type === "response") console.log(msg); }; //=> thread.onmessage = function(event) } //=> if (GLOB_loggedIn) } else // web workers not supported in this browser { console.log("Web Workers are not supported in this browser."); } //=> if (typeof(Worker) !== "undefined") } // function reset() // reset inactivity timer on page load reset(); // reset inactivity timer on page click window.addEventListener("click", reset); // reset inactivity timer on keypress window.addEventListener("keydown", reset); // if you want to reset timer on mousemove window.addEventListener("mousemove", reset);

The following code goes in your path-to-thread.js file

let GLOB_timer = null, GLOB_phpUrl, GLOB_timeout; /* ------------------------------------------------------- message is being sent from our main webpage, event contains the following object data: thread.postMessage ({ type: "reset", url: "url-to-php-logout.php", expire: <?=$_SESSION["timeout_minutes"]?> }); so event properties are: - event.data.type - event.data.url - event.data.expire ----------------------------------------------------- */ onmessage = function(event) { /* from the main page one of these events happened: - page load - mouse click - keypress which tells us the user is interating with the web page so cancel previous setTimeout and start over */ if (event.data.type === "reset") { // check if GLOB_timer is valid before trying to clear it if (GLOB_timer !== null) { clearTimeout(GLOB_timer); GLOB_timer = null; } // start a new setTimeout along with the function logOut() // which will send message to php/server to log out if/when // the setTimeout is fired GLOB_phpUrl = event.data.url; GLOB_timeout = (event.data.expire * 1000); GLOB_timer = setTimeout(function(){logOut(GLOB_phpUrl);}, GLOB_timeout); // start a new timer } }; function logOut(phpUrl) { let AJ = ajaxObject(); if(!AJ) { // message of failure to create ajax object sent to main page postMessage ({ type: "error", message: "failed creating ajax in [worker.js : else if (event.data === 'inactive')]" }); return false; } // FormData object is a way of sending data to php server // so server/php can treat it just as if form was submitted let FD = new FormData(); FD.append("task", "inactivity_timeout"); // for (const [key, value] of FD){console.log(key, value);} return; // send the notification to log out to php/server AJ.open("POST", phpUrl, true); AJ.send(FD); AJ.onload = function() { if (AJ.status != 200) /*12/9/2024:3:19pm*/ { postMessage ({ type: "error", message: "Ajax error [worker.js : if (AJ.status != 200) /*12/9/2024:3:19pm*/]" }); } //=> if (AJ.status != 200) // ajax response text let response = JSON.parse(AJ.responseText); postMessage ({ type: "response", message: response }); AJ.abort(); AJ = null; }; //=> AJ.onload = function() AJ.onerror = function() { let errText = ""; if (AJ.status === 0) { errText = "Network error or request failed before completion."; } else { errText = "AJ.onerror: Error with status code " + AJ.status + "\r\n"; errText += "Error message: " + AJ.statusText; if (AJ.responseText) { errText += "\r\nResponse Text: " + AJ.responseText; } } // Send the error message to the main thread postMessage ({ type: "error", message: errText }); AJ.abort(); AJ = null; }; //=> AJ.onerror = function() } //=> function logOut(phpUrl) /* ------------------------------------------------- create ajax object so we can communcate with web server should we need to log out user due to inactivity ---------------------------------------------- */ function ajaxObject() { var aj; try{aj = new XMLHttpRequest();} catch (e) { try{aj = new ActiveXObject("Msxml2.XMLHTTP");} catch(e2) { try{aj = new ActiveXObject("Microsoft.XMLHTTP");} catch(e3){return false;} } } return aj; }

In your url-to-php-logout.php file ...

if ($_SERVER["REQUEST_METHOD"] == "POST") { // Check if the POST variable "task is set and not empty if (isset($_POST["task"]) && ($_POST["task"] === "inactivity_timeout")) { // call function that clears and unsets the session clearSession(); // notify user of being logged out via alert $response = "js:alert('For your security, you have been logged out due to inactivity');"; // refresh/ reload page so logged out html code thats suppose to display displays $response .= "window.location.replace(window.location.href)"; echo json_encode($response); } exit(); } // => if ($_SERVER["REQUEST_METHOD"] == "POST") function clearSession() { if (session_status() == PHP_SESSION_NONE) { // start the session if not already started session_start(); } // Clear session variables session_unset(); // Destroy the session session_destroy(); // Clear any session data $_SESSION = array(); }