Login and Logout in a Flask App

If you created your Flask Web App following the wiki tutorials, and you downloaded the zip file and extracted it into the 'site-packages' folder you will already have 'flask-wtf' installed and ready to go. If not then you need to install 'flask-wtf' using pip.

Setting Secret Key

You need to find the 'py' file which includes this code:

from flask import Flask
app = Flask(__name__)

And add the following to set the secret key:

app.config['SECRET_KEY'] = 'secret key'

Create forms.py

In the root folder of your project, create a new file called 'forms.py'.

Now add the following code:

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

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Sign In')

This will import the required modules to create a login form. The LoginForm class contains the fields to display on the form. It its important to note the 'DataRequired' validators.

Create a template

My WebApp was created using Visual Studio, and it already created a 'layout' template and then separate 'html' files for each page. If you already have templates set up you should copy one of the 'html' files for a page and edit it to this:

{% extends "layout.html" %}

{% block content %}
    <h1>Sign In</h1>
    <form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
        <p>
            {{ form.username.label }}<br>
            {{ form.username(size=32) }}
        </p>
        <p>
            {{ form.password.label }}<br>
            {{ form.password(size=32) }}
        </p>
        <p>{{ form.submit() }}</p>
    </form>
{% endblock %}

Create a login view

Now add the following to the top of your 'views.py' or the 'py' file containing your routes:

from .forms import LoginForm

Now create a route or view for the login:

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        userpass = form.password.data
        username = form.username.data
        return redirect('/')
    return render_template('login.html', title='Sign In', form=form)

At the moment the form doesn't check the login details, for this we are going to need to create a database table for users. Several options exist for this connection and can be found here ( sqlite , MySql ). Both of these methods create a database class so that we can keep the specific database implementation within the class. This will mean we can continue from this point regardless of which you have chosen.

Creating the database

At this point you should have a database class which includes the code to connect, execute a command, and run a select query. I created the following route and then visited this route to run the code:

@app.route('/create')
def createuserdb():
    db = Database()
    sql = """CREATE TABLE IF NOT EXISTS users(
                UserID text PRIMARY KEY,
                UserPass text NOT NULL,
                UserEmail text NOT NULL
                )"""
    check = db.execute(sql)
    db=Database()
    sql = """insert into users
                values("bob","password","me@some.com"
                )"""
    check = db.execute(sql)
    return "User table created:"+str(check)

Check the password

Your current login route should be:

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        userpass = form.password.data
        username = form.username.data
        return redirect('/')
    return render_template('login.html', title='Sign In', form=form)

So edit it to get the following:

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        userpass = form.password.data
        username = form.username.data
        db = Database()
        sql ="select * from users where UserID='%s' and UserPass='%s'" % (username,userpass)
        rows=db.select(sql)
        if len(rows)==0:
            return render_template('login.html', title='Sign In', form=form)
        else:
            return redirect('/')
    return render_template('login.html', title='Sign In', form=form)

This creates a database connection and then runs the select query to check the username and password. if no rows are return (username and password combination not in database) you will be given the data and the form back. The else currently just redirects to the root page, we will make this store the logged in user.