Flask WTF Registration Form with SQLAlchemy

In this Flask tutorial we learn about Flask WTF Registration Form with SQLAlchemy,

in previous tutorial we have learned that how you can work with Flask SQLAlchemy.

but we have used terminal for adding data, now we are going to learn that how you can use

Flask SQLAlchemy practically.

For this tutorial you need to download and install Wamp Server. create a database in the

Wamp Server, iam going to give flaskcodeloop for the database name, but you can give the

name according to your choice. right now we don’t have any table in our database.

In here we have created our forms.py, the first one is for login that we have already talked about

this, you can check this article, Flask WTF Forms. and the second one is registration form.

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




class LoginForm(FlaskForm):
    username = StringField('Username', validators=[InputRequired()])
    password = PasswordField('Password', validators=[InputRequired()])



class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[InputRequired()])
    password = PasswordField('Password', validators=[InputRequired()])

from flask_wtf import FlaskForm

from wtforms import StringField, PasswordField

from wtforms.validators import InputRequired

class LoginForm(FlaskForm):

username = StringField('Username', validators=[InputRequired()])

password = PasswordField('Password', validators=[InputRequired()])

class RegistrationForm(FlaskForm):

username = StringField('Username', validators=[InputRequired()])

password = PasswordField('Password', validators=[InputRequired()])

This is our app.py and we have added our SQLAlchmey and database configuration.

from flask import Flask, render_template, flash, request, redirect, url_for
from forms import LoginForm, RegistrationForm
from flask_sqlalchemy import SQLAlchemy
from werkzeug.security import check_password_hash, generate_password_hash


#create the object of Flask
app  = Flask(__name__)

app.config['SECRET_KEY'] = 'hardsecretkey'


#SqlAlchemy Database Configuration With Mysql
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:''@localhost/flaskcodeloop'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False



db = SQLAlchemy(app)


#This is our model
class UserInfo(db.Model):
    id = db.Column(db.Integer, primary_key = True)
    username = db.Column(db.String(100), unique = True)
    password = db.Column(db.String(100))



    def __init__(self, username, password):
        self.username = username
        self.password = password








#creating our routes
@app.route('/')
def index():

    return render_template('index.html')



#login route
@app.route('/login' , methods = ['GET', 'POST'])
def Login():
    form = LoginForm()

    if form.validate_on_submit():
        if request.form['username'] != 'codeloop' or request.form['password'] != '12345':
            flash("Invalid Credentials, Please Try Again")


        else:
            return redirect(url_for('index'))



    return render_template('login.html', form = form)




#register route
@app.route('/register' , methods = ['GET', 'POST'])
def register():
    form = RegistrationForm()

    if form.validate_on_submit():
        hashed_password = generate_password_hash(form.password.data, method = 'sha256')
        username = form.username.data
        password = hashed_password


        new_register =UserInfo(username=username, password=password)

        db.session.add(new_register)

        db.session.commit()

        flash("Registration was successfull, please login")

        return redirect(url_for('Login'))


    return render_template('registration.html', form=form)




#run flask app
if __name__ == "__main__":
    app.run(debug=True)

from flask import Flask, render_template, flash, request, redirect, url_for

from forms import LoginForm, RegistrationForm

from flask_sqlalchemy import SQLAlchemy

from werkzeug.security import check_password_hash, generate_password_hash

#create the object of Flask

app = Flask(__name__)

app.config['SECRET_KEY'] = 'hardsecretkey'

#SqlAlchemy Database Configuration With Mysql

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:''@localhost/flaskcodeloop'

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

#This is our model

class UserInfo(db.Model):

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

username = db.Column(db.String(100), unique = True)

password = db.Column(db.String(100))

def __init__(self, username, password):

self.username = username

self.password = password

#creating our routes

@app.route('/')

def index():

return render_template('index.html')

#login route

@app.route('/login' , methods = ['GET', 'POST'])

def Login():

form = LoginForm()

if form.validate_on_submit():

if request.form['username'] != 'codeloop' or request.form['password'] != '12345':

flash("Invalid Credentials, Please Try Again")

else:

return redirect(url_for('index'))

return render_template('login.html', form = form)

#register route

@app.route('/register' , methods = ['GET', 'POST'])

def register():

form = RegistrationForm()

if form.validate_on_submit():

hashed_password = generate_password_hash(form.password.data, method = 'sha256')

username = form.username.data

password = hashed_password

new_register =UserInfo(username=username, password=password)

db.session.add(new_register)

db.session.commit()

flash("Registration was successfull, please login")

return redirect(url_for('Login'))

return render_template('registration.html', form=form)

#run flask app

if __name__ == "__main__":

app.run(debug=True)

Note : You need to use this command for creating your model table in the database.

>>> from app import db
>>> db.create_all()

1 2	>>> from app import db >>> db.create_all()

If you check your flaskcodeloop database, you can see that we have our table

with the data.

In the above code this is SQLAlchemy configuration for Mysql Database.

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:''@localhost/flaskcodeloop'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

1 2	app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:''@localhost/flaskcodeloop' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

And this is our database model class, it is just a simple model with three fields, id, username

and password.

class UserInfo(db.Model):
    id = db.Column(db.Integer, primary_key = True)
    username = db.Column(db.String(100), unique = True)
    password = db.Column(db.String(100))



    def __init__(self, username, password):
        self.username = username
        self.password = password

class UserInfo(db.Model):

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

username = db.Column(db.String(100), unique = True)

password = db.Column(db.String(100))

def __init__(self, username, password):

self.username = username

self.password = password

In the app.py file this is our registration route. you can see that we have hashed our password,

because we shall not use plain text password, by this reason you need to hash your password

with werkzeug.security library. also we have used Flash Message after successful registration.

@app.route('/register' , methods = ['GET', 'POST'])
def register():
    form = RegistrationForm()

    if form.validate_on_submit():
        hashed_password = generate_password_hash(form.password.data, method = 'sha256')
        username = form.username.data
        password = hashed_password


        new_register =UserInfo(username=username, password=password)

        db.session.add(new_register)

        db.session.commit()

        flash("Registration was successfull, please login")

        return redirect(url_for('Login'))


    return render_template('registration.html', form=form)

@app.route('/register' , methods = ['GET', 'POST'])

def register():

form = RegistrationForm()

if form.validate_on_submit():

hashed_password = generate_password_hash(form.password.data, method = 'sha256')

username = form.username.data

password = hashed_password

new_register =UserInfo(username=username, password=password)

db.session.add(new_register)

db.session.commit()

flash("Registration was successfull, please login")

return redirect(url_for('Login'))

return render_template('registration.html', form=form)

Our base.html file, also we have added two buttons for the login and signup.

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>

    <!-- CSS Bootstrap CDN Link -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>
<body>



<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

      <a class="navbar-brand" href="{{url_for('index')}}">CodeLoop</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="{{url_for('index')}}">Home <span class="sr-only">(current)</span></a>
      </li>



         <li class="nav-item">
        <a class="nav-link" href="#">Logout</a>
      </li>


    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

  </div>

    <a href="{{url_for('Login')}}"><button class="btn btn-success navbar-btn">Login</button> </a>
     <a href="{{url_for('register')}}"><button class="btn btn-success navbar-btn">Signup</button> </a>
</nav>


<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


{% block body %}


{% endblock %}




</body>
</html>

<!DOCTYPE html>

<head>

<title>{% block title %} {% endblock %}</title>

</head>

<body>

<a class="navbar-brand" href="{{url_for('index')}}">CodeLoop</a>

</button>

<a class="nav-link" href="{{url_for('index')}}">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#">Logout</a>

</li>

</ul>

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

<a href="{{url_for('Login')}}"><button class="btn btn-success navbar-btn">Login</button> </a>

<a href="{{url_for('register')}}"><button class="btn btn-success navbar-btn">Signup</button> </a>

</nav>

{% block body %}

{% endblock %}

</body>

</html>

This is our registration.html, and we have simply rendered our form with our Flash Message.

templates/registration.html

{% extends 'base.html' %}


{% block title %} Home {% endblock %}

{% block body %}

<div class="container">
    <h1>Registration Page - Welcome to codeloop.org</h1>
<h3>Tutorial Number 12 </h3>

    <br>
    <br>
    <hr>

    {% with messages = get_flashed_messages() %}

    {% if messages %}

    {% for message in messages %}

       <div class="alert alert-success alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close">
            <span aria-hidden="true">X</span>
        </button>

             {{message}}

    </div>




    {% endfor  %}

    {% endif %}

    {% endwith %}

    <h1>Please Register</h1>

    <form action="" method="post" novalidate>
      {{form.csrf_token}}

      <p>

          {{form.username.label}}
          {{form.username(size=32)}}



          {% for error in form.username.errors %}
          <span style="color:red;">

              {{error}}
          </span>
          {% endfor %}

      </p>


         <p>

          {{form.password.label}}
          {{form.password(size=32)}}


            {% for error in form.password.errors %}
          <span style="color:red;">

              {{error}}
          </span>
          {% endfor %}

      </p>



        <p>
            <input type="submit" value="Register" class="btn btn-success">

        </p>



    </form>



</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %} Home {% endblock %}

{% block body %}

<h1>Registration Page - Welcome to codeloop.org</h1>

<h3>Tutorial Number 12 </h3>

<br>

<hr>

{% with messages = get_flashed_messages() %}

{% if messages %}

{% for message in messages %}

</button>

</div>

{% endfor %}

{% endif %}

{% endwith %}

<h1>Please Register</h1>

<p>

{% for error in form.username.errors %}

</span>

{% endfor %}

</p>

<p>

{% for error in form.password.errors %}

</span>

{% endfor %}

</p>

<p>

</p>

</form>

</div>

{% endblock %}

In here we have login.html file.

templates/login.html

{% extends 'base.html' %}


{% block title %} Home {% endblock %}

{% block body %}

<div class="container">
    <h1>Login Page - Welcome to codeloop.org</h1>
<h3>Tutorial Number 12 </h3>

    <br>
    <br>
    <hr>

    {% with messages = get_flashed_messages() %}

    {% if messages %}

    {% for message in messages %}

       <div class="alert alert-success alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="close">
            <span aria-hidden="true">X</span>
        </button>

             {{message}}

    </div>




    {% endfor  %}

    {% endif %}

    {% endwith %}

    <h1>Please Login</h1>

    <form action="" method="post" novalidate>
      {{form.csrf_token}}

      <p>

          {{form.username.label}}
          {{form.username(size=32)}}



          {% for error in form.username.errors %}
          <span style="color:red;">

              {{error}}
          </span>
          {% endfor %}

      </p>


         <p>

          {{form.password.label}}
          {{form.password(size=32)}}


            {% for error in form.password.errors %}
          <span style="color:red;">

              {{error}}
          </span>
          {% endfor %}

      </p>


        <p>
            <input type="submit" value="Login" class="btn btn-success">

        </p>



    </form>



</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %} Home {% endblock %}

{% block body %}

<h1>Login Page - Welcome to codeloop.org</h1>

<h3>Tutorial Number 12 </h3>

<br>

<hr>

{% with messages = get_flashed_messages() %}

{% if messages %}

{% for message in messages %}

</button>

</div>

{% endfor %}

{% endif %}

{% endwith %}

<h1>Please Login</h1>

<p>

{% for error in form.username.errors %}

</span>

{% endfor %}

</p>

<p>

{% for error in form.password.errors %}

</span>

{% endfor %}

</p>

<p>

</p>

</form>

</div>

{% endblock %}

This is our index.html.

templates/index.html

{% extends 'base.html' %}


{% block title %} Home {% endblock %}

{% block body %}

<div class="container">
    <h1>Home Page - Welcome to codeloop.org</h1>
<h3>Tutorial Number 12 </h3>

<p>
In this tutorial we are going to talk
about Flask WTF Registration Form.

</p>




</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %} Home {% endblock %}

{% block body %}

<h1>Home Page - Welcome to codeloop.org</h1>

<h3>Tutorial Number 12 </h3>

<p>

In this tutorial we are going to talk

about Flask WTF Registration Form.

</p>

</div>

{% endblock %}

Now run your Flask Project and go to http://localhost:5000/register, you can see a

registration form, add the data and click on Register button, this will be the result.

Flask WTF Registration Form with SQLAlchemy

And if you check your database, you can see that we have our data with

hashed password.

Also you can watch my complete 4 hours training on Flask Web Development.

Subscribe and Get Free Video Courses & Articles in your Email