Protecting Routes with Authentication Middleware

Welcome to the first lesson of our course on securing a Flask MVC application. In this lesson, we'll explore how to implement an authentication middleware to protect the routes in our app. This middleware is vital because it ensures that only authorized users have access to specific features. For our ToDo app, it will serve as a gatekeeper, safeguarding user routes and enhancing security. Think of an authentication middleware as a checkpoint that verifies a user's credentials before permitting access to designated areas of the application. By the end of this lesson, your app will be fortified with this indispensable security feature, ready to prevent unauthorized access.

Lesson Overview

In this lesson, we will cover the following key topics to secure our Flask ToDo app: Creating the Authentication Page : Design a user interface for login and registration to facilitate user authentication. Implementing the User Controller : Establish a controller to handle the connection between the authentication page and the backend. Developing the Authentication Middleware : Develop middleware to intercept requests and verify user authentication status. Integrating Middleware into the Flask App : Seamlessly incorporate the authentication middleware into the app to protect routes. By the end of this lesson, you will be equipped with the skills to implement robust authentication middleware in your Flask application, enhancing its security and accessibility management.

Creating the Authentication Page

The first step in building an authentication system is to provide a user interface for login and registration. Let's create a new auth.html template for our authentication page inside our /templates directory: HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login / Register</title> <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> </head> <body> <h1>Login or Register</h1> <!-- Form for registration and login --> <form method="POST"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <!-- Buttons to either register or login --> <button type="submit">Login</button> <button type="submit">Register</button> </form> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login / Register</title> <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> </head> <body> <h1>Login or Register</h1> <!-- Form for registration and login --> <form method="POST"> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <!-- Buttons to either register or login --> <button type="submit">Login</button> <button type="submit">Register</button> </form> </body> </html> This HTML code provides a simple form for user login and registration. It includes fields for a username and password, as well as buttons to submit the form. For now, we will not add any actions to these buttons, since we just need a page to redirect unauthenticated users.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Developing the Authentication Middleware

Now, let's create an authentication_middleware.py file in the middlewares directory. This file ensures users can only access protected parts of the app if they are logged in.

Here's the middleware code with comments:

Python

from flask import session, redirect, url_for, request

def require_login_middleware(app):
    # Set up the middleware to run before each request
    @app.before_request
    def require_login():
        # Check if the current endpoint is not in the allowed list
        if request.endpoint not in ['user.auth_page', 'static']:
            # Verify if 'user_id' is in the session; if not, the user is not logged in
            if 'user_id' not in session:
                # Redirect unauthenticated users to the authentication page
                return redirect(url_for('user.auth_page'))

from flask import session, redirect, url_for, request

def require_login_middleware(app):
    # Set up the middleware to run before each request
    @app.before_request
    def require_login():
        # Check if the current endpoint is not in the allowed list
        if request.endpoint not in ['user.auth_page', 'static']:
            # Verify if 'user_id' is in the session; if not, the user is not logged in
            if 'user_id' not in session:
                # Redirect unauthenticated users to the authentication page
                return redirect(url_for('user.auth_page'))

How It Works:

Function Setup: The require_login_middleware function is defined to check authentication. It runs require_login before every request.
URL Check: require_login checks if the current endpoint is an authentication page or a static file (like images or stylesheets). These should be accessible without login, so they are excluded from the check.
Session Check: It looks for user_id in the session. Without it, the user isn't logged in. For now, no users will have user_id in the session since we haven't implemented the login route yet.
Redirect: If user_id is absent, the user is redirected to /auth to log in, protecting other routes.

Integrating Middleware into the Flask App

Finally, let's bring everything together by integrating this middleware into our Flask app. We will update the app.py file:

Python

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from controllers.user_controller import user_controller
from middlewares.error_handler import setup_error_handler
from middlewares.authentication_middleware import require_login_middleware
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

app.secret_key = 'your_unique_secret_key'  

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

# Setup authentication middleware
require_login_middleware(app)

# Register user controller blueprint
app.register_blueprint(user_controller)

app.register_blueprint(todo_controller)
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from controllers.user_controller import user_controller
from middlewares.error_handler import setup_error_handler
from middlewares.authentication_middleware import require_login_middleware
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

app.secret_key = 'your_unique_secret_key'  

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

# Setup authentication middleware
require_login_middleware(app)

# Register user controller blueprint
app.register_blueprint(user_controller)

app.register_blueprint(todo_controller)
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

In this file, we initialize the Flask app, set up session management with a secret key, integrate our authentication middleware using the require_login_middleware(app) function and register the user_controller next to our already implemented controllers.