Plugin overview

After a set amount of idle time, a Bootstrap warning dialog is shown to the user with the option to either log out, or stay connected. If "Logout" button is selected, the page is redirected to a logout URL. If "Stay Connected" is selected, the dialog closes and the session is kept alive. If no option is selected after another set amount of idle time, the page is automatically redirected to a set timeout URL.

Idle time is defined as no mouse, keyboard or touch event activity registered by the browser.

As long as the user is active, the (optional) keep-alive URL keeps getting pinged and the session stays alive. If you have no need to keep the server-side session alive via the keep-alive URL, you can also use this plugin as a simple lock mechanism that redirects to your lock-session or log-out URL after a set amount of idle time.

Basic usage

Shows the warning dialog after one minute. The dialog is visible for another minute. If user takes no action (interacts with the page in any way), browser is redirected to redirUrl. On any user action (mouse, keyboard or touch) the timeout timer is reset. Of course, you will still need to close the dialog.

									
										$.sessionTimeout({
											message: 'Your session will be locked in one minute.',
											keepAliveUrl: 'keep-alive.html',
											logoutUrl: 'login.html',
											redirUrl: 'locked.html',
											warnAfter: 60000,
											redirAfter: 120000
										});
									
								

With onWarn Callback

Shows the "Warning!" alert after one minute. If user takes no action (interacts with the page in any way), after one more minute the browser is redirected to redirUrl. On any user action (mouse, keyboard or touch) the timeout timer is reset.

									
										$.sessionTimeout({
											redirUrl: 'locked.html',
											warnAfter: 60000,
											redirAfter: 120000,
											onWarn: function{
											    alert('Warning!');
											}
										});
									
								

With both onWarn and onRedir Callback

Console logs the "Your session will soon expire!" text after one minute. If user takes no action (interacts with the page in any way), after two more minutes the "Your session has expired!" alert gets shown. No redirection occurs. On any user action (mouse, keyboard or touch) the timeout timer is reset.

									
										$.sessionTimeout({
											warnAfter: 60000,
											redirAfter: 180000,
											onWarn: function{
											    console.log('Your session will soon expire!');
											},
											onRedir: function{
											    alert('Your session has expired!');
											}
										});
									
								

Full featured example

Demonstrates advanced example with all possible options. The plugin can be used as a session timeout warning or as a user idle timeout, ignoreUserActivity options makes the difference. If option is set to true, as long as the user is doing something on the page, he will never get a timeout. Otherwise he'll get a warning message without user interaction dependency.

									
										$.sessionTimeout({
											heading: 'h5',
											title: 'Session expiration',
											message: 'Your session is about to expire. Do you want to stay connected and extend your session?',
											keepAliveUrl: '/',
											keepAlive: true,
											keepAliveInterval: 5000,
											redirUrl: 'logoff.html',
											logoutUrl: 'login.html',
											warnAfter: 600000, //10 minutes
											redirAfter: 900000, //15 minutes
											keepBtnClass: 'btn btn-success',
											keepBtnText: 'Extend session',
											logoutBtnClass: 'btn btn-light',
											logoutBtnText: 'Log me out',
											ignoreUserActivity: false,
											onWarn: function{
											    console.log('Your session will soon expire!');
											},
											onRedir: function{
											    alert('Your session has expired!');
											}
										});