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.remember_me() }} {{ form.remember_me.label }}</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 app.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('/index')
    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.