It's true that multiple tabs that share the session will always prove to be a problem. But if you don't care about that, I've got a basic version of this working. (Note: This is adapted from https://arjunphp.com/detect-user-is-active-or-idle-on-web-page-using-jquery so credit where credit is due.) Put this code into a javascript file by itself:
// autologout.js
$(document).ready(function () {
const timeout = 900000; // 900000 ms = 15 minutes
var idleTimer = null;
$('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
clearTimeout(idleTimer);
idleTimer = setTimeout(function () {
document.getElementById('logout-form').submit();
}, timeout);
});
$("body").trigger("mousemove");
});
Change the timeout value to whatever you want. Then in your view you can choose to include it or not based on your user auth status or roles.
This treats any interaction with the page -- even just moving the mouse -- as proof that the user is still there, which for my use case is really the point. It does time out if the user is on a different tab than this one.
It's just a full logout at the moment but I likely add in a flash message that tells them they've been logged out due to inactivity and maybe display a modal countdown prior to actually logging them out.
@siangboon - A meta refresh won't work because you have to actually POST submit the "#logout-form" form element so it passes the CSRF protection. Otherwise, you get an error.
@yusuf128 - Don't know if that will work for you but I thought I'd throw it out there.