idleTimeout – jQuery Idle Session Auto Timeout with Prompt
Update: I just added a CC license (see below) and renamed this project idleTimeout
I just finished the first draft of idleTimeout - jQuery auto prompt / logout / session expire plugin. It is fairly simple, but seems to work well for my needs.
Installation is simple: grab a copy of jquery-idleTimeout.js , include it in your page, and activate it.
/** Run with defaults **/ $(document).ready(function(){ $(document).idleTimeout(); });
/** With Optional Overrides **/ $(document).ready(function(){ $(document).idleTimeout({ inactivity: 30000, noconfirm: 10000, sessionAlive: 10000 }); });
Note: This uses the jQuery UI dialog, and UI themes. I am working on a non UI version – but it may be a while
I have an active demo here – it is running on a 30 second timer for the logout, and if you open firebug you will see the keep alive firing every 10 seconds.
The plugin has a few configuration items so you can customize it for your own needs…
- inactivity: 1200000 //20 Minute default (how long before showing the notice)
- sessionAlive: 300000, //5 minutes default how often to hit alive_url, we use for our ajax interfaces where the page doesn’t change very often. This helps to prevent the logout screen of your app appearing in ajax callbacks. If you set this to false it won’t send off.
- alive_url: ‘/path/to/your/imHere/url’, //send alive ping to this url
- redirect_url: ‘/js_sandbox/’, //Where to go when log out
- click_reset: true, //Reset timeout on clicks (for ajax interface) – resets the sessionAlive timer, so we are not hitting up your app with alive_url if we just did an ajax call for another reason.
- logout_url: ‘/js_sandbox/timedLogout/index.html’ //logout before redirect (url so you can completely destroy the session before redirecting to login screen)
idleTimeout by Phillip Palmieri is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Please let me know if you are using it, or if you have any ideas to make it better!
Thanks,
Phil
Nice. Thank you! Overall, exactly what I was looking for!!
Two questions…
I am having is understanding the use of sessionAlive. What kind of function I should put in alive_url?
Also
For redirect function
var redirect = function()
{
if(opts.logout_url)
{
$.get(opts.alive_url);
}
window.location.href = opts.redirect_url;
}
may be better to be
var redirect = function()
{
if(opts.logout_url)
{
$.get(opts.logout_url);
}
window.location.href = opts.redirect_url;
}
?
Your right! – typo on my part, that should be hitting up the logout_url before the redirect. – updating the js file now.
the aliveUrl is a url that they system will hit every X minutes to keep your serverside session alive.. like site.com/still_here – this way you can update your server session and make sure next tim eyou click you dont a login box in your return.
Ah! Thank you so much for your quick response. alivrUrl makes sense now.
I appreciate you sharing this script!
This is awesome – worked out of the box for me in an admin tool situation. You may want to fix your example because it has a permissions problem.. cheers!
@ian thanks – it was still setup for my local development setup… i just switched it to live, and also shortened the time on the demo.
Correct me if I’m wrong but looking at it again – this code seems to time out the user after out after 20 minutes even if he/she is busily tapping away at an ajax interface. What is needed is some sort of response from the alive_url that the session is still valid – but this would give no warning of the session ending – or a way to reset the inactivity timer when an ajax call is made elsewhere on the page…
@ian, i think i follow you, but….
It’s not tied to the server session at all, the ping is just so that your backend can know the user is still there (which should keep the session alive on its own) this prevents the system from ending the user session and returning a login/end screen on the ajax callback. This JS is meant to just force the user to push to the logout if they don’t interact with the front-end. The click_reset resets the 20 minute timer on each click and, if the user is clicking, that will keep the system session alive as well.
I am looking for a script that I can use with a PHP/MySQL website. I do run other jQuery stuff however. Will this script unset the session variables? Thanks!
My website is predominantly PHP/MySQL although I use some jQuery. Will this script unset the PHP session variables?
It shouldn’t effect your backend at all
OK so how can it log someone out if it doesn’t unset the PHP session variables?
All it is doing is hitting a logout URL that you set to match the equivelant of a normal logout link… Like account/logout – this is where your server side (php in your case) would do the session destroy so that when the script redirect the user to a login page they are back to square one.
Phil, many thanks. It\’s a great script, any idea when you might be enabling some customization on the UI?
Phil, I can’t seem to get this working. I have saved the js file and included it on a test page but nothing is happening. This is how the variable group looks…
var defaults = {
inactivity: 30000, //20 Minutes
noconfirm: 10000, //10 Seconds
sessionAlive: 10000, //30 seconds
redirect_url: ‘../../index.php’,
click_reset: true,
alive_url: ‘../../menu.php’,
logout_url: ‘../../endSession.php’
}
any problem with this?
Hey,
As for customizing, you can tweak the copy in the plugin, but i pretty much left it 100% up to your UI theme.
I also updated the post with instructions on activating the plugin..
Phil
Phil, I have it working now…almost. The logout appears to work but I get a 404 message saying that it can’t find the redirect page (index.php). I have tried writing the URLs in full, in part and as root-relative. Are the URL paths relative to the location of the js file?
Update – the logout is working well, but for reasons unknown the logout warning dialogue simply doesn\’t appear!
do you have it up in a publicly accessible place? – shoot me an email, and i’ll see if i can help you out.
Phil,
apologies for delay in replying, thanks for following through. As you can see the website I am trying to incorporate your script into is a secure company intranet. The nature of the site contents is such that users are very likely to dip in and out of using it but are likely to keep logged in so I am keen to get things moving. Perhaps we could take this off-line and I’ll provide you with a login.
Thanks,
Keith
Phil, I am now using the script in a live environment. However, although the script redirects to the login page it does not appear to be redirecting to the logout page first, where I have all the PHP code to unset the session variables.
Instead of using a true false for click reset how about using a list of events…
var defaults = {
inactivity : 1200000, //20 Minutes
noconfirm : 90000, //90 Seconds
sessionAlive : 600000, //10 Minutes
redirect_url : ‘/’,
alive_url : ‘/’,
logout_url : ‘/’,
events : ‘keydown mousedown mousemove’
}
then instead of:
if(opts.click_reset) {
$(document).bind(‘click’, start_liveTimeout);
}
use:
//assign appropriate event handlers for resetting timeout
$(document).bind($.trim((opts.events + ‘ ‘).split(‘ ‘).join(‘ ‘)), start_liveTimeout);
How about a way to check on the status of a timeout?
Maybe I’m missing something but how about a way to submit contributions other than posting them here?
If i keep getting as much traffic on it, i will move it to google code.
Just wondering what license this is released under. For our purposes GPL or the like might be necessary. Works like a charm in our code BTW. This solves a problem we have been stewing over for about a month. Thanks.
I am registering it as Creative Commons Share Alike
Does this not work in aspx pages? I tried using this but it works if i implement this in htm page. When i put this in aspx page, it doest seem to work. Am i doing something wrong here?
It’s all client-side, so it shouldn’t matter what you are using on the server. What do yo mean when you say put it ‘in’ an aspx page?
I think there is a problem with this.
1. Session timeout=20 minutes
2. idleTimeout shows when 5 minutes is left.
Now, if I just move the mouse or type some text in a box it does not reset the session on the server. so…10 minutes later I leave the desk, session has 10 minutes left but the idleTimout popup will now show for another 15 minutes. Meaning the session will have already expired.
What do I do?
Hi,
Not sure i follow you 100%.. you are saying the click_reset is not happening on each click? or it is working, but your screen isnt reloading (meaning the screen stays up, but your session is expired)?
the click_reset is not relevant with this issue because all the user did in this scenario is move the mouse which reset the jquery timer to another 20 minutes, but the move of the mouse did not reset the server, so after 5 minutes the server times out but no new notification.
Lets say I just keep moving the mouse on the web site, no clicks, postbacks, nothing else. The moving of the mouse resets the jquery timer, that is what I am refering to because the moving of the mouse does not reset the session on the server. So, say the user spends 10 minutes filling out a form then spends another 10 minutes just looking it over, the last 10 minutes will not reset the server so the count down will be set to 20 minutes but the server will have only 10 minutes left in it’s session. user go away for another 10 minutes, the session has timedout but no notification(not for another 10 minutes)
Not sure that makes any sense at all but thats what is going on, I have since changed the way I use the code so I have a workaround where I do not use mouse or click events.
Hi – Can you clarify the following pleas:-
I don\’t get alive_url and SessionAlive?
Our production web server times-out after 60 mins, which means if you open a page and don\’t do a submit within 60 mins, you\’re logged out. I want to show a dialogbox at 40 mins of inactivity, so I set parameter inactivity to 2400000. After the dialogbox shows, I want it to stay up for 20 mins, so I set noconfirm to 20 mins = 1200000. All clear so far. What I don\’t get is, how can clicking button \’Stay logged in\’ in the dialogbox at at 58 mins have the desired effect of not loggin me out 2 minutes later? Does pinging keep a session alive?
Why have you removed my comment?
Your instructions are not clear. I don’t want to trawl through the code. That’s the whole point fo jQuery!
Hi Andrew, I did not remove your comment… I did however, Not post the duplicate posting.. I did also take a day or two to approve then pending post as well.
I am sorry my documentation is not your standards, however i don’t equate 100 lines (including comments btw) trawling… Plus, I do believe the whole point of jQuery is that it is open source, and well… community driven/powered… So, no i do not have a staff of customer service staff on hand to explain everything to you.
To answer your question, hopefully more clear than in the post
When you click ‘stay logged in’ it fires of because alive_url is optionally bound (with click_reset) to click event and also because it sends alive_url a request when you click stay logged in.
I hope this helps you out.
after including jquery-idleTimeout.js file
i’m getting error like this
jQuery is not defined
})(jQuery);
waiting for reply
Might be a dumb question, but do you have the jQuery library loaded?
I have an issue. While the modal_popup is in front , I click on the background (on IE) and then move modal_popup from the center. After 5 secs (thats my inactivity period), a new modal_popup comes back on the center. Shouldnt we open new window only when there is no other modal_popup screen?
Please advise
Actually, it should be using the same instance – so there wouldn’t be more than one ever.. Or at the very least close the active modal if there is one, then open the new one (resetting the clock)
Phil, thank you for this excellent peice of work, have got it working locally and will have it working live very soon.
Hi,
Great script. I had to make a modification to it because it seemed that whenever the alert would come up, you could click on the modal area and the timer would reset but the alert would stay open. Once the timer expired again, a new alert would be opened in addition to the previous one that was already opened.
I added this to the beginning on the logout function:
$(document).unbind(\’click\’, start_liveTimeout);
I then added this to the callback function of the \"Stay Logged In\" button:
$(document).bind(\’click\’, start_liveTimeout);
Anyway, great script again. Just thought I would contribute.
Good catch – thanks!
Phil
Hello Phil,
I’ve discovered your idleTimeout jQuery script, which almost satisfy my needs. Good job !
I’ve slightly modified it to :
- add 3 options : “alertButton” to change text in the button of the dialog, “alertTitle” to change the title of the dialog and finally alertText to change the content of the message
- allow not using any of the 3 urls (redirect_url, alive_url, logout_url); I personaly don’t use alive_url currently, and “/js_sandbox/” doesn’t match well with my backend
In respect of the license, I want to send you my revision, just send me an email if you want to (I’ve searched for your email on the blog without success).
Hi Phil,
Thanks for this plugin, it works very well.
I\’ve made a couple of changes and thought I\’d share what I changed.
First, I\’ve removed the opts.redirect_url because I think PHP can do all of the session destroying/redirecting for me and it changes the jQuery from this –
var redirect = function()
{
if(opts.logout_url)
{
$.get(opts.logout_url);
}
window.location.href = opts.redirect_url;
}
to the much simpler–
var redirect = function()
{
window.location.href = opts.logout_url;
}
This is really just a preference, I think. Secondly, I\’ve changed the modal call a bit. I noticed in the buttons declaration there was a callback to close the modal and then ping the sessionAlive url. The problem arose that when you click the \"X\" to close the modal in the title area the sessionAlive url was not pinged and the modal would not pop back up. So, as a remedy I\’ve added the \"close\" even with a call back to the stay_logged_in() function. This way it doesn\’t matter if they hit the button or the \"X\", it will still reset appropriately. Here\’s what the code was–
$(modal).dialog({
buttons: {\"Stay Logged In\": function(){
$(this).dialog(\’close\’);
stay_logged_in();
}},
modal: true,
title: \’Auto Logout\’
});
Here\’s what I changed it to–
$(modal).dialog({
buttons: {\"Stay Logged In\": function(){
$(this).dialog(\’close\’);
}},
modal: true,
title: \’Auto Logout\’,
close: function(event, ui) {
stay_logged_in();
}
});
Thanks,
This looks good –
I will be moving this code to google code as soon as i can, the account is already there – Also, i am working on an updated version that gives more controls over the UI – one option being to not use jQuery UI but just a simple confirm, as well as using facebox.
Phil