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

@app.route('/login')
def login():
    form = LoginForm()
    return render_template('login.html', title='Sign In', form=form)