Implementing Client-side and Server-side Session in Flask
A step-by-step guide to implementing client-side and server-side sessions in Flask.
Let’s first create a simple web app. Our app will look like:-
Flow of the app will be:-
When you visit
/or/home, you will land at the home page./aboutand/contactare protected endpoints. When you visit/aboutor/contactIf you are not signed-in, you will be redirected to login page. After successful login, a session is created and you will return to the page from where you have come from.
If you are a signed-in user, you will be redirected to the respective page.
When you visit
/products, you will arrive at the products page. No sign-in is required to access this page.When you click on the
Sign Inbutton, a sign-in form will open. After successful login, a session is created and you will be redirected to the Home page.Clicking the
Log Outbutton ends the session and logs the user out of the web app.
Now open VS Code and set up the folders and files as shown below:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web App</title>
<style>
.navbar {
display: flex;
align-items: baseline;
column-gap: 15px;
background-color: antiquewhite;
}
h2 {
margin: 0;
}
a {
text-decoration: none;
}
p {
margin: 0px 0px 0px 35vw;
}
</style>
</head>
<body>
<div class="navbar">
<h2>MyApp</h2>
<a href="{{ url_for('home') }}">Home</a>
<a href="{{ url_for('about') }}">About</a>
<a href="{{ url_for('contact') }}">Contact</a>
<a href="{{ url_for('products') }}">Products</a>
<a href="{{ url_for('login') }}"><button>Sign In</button></a>
<a href="{{ url_for('logout') }}"><button>Log Out</button></a>
{% if session["user_name"] %}
<p>Welcome {{session["user_name"]}}!</p>
{% endif %}
</div>
<hr>
{% block content %}
{% endblock %}
</body>
</html>
home.html
{% extends "index.html" %}
{% block content %}
<main>
<h3>You are at the home page!!</h3>
</main>
{% endblock %}
about.html
{% extends "index.html" %}
{% block content %}
<main>
<h3>You are at the About page!!</h3>
</main>
{% endblock %}
contact.html
{% extends "index.html" %}
{% block content %}
<main>
<h3>You are at the Contact page!!</h3>
</main>
{% endblock %}
products.html
{% extends "index.html" %}
{% block content %}
<main>
<h3>Below are the products that we offer.</h3>
<ul>
<li>Sofas</li>
<li>Chairs</li>
<li>Tables</li>
<li>Swings</li>
</ul>
</main>
{% endblock %}
login.html
{% extends "index.html" %}
{% block content %}
<main>
<h3>Please fill the below form to sign-in!!</h3>
<form action="{{ url_for('login') }}" method="post">
<input type="text" value="{{next}}" name="next" hidden>
<div>
<label for="username">Username</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password">
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</main>
{% endblock %}
Client-side Session
Flask, by default, makes client-side session.
from flask import Flask, session, request, redirect, render_template, url_for
app = Flask(__name__)
app.config["SECRET_KEY"] = "supersecretkey" # Required for session security
@app.route('/')
@app.route('/home')
def home():
return render_template('home.html')
@app.route('/about')
def about():
# checking whether a user is logged in or not
if "user_name" not in session:
return redirect(url_for('login') + f"?next={request.url}")
return render_template('about.html')
@app.route('/contact')
def contact():
# checking whether a user is logged in or not
if "user_name" not in session:
return redirect(url_for('login') + f"?next={request.url}")
return render_template('contact.html')
@app.route('/products')
def products():
return render_template('products.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
next_url = request.args.get("next")
if request.method == 'POST':
# creating session data during login
session["user_name"] = request.form.get('username')
session["lang"] = "en"
session["theme"] = "dark"
next_url = request.form.get("next")
return redirect(next_url if next_url!='None' else url_for("home"))
return render_template('login.html', next=next_url)
@app.route('/logout')
def logout():
session.clear() # clears the session data
return "Signed Out!!!"
if __name__ == '__main__':
app.run(debug=True)
Now open the flask server and visit the web app by clicking the link http://127.0.0.1:5000/.
You will arrive at the home page. Click the Sign In button and log in. Once you are logged in, a client-side session will be created. You can find the session token in the Cookies section under the 'Application' tab in the developer tools.
Copy the session token and perform a base64 decode. You will then see the session data along with representation of session ID.
Let’s create server-side session.
Server-side Session
To make server-side session, you need to use flask_session library.
from flask import Flask, session, request, redirect, render_template, url_for
from flask_session import Session # Required for server-side session
app = Flask(__name__)
app.config["SECRET_KEY"] = "supersecretkey" # Required for session security
app.config["SESSION_TYPE"] = "filesystem"
Session(app)
@app.route('/')
@app.route('/home')
def home():
return render_template('home.html')
@app.route('/about')
def about():
# checking whether a user is logged in or not
if "user_name" not in session:
return redirect(url_for('login') + f"?next={request.url}")
return render_template('about.html')
@app.route('/contact')
def contact():
# checking whether a user is logged in or not
if "user_name" not in session:
return redirect(url_for('login') + f"?next={request.url}")
return render_template('contact.html')
@app.route('/products')
def products():
return render_template('products.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
next_url = request.args.get("next")
if request.method == 'POST':
# creating session data during login
session["user_name"] = request.form.get('username')
session["lang"] = "en"
session["theme"] = "dark"
next_url = request.form.get("next")
return redirect(next_url if next_url!='None' else url_for("home"))
return render_template('login.html', next=next_url)
@app.route('/logout')
def logout():
session.clear() # clears the session data
return "Signed Out!!!"
if __name__ == '__main__':
app.run(debug=True)
Now open the flask server and visit the web app by clicking the link http://127.0.0.1:5000/.
You will arrive at the home page. Click the Sign In button and log in. Once you are logged in, a server-side session will be created. You can find the session ID in the Cookies section under the 'Application' tab in the developer tools.
Copy the session ID and perform a base64 decode. You will only see the representation of session ID not the session data.
Session data is stored on the server side in a safe and secure way.
Thank you for your time…😊
Connect with me on LinkedIn