idleTimeout – jQuery Idle Session Auto Timeout with Prompt

## Updated – Moved to Github for bugs & pull requests ##

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.

session-timeout

* NEW – Moved to github… Fork away for updates *

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)

Creative Commons License
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

Be Sociable, Share!

120 Comments

  • vani
    July 26, 2011 - 1:22 am | Permalink

    this plugin is not working on ie 6, is there any fix for it.
    it seems like the popup doesnt come up, and the session timeout does not redirect to login page.

    • July 26, 2011 - 7:40 am | Permalink

      Nope, sorry – if you come up with one let me know, i’ll add it.. but overall, not even going to attempt to make it work in IE6

      • Robert
        March 6, 2012 - 1:08 pm | Permalink

        hey thank you for the code..i was just trying to make something like this…it works, the only thing i need above this is to check if the user left the page..i need this for a logout script…thank you in advance, if you have just an idea please write to my email…

  • Andre
    August 3, 2011 - 6:42 am | Permalink

    Very nice! Is it possible to change the dialog box message? I did change the “var modal = “You are about to be signed out.”;” but the message still displays the ‘due to inactivity”?

    Thanks in advance.

  • Dom
    August 3, 2011 - 6:22 pm | Permalink

    Hi Phil, thanks for sharing this plugin. Request permission to use the plugin and modify it a little bit to suit my requirements. Regards.

    • August 22, 2011 - 6:58 am | Permalink

      go for it, if you make some good modifications, please share – ill see about incorporating back into it.

  • nav
    August 22, 2011 - 12:59 am | Permalink

    can you add an option that allows us to configure if the modal dialog box should be shown? we want to automatically logoff without showing and popup.

    • August 22, 2011 - 6:57 am | Permalink

      hi nav, just comment out

      $(modal).dialog({
      buttons: {“Stay Logged In”: function(){
      $(this).dialog(‘close’);
      stay_logged_in();
      }},
      modal: true,
      title: ‘Auto Logout’
      });

  • praveen
    September 29, 2011 - 2:05 pm | Permalink

    Hi,
    may i know where is the updated post with instructions on activating the plugin. and also instructions how to use this.
    Not able to get pop up window with message.

    Thank you
    Praveen.

  • Fen Chen
    October 3, 2011 - 5:37 pm | Permalink

    Hi Phi, thanks for sharing. can i have permission to use this plugin? Thanks again.

  • Azhar
    October 7, 2011 - 3:25 am | Permalink

    How can i change color of box? or it use image instead of color code?

  • Juan C
    October 12, 2011 - 5:39 pm | Permalink

    Hi,

    I have a question about the “inactivity” option. Does this get reset only when users are typing on the browser or moving the mouse or actually when the users access a server resource? I am looking for the latter option. I don’t want to be pinging the server when the user moves the mouse or types every time. Thanks.

    • Nathan
      May 3, 2012 - 12:11 am | Permalink

      Hi,

      Just found out that it only get reset only when someone clicks anything on the document object, but wont reset on any mousemoves or keypress.. to fix this at line 92 I just changed the line to:

      $(document).bind(‘click mousemove keypress’, start_liveTimeout);

      where it also included keypress and mousemoves., hope this helps..
      And I also used this on CI and it works perfectly great!
      Thanks for the great plugin though!

      Nathan.

  • lit
    November 11, 2011 - 1:40 am | Permalink

    This is very interesting but i have a question, can i use it with codeigniter? Thanks.

    • November 11, 2011 - 7:30 am | Permalink

      of course… its server-side agnostic… plus, i use codeigniter with it all the time.

      • lit
        November 11, 2011 - 8:43 pm | Permalink

        Thanks phil, I got it working now.. but i have another question.. Is it possible to only enable the idle checking in a specific page? thanks!

  • BM
    January 10, 2012 - 11:26 am | Permalink

    Hi,
    I am getting error “Microsoft Jscript runtime error: object does n’t support this property or method” at the below code.

    $(modal).dialog({
    buttons: {“Stay Logged In”: function(){
    $(this).dialog(‘close’);
    stay_logged_in();
    }},
    modal: true,
    title: ‘Auto Logout’
    });

    Any help greatly appriciated!

  • m841lr
    January 20, 2012 - 4:24 am | Permalink

    It is very good, thanks.
    Suggestion: How about popup a Login Box and dim the page when timeout. After relogin, back to the page for continous work.

  • January 20, 2012 - 1:54 pm | Permalink

    Hello Phil,

    I have a question. Does it strictly need jQuery UI? I would like not to put all of it just for this.

    Let me know please.

    Marc

  • dc1777
    February 16, 2012 - 11:08 am | Permalink

    good day,
    Would it be possible to use this plugin even without defining all the default variables (url’s)?
    Can i just comment out the value for the alive_url and redirect_url? since the assigned action for the logout_url has a mapped url when invoked.

    Thank you..

  • DipRach
    February 21, 2012 - 3:48 pm | Permalink

    I am using same approach it’s working fine for apsx page but jquery fancybox not working. Does anybody has idea about this?

  • Matthew
    March 8, 2012 - 4:04 pm | Permalink

    This is great!

    Works perfectly and even works with my existing jQuery theme!

    Thanks!

  • borg
    March 14, 2012 - 7:04 am | Permalink

    it doesn’t work with me.

    where to put this ?
    /** Run with defaults **/
    $(document).ready(function(){
    $(document).idleTimeout();
    });

    /** With Optional Overrides **/
    $(document).ready(function(){
    $(document).idleTimeout({
    inactivity: 30000,
    noconfirm: 10000,
    sessionAlive: 10000
    });
    });

    inside the head?

    tell me how to install it. thanks..

  • JasonParallel
    April 21, 2012 - 10:26 pm | Permalink

    Might want to set cache to false on the keep alive get request so evil ie does not stop calling the keep alive address

  • Asanka Perera
    April 27, 2012 - 3:35 pm | Permalink

    Request permission to use the plugin

  • Brenda
    May 1, 2012 - 11:51 am | Permalink

    I am extremely new at jquery and this looks like exactly I am looking for to use in the asp.net application. Sorry my lack of knowledge. I have added jqueryidleTimeout.js to my Scripts folder and included the tag in my asp.net page, but it is not working and I am using IE 8. I am pretty sure my problem is, in your instructions after adding the js file, is “activate”. I do not know what you mean my activated.

  • Ravi
    May 10, 2012 - 8:10 am | Permalink

    Phil,
    Thanks for the awesome plugin :)
    I did a modification to the code. I added another option to specify whether the dialog has to be shown. I have set the default value to true. If the person using it sets it to false, redirection will happen without any prompt. If you would like to have a look at the change I made, please send me your e-mail ID. I will share the code with you.

    I did this modification as I needed it in an application.

    • May 10, 2012 - 8:32 am | Permalink

      Hi Ravi,

      Thanks – I just moved it over to Github https://github.com/philpalmieri/jquery-idleTimeout

      If you would like, please fork and send a pull request.

      • Ravi
        May 14, 2012 - 12:36 am | Permalink

        Hi Phil,
        I made the changes and committed the updated code to github. It took me this long as I am new to github. You can view my changes here.

      • May 14, 2012 - 7:12 am | Permalink

        Hi Ravi,

        almost there… it looks like you just created a new repo and added changed.. If you go to my repo, fork it, then push your changes to your fork.. you can then send me a pull request and i can have Git merge your changes into mine.

  • Ravi
    May 14, 2012 - 8:23 am | Permalink

    I have comitted he change and added a comment there. Just open the following link and check if you are able to merge the changes. I did not create a new repo. At the following page, it is showing that I forked it from your repo.
    https://github.com/sravikiran/idleTimeout/commits/master

  • Ravi
    May 14, 2012 - 9:57 am | Permalink

    Ohh!
    Actually, he too used your code and he had put the link of this blog post in the header comment.
    I will make the changes to your plugin in 3-4 hours and commit it. I can’t do it right now as I am in office.

    • Ravi
      May 14, 2012 - 1:49 pm | Permalink

      Hi Phil,
      I committed the code to your repo now. Please check and confirm.
      Hope, I did not make any mistake this time.
      Thanks for bearing and supporting me.

      • May 14, 2012 - 2:42 pm | Permalink

        Hi,

        I made a small change and just updated my master branch.. In the future, after you fork, make your changes, then click ‘send pull request’ – that will allow me to merge it.

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    * Copy This Password *

    * Type Or Paste Password Here *

    7,553 Spam Comments Blocked so far by Spam Free Wordpress

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>