Session Timeout Warning Plugin With jQuery - timeoutWarning

File Size: 4.54 KB
Views Total: 1854
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Session Timeout Warning Plugin With jQuery - timeoutWarning

This is a jQuery and cookies-based session timeout warning plugin that displays a warning message when the session is about to expire and allows your users to log out or keep the session alive. Requires the js.cookie library to handle browser cookies.

How to use it:

1. Load the needed jQuery and js.cookie libraries in the html file.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>

2. In this example, we're going to use the Bootbox plugin to provide the session timeout alert (OPTIONAL).

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

3. Load the jQuery timeoutWarning plugin's script after jQuery.

<script src="jquery.timeoutWarning.js"></script>

4. Initialize the plugin and config the Session Timeout Warning with the following options.

$.timeoutWarning({

  // cookie name where the session expiration is stored
  cookieName              : 'sessionExpiresOn',     

  // called when the session expires
  sessionExpired          : reload,          

  // time to wait after the session expires before calling the `sessionExpired` callback function
  timeSpanAfterExpiration : 2000,                   

  // url to send the ping to remain in the session
  pingUrl                 : '/',                  

  // how long the session lasts  
  sessionTimeout          : 15 * 60 * 1000, 

  // time before the session expires to display the warning message
  notifyBefore            : 30 * 1000,   

  // schedule the session timeout warning when the `init` method is executed           
  enabled                 : true,                   

  // reset the session timeout when the ajaxComplete event is fired
  resetOnAjaxComplete     : true,                   

  // alert function
  alert                   : bootboxAlert || alert,  

  // custom warning message
  warningMessage          : 'For your protection, you are about to be automatically logged out.' +
                          (bootboxAlert ? '<br>' : '\n') +
                          'If you would like to remain in the session, click OK below.'
                          
});

This awesome jQuery plugin is developed by aprofetb. For more Advanced Usages, please check the demo page or visit the official website.