Muhammad Saim

Posted on Aug 14, 2022 • Updated on Aug 21, 2022

Python Flask Authentication Part #01

#python #flask #webdev #beginners

Hello.! I hope you are doing great. In the last post we setup our application frontend workflow and in this one we are setting the authentication pages and authentication validations.

For the email validation Flask-WTF depends on email-validator so we have to install it for further doing so you can install it by pip.

pip install email-validator

We need two forms one for login and one for register so we have to create two files login_form.py and register_form.py in applictaion/forms.

login_form.py

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from wtforms.validators import InputRequired, DataRequired


class LoginForm(FlaskForm):
    username = StringField(
        'username',
        validators=[InputRequired(), DataRequired()],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Username'
        }
    )
    password = PasswordField(
        'password',
        validators=[InputRequired(), DataRequired()],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Password'
        }
    )

register_form.py

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, EmailField
from wtforms.validators import InputRequired, DataRequired, Email, EqualTo, Length, Regexp
from application.validators.username_exists import UsernameExists
from application.validators.email_exists import EmailExists


class RegisterForm(FlaskForm):
    name = StringField(
        'name',
        validators=[InputRequired(), DataRequired()],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Name'
        }
    )
    username = StringField(
        'username',
        validators=[InputRequired(), DataRequired(), Regexp('^[a-zA-Z_0-9]\w+$', message="Only alphabets, numbers and _ are allowed."), UsernameExists()],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Username'
        }
    )
    email = EmailField(
        'email',
        validators=[InputRequired(), DataRequired(), Email(), EmailExists()],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Email'
        }
    )
    password = PasswordField(
        'password',
        validators=[InputRequired(), DataRequired(), Length(min=8), EqualTo('password_confirmation', message='Password should be match with confirm field.')],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Password'
        }
    )
    password_confirmation = PasswordField(
        'password_confirmation',
        validators=[InputRequired(), DataRequired()],
        render_kw={
            'class': 'input input-bordered w-full focus:outline-2 focus:outline-blue-700',
            'placeholder': 'Confirm Password'
        }
    )

We need two WTForms custom validators for our user registration one for the username and other one for email to check both fields are already exists in the DB. Create a folder validators in application and two files in validators folder username_exists.py and email_exists.py

email_exists.py

from application.models.user import User
from wtforms.validators import ValidationError


class EmailExists:

    def __init__(self, model=User, exclude=None, message=None):
        self.model = model
        self.exclude = exclude
        if not message:
            message = "Email is already in use."
        self.message = message

    def __call__(self, form, field):
        user = self.model.query.filter_by(email=field.data)
        if not self.exclude:
            user.filter_by(id=self.exclude)
        if user.first():
            raise ValidationError(self.message)

username_exists.py

from application.models.user import User
from wtforms.validators import ValidationError


class UsernameExists:

    def __init__(self, model=User, exclude=None, message=None):
        self.model = model
        self.exclude = exclude
        if not message:
            message = "Username is already taken"
        self.message = message

    def __call__(self, form, field):
        user = self.model.query.filter_by(username=field.data)
        if not self.exclude:
            user.filter_by(id=self.exclude)
        if user.first():
            raise ValidationError(self.message)

Create a file auth.py for an auth controller in application/controllers

auth.py

from flask import Blueprint, render_template, request
from application.forms.login_form import LoginForm
from application.forms.register_form import RegisterForm
from application.helpers.general_helper import form_errors, is_ajax

controller = Blueprint('auth', __name__, url_prefix='/auth')


@controller.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if request.method == 'POST' and is_ajax(request):
        if form.validate_on_submit():
            pass
        else:
            return {
                'error': True,
                'form': True,
                'messages': form_errors(form)
            }
    return render_template('pages/auth/login.jinja2', form=form)


@controller.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm()
    if request.method == 'POST' and is_ajax(request):
        if form.validate_on_submit():
            pass
        else:
            return {
                'error': True,
                'form': True,
                'messages': form_errors(form)
            }
    return render_template("pages/auth/register.jinja2", form=form)

Now we need a helper function which return only first error of the field from an errors array of the each fields.

Create a folder helpers in applictaion folder and add a file general_helper.py in the helpers folder and form_error and is_ajax functions into this file. is_ajax function will check this request is ajax or not.

general_helper.py


def form_errors(form):
    errors = {}
    for error in form.errors:
        errors[error] = form.errors.get(error)[0]
    return errors


def is_ajax(request):
    return request.headers.get('X-Requested-With') == 'XMLHttpRequest'

def register_blueprints(app):
    from application.controllers import (
        home,
        auth
    )

    app.register_blueprint(home.controller)
    app.register_blueprint(auth.controller)

Cerate a folder in auth in views/pages and create two files login.jinja2 and register.jinja2 also create a layout file auth.jinja2 in views/layouts.

auth.jinja2

<!doctype html>
<html lang="en" class="h-full scroll-smooth bg-gray-100 antialiased">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>

    {% block content %}{% endblock %}

    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>

login.jinja2

{% extends 'layouts/auth.jinja2' %}

{% block title %} Login {% endblock %}

{% block content %}
    <div class="min-h-screen flex justify-center items-center">
        <div class="card md:w-2/6 w-4/5 bg-base-100 shadow-xl">
            <div class="card-body">
                <form action="{{ url_for('auth.login') }}" method="post" class="ajax-form">
                    {{ form.csrf_token() }}
                    <h1 class="card-title">Login!</h1>
                    <p class="mb-6">Welcome back! Log in to your account.</p>
                    <div class="form-control mb-3 w-full">
                        <label for="username" class="label">Username</label>
                        {{ form.username }}
                        <p class="mt-2 text-sm text-red-600 username-feedback error-feedback hidden"></p>
                    </div>
                    <div class="form-control mb-3 w-full">
                        <label for="password" class="label">Password</label>
                        {{ form.password }}
                        <p class="mt-2 text-sm text-red-600 password-feedback error-feedback hidden"></p>
                    </div>
                    <div class="card-actions justify-between items-center mt-6">
                        <a href="{{ url_for('auth.register') }}">Not have an account?</a>
                        <button type="submit" class="btn btn-primary">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

register.jinja2

{% extends 'layouts/auth.jinja2' %}

{% block title %} Register {% endblock %}

{% block content %}
    <div class="min-h-screen flex justify-center items-center">
        <div class="card md:w-2/6 w-4/5 bg-base-100 shadow-xl">
            <div class="card-body">
                <form action="{{ url_for('auth.register') }}" method="post" class="ajax-form">
                    {{ form.csrf_token() }}
                    <h1 class="card-title">Register!</h1>
                    <p class="mb-6">Welcome back! Log in to your account.</p>
                    <div class="form-control mb-3 w-full">
                        <label for="name" class="label">Name</label>
                        {{ form.name }}
                        <p class="mt-2 text-sm text-red-600 name-feedback error-feedback hidden"></p>
                    </div>
                    <div class="form-control mb-3 w-full">
                        <label for="username" class="label">Username</label>
                        {{ form.username }}
                        <p class="mt-2 text-sm text-red-600 username-feedback error-feedback hidden"></p>
                    </div>
                    <div class="form-control mb-3 w-full">
                        <label for="email" class="label">Email</label>
                        {{ form.email }}
                        <p class="mt-2 text-sm text-red-600 email-feedback error-feedback hidden"></p>
                    </div>
                    <div class="form-control mb-3 w-full">
                        <label for="password" class="label">Password</label>
                        {{ form.password }}
                        <p class="mt-2 text-sm text-red-600 password-feedback error-feedback hidden"></p>
                    </div>
                    <div class="form-control mb-3 w-full">
                        <label for="password_confirmation" class="label">Confirm Password</label>
                        {{ form.password_confirmation }}
                        <p class="mt-2 text-sm text-red-600 password_confirmation-feedback error-feedback hidden"></p>
                    </div>
                    <div class="card-actions justify-between items-center mt-6">
                        <a href="{{ url_for('auth.login') }}">Already have an account?</a>
                        <button type="submit" class="btn btn-primary">Register</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

Open tailwind.config.js add applictaion/forms directory in the content array because we add input classes through WTF Forms so we have to tell the tailwindcss to include these classes in the final build, so our tailwind.config.js will look like this.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
      './application/views/**/*.jinja2',
      './application/assets/js/**/*.js',
      './application/forms/**/*.py',
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('@tailwindcss/typography'),
      require('daisyui')
  ],
}

Add the username field in the User model after adding the username field our Model will look like this.

user.py

from application import db


class User(db.Model):

    __tablename__ = 'users'

    id = db.Column(
        db.Integer,
        primary_key=True
    )

    name = db.Column(
        db.String(255),
        nullable=False
    )

    username = db.Column(
        db.String(255),
        nullable=False,
        unique=True,
    )

    email = db.Column(
        db.String(255),
        unique=True,
        nullable=False
    )

    password = db.Column(
        db.String(255),
        nullable=False
    )

    role = db.Column(
        db.String(50),
        nullable=False,
        server_default="user"
    )

    created_at = db.Column(
        db.DateTime,
        server_default=db.func.now(),
        nullable=False
    )

    updated_at = db.Column(
        db.DateTime,
        server_default=db.func.now(),
        nullable=False
    )

After adding the filed please run the migration for creating new field migration.

flask db migrate -m "Add username column in users table."

After the migration run the migration to effect on th DB.

flask db upgrade

Now its time to implementing AJAX in our authentication forms open app.js in src/js/app.js update your file with ajax your file will look like this.

window.$ = window.jQuery = require('jquery');


const spinner = `<div role="status">
    <svg aria-hidden="true" class="w-6 h-6 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
    </svg>
    <span class="sr-only">Loading...</span>
</div>`;

// ajax form submission
$(".ajax-form").on('submit', function (e){
    e.preventDefault();
    const url = $(this).attr("action");
    const method = $(this).attr("method");
    const payload = $(this).serializeArray();
    const is_refresh = $(this).data("refresh");
    const is_redirect = $(this).data("redirect");
    let submit_btn = $(this).find("button[type=submit]");
    let form_data = new FormData(this);
    let submit_html = submit_btn.html();
    $(this).find("input, select, button, textarea").attr("disabled", true);
    $.ajax({
       url: url,
       method: method,
       data: form_data,
       processData: false,
       contentType: false,
       cache: false,
       beforeSend: () => {
           $(this).find("input, select, textarea").removeClass("input-error focus:outline-red-600").addClass('focus:outline-blue-700');
           $(this).find(".error-feedback").addClass('hidden').text('');
           submit_btn.html(spinner);
       },
       success: (data) => {
           $(this).find("input, select, button, textarea").attr("disabled", false);
           submit_btn.html(submit_html);
           if(data.error && data.form){
               let messages = data.messages;
                Object.keys(messages).forEach(function (key) {
                  $("#" + key).addClass("input-error focus:outline-red-600").removeClass('focus:outline-blue-700');
                  $("." + key + "-feedback").removeClass('hidden').text(messages[key]);
                });
           }else{

           }
       }
    });
})

Rebuid your assets or start watch

yarn watch

Run the application

python run.py

You can get the updated code on GitHub Repo

Thanks for being with me.

See you guys in next post if you have any issue while going with this post feel free to comment.

DEV Community

Python Flask Authentication Part #01

Top comments (0)

Read next

Mastering CSS unicode-bidi Property

What is ”this” in JavaScript？

Angular Directive Selector

Content Delivery Network Explained 🌎⚡️