Skip to content

logging in user

Jump to bottom
Manish Sah edited this page Sep 25, 2020 · 1 revision

Logging in User

Now that we have our login route and login form, we will create login page to display login form. Lets create login.html in templates

{% extends 'layout.html' %}
{% block content %}
<div class="content-section">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Login</legend>

            <div class="form-group">
                {{ form.email.label(class="form-control-label") }}
                {% if form.email.errors %}
                    {{ form.email(class="form-control form-control-lg is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.email.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.email(class="form-control form-control-lg") }}
                {% endif %}
            </div>
            <div class="form-group">
                {{ form.password.label(class="form-control-label") }}
                {% if form.password.errors %}
                    {{ form.password(class="form-control form-control-lg is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.password.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.password(class="form-control form-control-lg") }}
                {% endif %}
            </div>


        </fieldset>
        <div class="form-group">
            {{ form.submit(class="btn btn-outline-info") }}
        </div>

    </form>
</div>
{% endblock content %}
  • Note: This is similar to registration page. you can copy the contents of registration page as a starting point and remove the fields that are not required in login form

login form Submission

when the user submits the login form , we need to handle the logic in our login route. lets update our login route as follows:

blog/routes.py

from flask import session
.
.
@app.route("/login", methods=["GET", "POST"])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(email=form.email.data).first()
        if user and user.password == form.password.data:
            session['email'] = user.email
            flash(f'Login Successful', 'success')
            return redirect("/")
        else:
            flash(f'Incorrect email/password', 'danger')
    return render_template('login.html', form=form)

we will be using session to handle user login.

session

Like Cookie, Session data is stored on client. Session is the time interval when a client logs into a server and logs out of it. The data, which is needed to be held across this session, is stored in the client browser.

A session with each client is assigned a Session ID. The Session data is stored on top of cookies and the server signs them cryptographically. For this encryption, a Flask application needs a defined SECRET_KEY.

Session object is also a dictionary object containing key-value pairs of session variables and associated values.

displaying flash messages

once user logs in , we need to display flash message for successful or unsuccessful login. we have only added the code for displaying flash messages in registration.html. Instead of adding the same code in login.html, we will move those code from registration.html to layout.html so that all the page that inherits layout will have those codes.

{% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-success">
            {{ messages }}
        </div>
        {% endfor %}
    {% endif%}
{% endwith %}

our layout.html will be like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="static/main.css" type="text/css">
    {% if title_name %}
    <title>{{ title_name }}</title>
    {% else %}
    <title>Title</title>
    {% endif %}
</head>
<body>
<header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
        <div class="container">
            <a class="navbar-brand mr-4" href="/">Flask Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
                    aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarToggle">
                <div class="navbar-nav mr-auto">
                    <a class="nav-item nav-link" href="/">Home</a>
                    <a class="nav-item nav-link" href="/about">About</a>
                </div>
                <!-- Navbar Right Side -->
                <div class="navbar-nav">

                    <a class="nav-item nav-link" href="#">Login</a>
                    <a class="nav-item nav-link" href="#">Register</a>

                </div>
            </div>
        </div>
    </nav>
</header>

{% with messages = get_flashed_messages() %}
    {% if messages %}
        {% for message in messages %}
        <div class="alert alert-success">
            {{ messages }}
        </div>
        {% endfor %}
    {% endif%}
{% endwith %}
{% block content %}
{% endblock content %}

</body>
</html>

Implementation can be found over this commit

Clone this wiki locally