Flask Login & Flask Logout Tutorial

In this Flask tutorial we are going to learn about Flask Login & Flask Logout Tutorial , so for

this we are using a Flask Extension that is called Flask-Login. Flask-Login provides user

session management for Flask. It handles the common tasks of logging in, logging out,

and remembering your users’ sessions over extended periods of time. you can check

Flask-Login documentation for more.

Installation

Install the extension with pip:

pip install flask-login

1	pip install flask-login

The most important part of an application that uses Flask-Login is the LoginManager

class. You should create one for your application somewhere in your code, for example

we are using the LoginManager in our app.py file.

login_manager = LoginManager()

1	login_manager = LoginManager()

Also you need to provide a user_loader callback. This callback is used to

reload the user object from the user ID stored in the session.

So now let’s add the complete code for app.py.

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
from flask_login import LoginManager, UserMixin
from flask_login import login_user, logout_user, current_user, login_required


#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)


#login code
login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'Login'




#This is our model
class UserInfo(UserMixin, 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




@login_manager.user_loader
def load_user(user_id):
    return UserInfo.query.get(int(user_id))




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

    name = current_user.username

    return render_template('index.html', name = name)



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

    if request.method == 'POST':
        if form.validate_on_submit():
            user = UserInfo.query.filter_by(username=form.username.data).first()

            if user:
                if check_password_hash(user.password, form.password.data):
                    login_user(user)

                    return redirect(url_for('index'))


                flash("Invalid Credentials")

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


@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('Login'))



#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)

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

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

from flask_login import LoginManager, UserMixin

from flask_login import login_user, logout_user, current_user, login_required

#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)

#login code

login_manager = LoginManager()

login_manager.init_app(app)

login_manager.login_view = 'Login'

#This is our model

class UserInfo(UserMixin, 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

@login_manager.user_loader

def load_user(user_id):

return UserInfo.query.get(int(user_id))

#creating our routes

@app.route('/')

@login_required

def index():

name = current_user.username

return render_template('index.html', name = name)

#login route

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

def Login():

form = LoginForm()

if request.method == 'POST':

if form.validate_on_submit():

user = UserInfo.query.filter_by(username=form.username.data).first()

if user:

if check_password_hash(user.password, form.password.data):

login_user(user)

return redirect(url_for('index'))

flash("Invalid Credentials")

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

@app.route('/logout')

@login_required

def logout():

logout_user()

return redirect(url_for('Login'))

#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)

OK in the app.y file , these are the imports that we need for Flask Login & Flask Logout Tutorial.

from flask_login import LoginManager, UserMixin
from flask_login import login_user, logout_user, current_user, login_required

1 2	from flask_login import LoginManager, UserMixin from flask_login import login_user, logout_user, current_user, login_required

This is Flask SQLAlchemy configuration for mysql database, we have already covered this

article, you can check this link Flask SQLAlchemy with Mysql . make sure that you have

created a database in the Wamp Server, my database name is flaskcodeloop .

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

Also we need to create LoginManager object, and initialize our LoginManager.

login_manager = LoginManager()
login_manager.init_app(app)
login_manager.login_view = 'Login'

login_manager = LoginManager()

login_manager.init_app(app)

login_manager.login_view = 'Login'

This is our database model that we have already covered in Flask WTF Forms .

class UserInfo(UserMixin, 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(UserMixin, 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

As i have said that you need to provide a user_loader callback. This

callback is used to reload the user object from the user ID stored in the session.

@login_manager.user_loader
def load_user(user_id):
    return UserInfo.query.get(int(user_id))

@login_manager.user_loader

def load_user(user_id):

return UserInfo.query.get(int(user_id))

Also in our index route we have used login_required decorator, now no one can access

our index page without login. and in here you can see we are getting the current logged

in username. we render this username in our index.html.

@app.route('/')
@login_required
def index():

    name = current_user.username

    return render_template('index.html', name = name)

@app.route('/')

@login_required

def index():

name = current_user.username

return render_template('index.html', name = name)

This is our login route, in this route we are checking the user against our database registered

users, if the credentials were valid, we login the user and redirect the user to the index page,

if user credentials were not valid we are giving a flash message.

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

    if request.method == 'POST':
        if form.validate_on_submit():
            user = UserInfo.query.filter_by(username=form.username.data).first()

            if user:
                if check_password_hash(user.password, form.password.data):
                    login_user(user)

                    return redirect(url_for('index'))


                flash("Invalid Credentials")

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

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

def Login():

form = LoginForm()

if request.method == 'POST':

if form.validate_on_submit():

user = UserInfo.query.filter_by(username=form.username.data).first()

if user:

if check_password_hash(user.password, form.password.data):

login_user(user)

return redirect(url_for('index'))

flash("Invalid Credentials")

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

And this is our logout view.

@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('Login'))

@app.route('/logout')

@login_required

def logout():

logout_user()

return redirect(url_for('Login'))

Our forms.py file, we have just our LoginForm and RegistrationForm.

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()])

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()

Our base.html file, also we have added our login and signup buttons with logout link.

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="{{url_for('logout')}}">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="{{url_for('logout')}}">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 13 </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 13 </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>Home Page - Welcome to codeloop.org</h1>
<h3>Tutorial Number 13 </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>Home Page - Welcome to codeloop.org</h1>

<h3>Tutorial Number 13 </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 13 </h3>

<p>
In this tutorial we are going to talk
about Flask Login and Logout.

</p>


    <h2>Hello Mr. {{name}}</h2>


</div>

{% endblock %}

{% extends 'base.html' %}

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

{% block body %}

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

<h3>Tutorial Number 13 </h3>

<p>

In this tutorial we are going to talk

about Flask Login and Logout.

</p>

<h2>Hello Mr. {{name}}</h2>

</div>

{% endblock %}

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

we can not access to index page and it is redirecting us to the login page.

If you give your valid credentials, you will be redirected to the index page.

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

Subscribe and Get Free Video Courses & Articles in your Email