Session Timeout

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

Create a session inactivity timeout that warns users when their session is about to expire.

This plugin helps web page owners by providing session timeout and inactivity timeout functionality. When a user requests a page with this plugin implemented their session will begin. After the specified session period, they will be notified that their session is about to timeout. At this point, they will have the option to remain logged in by clicking "Continue session", or signing out by clicking "End session now".

At anytime during the session, if the user remains idle for a specified amount of time, they will be notified that they're session is about to timeout. In either case, if the user does not respond to the timeout notification within a specified amount of time, once they click either "Continue session" or "End session now" they will be automatically redirected to the sign out page.

Use when

Working example

English example

French example

How to implement

  1. Add a class="wb-sessto" element to the web page (only required once). You must set the logouturl, which controls where the user is redirected if their session expires: 
    <span class="wb-sessto" data-wb-sessto='{"logouturl": "http://app.gc.ca/logout"}'></span>
  2. Configure the plugin using the data-wb-sessto attribute of the element: 
    <span class="wb-sessto" data-wb-sessto='{
	"inactivity": 1200000, 
	"reactionTime": 30000, 
	"sessionalive": 1200000, 
	"logouturl": "./", 
	"refreshCallbackUrl": "./"
	"refreshOnClick": true,
	"refreshLimit": 200000}'></span>

Configuration options

All configuration options of the plugin are controlled by the data-wb-sessto attribute. Any configuration parameter that accepts a time value, can optionally have the time unit specified (e.g. "100 ms").

Supported time units are:

Option Description How to configure Values
inactivity Sets the inactivity timeout. Once this expires, the plugin's modal dialog will appear and prompt the user to continue or end their session. Provide a numeric value, optionally with a time unit appended.
None (default):
Default inactivity period is 20 minutes.
Numeric value:
Treated as a millisecond value.
String numeric value with time unit appended (e.g. "100 s"):
Treated as a time value in the provided unit.
reactionTime Sets the period of time the user has to perform an action once the modal dialog is displayed Provide a numeric value, optionally with a time unit appended.
None (default):
Default reation time is 3 minutes.
Numeric value:
Treated as a millisecond value.
String numeric value with time unit appended (e.g. "100 s"):
Treated as a time value in the provided unit.
sessionalive Sets the period of time before an ajax request is made to the server to determine if the session is still alive. A refreshCallbackUrl must be specified for this to work. Provide a numeric value, optionally with a time unit appended.
None (default):
Default session alive time is 20 minutes.
Numeric value:
Treated as a millisecond value.
String numeric value with time unit appended (e.g. "100 s"):
Treated as a time value in the provided unit.
logouturl URL that users are sent to when their session has expired. Provide a URL.
None (default):
Default logout URL is "./"
String URL:
The URL to redirect to once the session has expired.
refreshCallbackUrl URL used to perform an ajax request. Must be a viewless page that returns "true" to indicate session is still valid. Provide a URL whose response to a POST request is "true" if the session is still valid. Any other characters in the response will mark the session as expired.
None (default):
No ajax request will be performed.
String URL:
An ajax request (POST) will be made to the URL.
refreshOnClick Determines if clicking on the document should reset the inactivity timeout and perform an ajax request (if a refreshCallbackUrl has been specified). Provide a boolean true/false value.
None (default):
true (refresh on click is turned on)
Boolean:
true/false.
refreshLimit Sets the amount of time that must pass before an ajax request can be made. Provide a numeric value, optionally with a time unit appended.
None (default):
Default refresh limit is 2 minutes.
Numeric value:
Treated as a millisecond value.
String numeric value with time unit appended (e.g. "100 s"):
Treated as a time value in the provided unit.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-sessto Triggered manually (e.g., $( ".wb-sessto" ).trigger( "wb-init.wb-sessto" );). Initializes the plugin and starts the session and inactivity timeouts. Note: the session timeout plugin will be initialized automatically unless the .wb-sessto element is added after the page has already loaded.
wb-ready.wb-sessto (v4.0.5+) Triggered automatically after the Session timeout plugin initializes. Used to identify when and where the Session timeout plugin initializes (target of the event). 
$( document ).on( "wb-ready.wb-sessto", ".wb-sessto", function( event ) {
});
$elm.on( "wb-ready.wb-sessto", function( event ) {
});
inactivity.wb-sessto Triggered manually and by the plugin (e.g., $( ".wb-sessto" ).trigger( "inactivity.wb-sessto" );). Causes the modal dialog to appear and prompt the user to continue or end their session. This event is triggered automatically when the inactivity timeout expires.
keepalive.wb-sessto Triggered manually and by the plugin (e.g., $( ".wb-sessto" ).trigger( "keepalive.wb-sessto" );). Causes an ajax request to be made (if a refreshCallbackUrl has been specified). This will alert the user that their session has expired if the refreshCallbackUrl response is not "true".
reset.wb-sessto Triggered manually and by the plugin (e.g., $( ".wb-sessto" ).trigger( "reset.wb-sessto" );). Restarts the inactivity and keepalive timeouts.
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Note: when manually triggering the inactivity, keepalive and reset events, you must pass the data-wb-sessto attribute as a second argument:

// Get a reference to the session timeout element and its data-wb-sessto attribute	
var $element = $( ".wb-sessto" ),
    settings = $element.data( "wb-sessto" );
	
// Trigger the event on the element
$element.trigger( "reset.wb-sessto", settings );

Source code

Session timeout source code on GitHub

Date modified: