Implementing Secure User Registration in Flask

We're now ready to enhance our Flask ToDo application by adding user registration functionality. In the previous lesson, we laid the groundwork with the authentication middleware. Now, let's take it a step further and allow users to sign up and create accounts. The user registration process is crucial for letting new users onboard into our application. It safely stores their credentials and prepares them for future logins. By the end of this lesson, we'll collectively integrate user registration into our Flask app using models, services, and controllers.

Creating and Exploring the User Model

Let's start by creating the file for our User model, which will store user-related data. We'll head over to app/models/ and create a new file named user.py . Python from models import db from werkzeug.security import generate_password_hash class User(db.Model):__tablename__ = 'users' # Define the primary key for the User table id = db.Column(db.Integer, primary_key=True) # Define a column for username, ensuring it's unique and cannot be null username = db.Column(db.String(150), unique=True, nullable=False) # Define a column to store the hashed password, not storing it as plain text password_hash = db.Column(db.String(200), nullable=False) def set_password(self, password): # Convert the plain password to a hashed password for security self.password_hash = generate_password_hash(password) from models import db from werkzeug.security import generate_password_hash class User(db.Model):__tablename__ = 'users' # Define the primary key for the User table id = db.Column(db.Integer, primary_key=True) # Define a column for username, ensuring it's unique and cannot be null username = db.Column(db.String(150), unique=True, nullable=False) # Define a column to store the hashed password, not storing it as plain text password_hash = db.Column(db.String(200), nullable=False) def set_password(self, password): # Convert the plain password to a hashed password for security self.password_hash = generate_password_hash(password) Let's break it down: Data Storage : Our User model is a representation of the user data structure. It includes an id for unique user identification, a username which is set to be unique and required, and a password_hash that stores the user's password securely in a hashed format. Security : With generate_password_hash, we convert plain text passwords into hashed passwords, which are more secure and protect user credentials from being easily read in case of a database breach.

Understanding Hashing and Werkzeug

Hashing involves transforming data, such as passwords, into a fixed-size string of characters—a hash code. This method enhances security by storing the hash instead of the plain text version, making it significantly more challenging for attackers to retrieve the original data. Werkzeug is a Python library that simplifies web development by offering various utilities, including secure password hashing. It employs the PBKDF2 algorithm, which uses salting and multiple iterations to create strong hashes resistant to attacks. To incorporate Werkzeug in your Flask app, you can install it with the following command: Shell pip install werkzeug

Join the 1M+ learners on CodeSignal

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

Creating and Implementing the User Registration Service

Next, we'll create a service to handle the user registration logic. In app/services/, let's create a file named user_service.py with the following code:

Python

from models.user import User, db

class UserService:
    @staticmethod
    def register(username, password):
        # Check if a user with the given username already exists in the database
        existing_user = User.query.filter_by(username=username).first()
        if existing_user:
            # If user exists, return None indicating registration failure
            return None
        # Create and setup a new User object with the provided username
        new_user = User(username=username)
        # Hashes the password and stores it securely in the user object
        new_user.set_password(password)
        # Add the new user object to the database session for saving
        db.session.add(new_user)
        # Commit the transaction to save the new user to the database
        db.session.commit()
        # Return the new user object indicating successful registration
        return new_user

from models.user import User, db

class UserService:
    @staticmethod
    def register(username, password):
        # Check if a user with the given username already exists in the database
        existing_user = User.query.filter_by(username=username).first()
        if existing_user:
            # If user exists, return None indicating registration failure
            return None
        # Create and setup a new User object with the provided username
        new_user = User(username=username)
        # Hashes the password and stores it securely in the user object
        new_user.set_password(password)
        # Add the new user object to the database session for saving
        db.session.add(new_user)
        # Commit the transaction to save the new user to the database
        db.session.commit()
        # Return the new user object indicating successful registration
        return new_user

Here's what this does:

User Existence: The service first checks if there's an existing user with the same username in the database. This prevents duplicate registrations and ensures each username is unique.
Registration Process: If no user exists with the provided username, a new User instance is created. The password is hashed and securely stored, and the new user object is added to the database and committed as a transaction. This returns the new user if registration is successful.

Adding the Registration Route to the Controller

Now let's move on to the user_controller. The controller file was already set up in our last lesson, so we'll just expand it to include the new registration route.

Python

from flask import Blueprint, render_template, request, redirect, url_for, flash
from services.user_service import UserService

user_service = UserService()

user_controller = Blueprint('user', __name__)

# Route to render the authentication page
@user_controller.route('/auth', methods=['GET'])
def auth_page():
    return render_template('auth.html')

# New route for handling user registration
@user_controller.route('/register', methods=['POST'])
def register():
    # Retrieve username and password from the form
    username = request.form['username']
    password = request.form['password']
    # Try to register the user using the provided username and password
    user = user_service.register(username, password)
    # If successful, add successful flash message and redirect to auth page
    if user:
        flash("Registration successful! Please log in.")
        return redirect(url_for('user.auth_page'))
    # If it fails, add failure flash message and redirect to auth page
    else:
        flash("User already exists.")
        return redirect(url_for('user.auth_page'))

from flask import Blueprint, render_template, request, redirect, url_for, flash
from services.user_service import UserService

user_service = UserService()

user_controller = Blueprint('user', __name__)

# Route to render the authentication page
@user_controller.route('/auth', methods=['GET'])
def auth_page():
    return render_template('auth.html')

# New route for handling user registration
@user_controller.route('/register', methods=['POST'])
def register():
    # Retrieve username and password from the form
    username = request.form['username']
    password = request.form['password']
    # Try to register the user using the provided username and password
    user = user_service.register(username, password)
    # If successful, add successful flash message and redirect to auth page
    if user:
        flash("Registration successful! Please log in.")
        return redirect(url_for('user.auth_page'))
    # If it fails, add failure flash message and redirect to auth page
    else:
        flash("User already exists.")
        return redirect(url_for('user.auth_page'))

Here's what we did:

Form Handling: The register route processes form input for username and password, passing them to the registration service.
Feedback: Using Flask's flash function, we notify users about the success or failure of their registration. If registration is successful, the user is prompted to log in; if not, they're informed that the username is already taken.

Enhancing the Authentication Page

Finally, in the auth.html template, we'll add flash messages and define an action for the register button to improve user feedback and interactions:

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>

    <!-- Display flash messages (for errors or successful registration) -->
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}

    <!-- 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 to submit the form for registering a new user -->
        <button type="submit" formaction="{{ url_for('user.register') }}">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>

    <!-- Display flash messages (for errors or successful registration) -->
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}

    <!-- 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 to submit the form for registering a new user -->
        <button type="submit" formaction="{{ url_for('user.register') }}">Register</button>
    </form>
</body>
</html>

Here's what we've done:

Flash Messages: We integrated flash message display to keep users informed about their actions' results, such as registration success or conflict.
Register Button Action: The register button is configured with a formaction that directs form submissions specifically to the user.register route, separating the registration logic from login.