A bank style session timeout example using jQuery, Bootstrap, and Flask
This is an example that uses JavaScript to display a session timeout warning modal 10 minutes before session expiration. It also resets the session expiration whenever the user clicks the mouse. It uses JavaScript, jQuery, and Bootstrap on the frontend and Python, Flask, Flask-Login, and WTForms on the backend.
- Mouse clicks anywhere on the page ping the server at a maximum frequecy of once per minute and reset the session expiration.
- 10 minutes before the session expiration, a warning modal is displayed with two buttons: "Log out" and "Stay Logged In".
- If the user clicks "Stay Logged In" the session expiration is reset.
- If the user clicks "Log out", the user is logged out.
- If the user does nothing for 10 minutes, the user is logged out and displayed a message that the session timed out.
Here is the JavaScript (session-monitor.js):
sessionMonitor = function(options) {
"use strict";
var defaults = {
// Session lifetime (milliseconds)
sessionLifetime: 60 * 60 * 1000,
// Amount of time before session expiration when the warning is shown (milliseconds)
timeBeforeWarning: 10 * 60 * 1000,
// Minimum time between pings to the server (milliseconds)
minPingInterval: 1 * 60 * 1000,
// Space-separated list of events passed to $(document).on() that indicate a user is active
activityEvents: 'mouseup',
// URL to ping the server using HTTP POST to extend the session
pingUrl: '/ping',
// URL used to log out when the user clicks a "Log out" button
logoutUrl: '/logout',
// URL used to log out when the session times out
timeoutUrl: '/logout?timeout=1',
ping: function() {
// Ping the server to extend the session expiration using a POST request.
$.ajax({
type: 'POST',
url: self.pingUrl
});
},
logout: function() {
// Go to the logout page.
window.location.href = self.logoutUrl;
},
onwarning: function() {
// Below is example code to demonstrate basic functionality. Use this to warn
// the user that the session will expire and allow the user to take action.
// Override this method to customize the warning.
var warningMinutes = Math.round(self.timeBeforeWarning / 60 / 1000),
$alert = $('<div id="jqsm-warning">Your session will expire in ' + warningMinutes + ' minutes. ' +
'<button id="jqsm-stay-logged-in">Stay Logged In</button>' +
'<button id="jqsm-log-out">Log Out</button>' +
'</div>');
if (!$('body').children('div#jqsm-warning').length) {
$('body').prepend($alert);
}
$('div#jqsm-warning').show();
$('button#jqsm-stay-logged-in').on('click', self.extendsess)
.on('click', function() { $alert.hide(); });
$('button#jqsm-log-out').on('click', self.logout);
},
onbeforetimeout: function() {
// By default this does nothing. Override this method to perform actions
// (such as saving draft data) before the user is automatically logged out.
// This may optionally return a jQuery Deferred object, in which case
// ontimeout will be executed when the deferred is resolved or rejected.
},
ontimeout: function() {
// Go to the timeout page.
window.location.href = self.timeoutUrl;
}
},
self = {},
_warningTimeoutID,
_expirationTimeoutID,
// The time of the last ping to the server.
_lastPingTime = 0;
function extendsess() {
// Extend the session expiration. Ping the server and reset the timers if
// the minimum interval has passed since the last ping.
var now = $.now(),
timeSinceLastPing = now - _lastPingTime;
if (timeSinceLastPing > self.minPingInterval) {
_lastPingTime = now;
_resetTimers();
self.ping();
}
}
function _resetTimers() {
// Reset the session warning and session expiration timers.
var warningTimeout = self.sessionLifetime - self.timeBeforeWarning;
window.clearTimeout(_warningTimeoutID);
window.clearTimeout(_expirationTimeoutID);
_warningTimeoutID = window.setTimeout(self.onwarning, warningTimeout);
_expirationTimeoutID = window.setTimeout(_onTimeout, self.sessionLifetime);
}
function _onTimeout() {
// A wrapper that calls onbeforetimeout and ontimeout and supports asynchronous code.
$.when(self.onbeforetimeout()).always(self.ontimeout);
}
// Add default variables and methods, user specified options, and non-overridable
// public methods to the session monitor instance.
$.extend(self, defaults, options, {
extendsess: extendsess
});
// Set an event handler to extend the session upon user activity (e.g. mouseup).
$(document).on(self.activityEvents, extendsess);
// Start the timers and ping the server to ensure they are in sync with the backend session expiration.
extendsess();
return self;
};
Here is the important HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<div id="session-warning-modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="sessWarnLabel">Your session is about to expire<a class="sectionlink" title="Section permalink" href="#sessWarnLabel">¶</a></h4>
</div>
<div class="modal-body">
Your session will expire in <span id="remaining-time"></span> minutes due to inactivity.
</div>
<div class="modal-footer">
<button id="log-out" class="btn btn-default" type="button" data-dismiss="modal">Log Out</button>
<button id="stay-logged-in" class="btn btn-warning" type="button" data-dismiss="modal">Stay Logged In</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="{{ url_for('static', filename='session-monitor.js')}}"></script>
<script type="text/javascript">
// Configure and start the session timeout monitor
sessMon = sessionMonitor({
// Subtract 1 minute to ensure the backend doesn't expire the session first
sessionLifetime: {{ PERMANENT_SESSION_LIFETIME_MS }} - (1 * 60 * 1000),
timeBeforeWarning: 10 * 60 * 1000, // 10 minutes
minPingInterval: 1 * 60 * 1000, // 1 minute
pingUrl: '/ping',
logoutUrl: '/logout',
timeoutUrl: '/logged-out?timeout=1&next=' + encodeURIComponent(
window.location.pathname + window.location.search + window.location.hash),
// The "mouseup" event was used instead of "click" because some of the
// inner elements on some pages have click event handlers that stop propagation.
activityEvents: 'mouseup',
onwarning: function() {
$("#session-warning-modal").modal("show");
}
});
$(document).ready( function() {
// Configure the session timeout warning modal
$("#session-warning-modal")
.modal({
"backdrop": "static",
"keyboard": false,
"show": false
})
.on("click", "#stay-logged-in", sessMon.extendsess)
.on("click", "#log-out", sessMon.logout)
.find("#remaining-time").text(Math.round(sessMon.timeBeforeWarning / 60 / 1000));
});
window.sessMon = sessMon;
</script>
</body>
</html>
Here is the Python Flask app (myapp.py):
import collections
import datetime
from flask import Flask, request, render_template, redirect, url_for, session
from flask.ext.login import (
LoginManager, login_user, logout_user, UserMixin, login_required)
from wtforms.fields import PasswordField, StringField
from wtforms.form import Form
UserRow = collections.namedtuple('UserRow', ['id', 'password'])
TOY_USER_DATABASE = {
'george': UserRow(id=1, password='george'),
}
# settings ###############################################################
# Set a secret key to sign the session (Flask config value)
SECRET_KEY = 'insert secret key here'
# The amount of time after which the user's session expires
# (this is a Flask setting and is also used by the JavaScript)
PERMANENT_SESSION_LIFETIME = datetime.timedelta(minutes=60)
# init ###############################################################
app = Flask(__name__)
app.config.from_object(__name__)
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = '.login'
@login_manager.user_loader
def load_user(userid):
return User(userid)
@app.context_processor
def add_session_config():
"""Add current_app.permanent_session_lifetime converted to milliseconds
to context. The config variable PERMANENT_SESSION_LIFETIME is not
used because it could be either a timedelta object or an integer
representing seconds.
"""
return {
'PERMANENT_SESSION_LIFETIME_MS': (
app.permanent_session_lifetime.seconds * 1000),
}
# models ###############################################################
class User(UserMixin):
def __init__(self, id):
self.id = id
# forms ###############################################################
class LoginForm(Form):
username = StringField()
password = PasswordField()
# views ###############################################################
@app.route("/login", methods=['GET', 'POST'])
def login():
form = LoginForm(request.form)
message = ''
if request.method == 'POST' and form.validate():
db_user = TOY_USER_DATABASE.get(form.username.data)
if form.password.data == db_user.password:
user = User(db_user.id)
login_user(user)
return redirect(url_for('.home'))
else:
message = 'Login failed.'
context = {
'form': form,
'message': message,
}
return render_template('login.html', **context)
@app.route("/")
@login_required
def home():
return render_template('home.html')
@app.route("/another-page")
@login_required
def another_page():
return render_template('another_page.html')
@app.route("/logout")
@login_required
def logout():
logout_user()
return redirect(url_for('.logged_out') + '?' + request.query_string)
@app.route("/logged-out")
def logged_out():
timed_out = request.args.get('timeout')
return render_template('logged_out.html', timed_out=timed_out)
@app.route("/ping", methods=['POST'])
def ping():
session.modified = True
return 'OK'
if __name__ == "__main__":
app.run(debug=True)
The full example is also on github at: https://github.com/saltycrane/session-timeout-example.
Initial ideas were taken from http://www.itworld.com/development/335546/how-create-session-timeout-warning-your-web-application-using-jquery but, from what I could tell, it pinged the server whether the user was active or not.
