How to change to message when page is refreshed in flask?

Question

app.py is: In this I am using yash and yash as default username and password and the html page prints "Invalid Credentials" when I enter wrong password and enter it. But when I refresh after getting invalid credentials also it shows the same index.html page with "Invalid Credentials" Message. What can I do to show empty login page when I refresh the page from browser?

import flask
app = flask.Flask(name)
u_p={'yash':'yash'}
@app.route('/user/<name>')
def hello_user(name):
    return flask.render_template('hello.html',uname=name)
@app.route('/', methods=['GET', 'POST'])
def index():
    message = ''
    if flask.request.method == 'POST':
        username=flask.request.form['name-input']
        passowrd=flask.request.form['name-password']
        if u_p.get(username,'')==passowrd:
            return flask.redirect(flask.url_for('hello_user',name=username))
        else:
            message='Invalid Credentials'
    return flask.render_template('index.html', message=message)
if name == 'main':
    app.run()

My index.html is:

<!DOCTYPE html>

<html>
    <head>
        <title>Simple Flask App</title>
        <link rel="shortcut icon" href="{{url_for('static', filename='favicon.png')}}" type="image/x-icon">
    </head>
    <body>
        <h1>Login</h1>
        <form method="POST">
            username <input type="text" name="name-input"><br>
            password <input type="password" name="name-password"><br>
            <button type="submit">Submit</button>
        </form>
        <h2>New User : </h2>
        <button type="submit">Register</button>
        <p>{{message}}</p>
    </body>
</html>

score 0 · Accepted Answer · answered Feb 01 '22 at 15:19

The problem is that if you refresh the page, the browser sends the same POST request again, so it's like you've tried to log in with the same wrong credentials again.

You can get around this by redirecting to index if the credentials are wrong - but then you can't pass along the message as a template argument.

Luckily, flask offers Message Flashing exactly for this purpose: https://flask.palletsprojects.com/en/2.0.x/patterns/flashing/

So your code could look something like this:

import flask
name = "main"
app = flask.Flask(name)
app.secret_key = "SECRET!"
u_p={'yash':'yash'}
@app.route('/user/<name>')
def hello_user(name):
    return flask.render_template('hello.html',uname=name)
@app.route('/', methods=['GET', 'POST'])
def index():
    if flask.request.method == 'POST':
        username=flask.request.form['name-input']
        passowrd=flask.request.form['name-password']
        if u_p.get(username,'')==passowrd:
            return flask.redirect(flask.url_for('hello_user',name=username))
        else:
            flask.flash("Invalid Credentials")
            return flask.redirect(flask.url_for("index"))
    return flask.render_template('index.html')
if name == 'main':
    app.run()

index.html

<!DOCTYPE html>

<html>
    <head>
        <title>Simple Flask App</title>
        <link rel="shortcut icon" href="{{url_for('static', filename='favicon.png')}}" type="image/x-icon">
    </head>
    <body>
        <h1>Login</h1>
        <form method="POST">
            username <input type="text" name="name-input"><br>
            password <input type="password" name="name-password"><br>
            <button type="submit">Submit</button>
        </form>
        <h2>New User : </h2>
        <button type="submit">Register</button>
        {% with messages = get_flashed_messages() %}
            {% for message in messages %}
                <p>{{message}}</p>
            {% endfor %}
        {% endwith %}
    </body>
</html>

As a side note: The way you check the username and password, someone can log in with a random username and an empty password.

Can you tell what is the need of secret key here in this program — Yashwanth Sai, Feb 02 '22 at 13:30
@YashwanthSai The flash function needs a [Flask Session](https://flask.palletsprojects.com/en/2.0.x/quickstart/#sessions) to keep track of when to display these flash messages. And for the Flask Session to work, the app needs a secret_key, which you should set to a secret, secure value. For more info on the secret_key see also [this question on StackOverflow](https://stackoverflow.com/questions/22463939/demystify-flask-app-secret-key) — Serge Hauri, Feb 02 '22 at 14:17

How to change to message when page is refreshed in flask?

1 Answers1