Validating User Login

Question

Upon pressing the sign in button it prints out the whole error.html file to the web console rather than redirecting to userhome.html, which bit is going wrong, cheers! Code for everything is below...

Python:

@app.route('/ValidateLogin',methods=['POST'])
def ValidateLogin():
    try:
        _username = request.form['username']
        _password = request.form['password']

        #connection to MySQL
        cur = mysql.connection.cursor()
        cur.callproc('sp_validateLogin', (_username,))
        data = cur.fetchall()

        if len(data) > 0:
            if check_password_hash(str(data[0][3]), _password):
                session['user'] = data[0][0]
                return redirect('/UserHome')
            else:
                return render_template('error.html', error = 'Wrong Email Address or Password')
        else:
            return render_template('error.html', error = "Invalid Email Address or Password")

    except Exception as e:
        return render_template('error.html', error = str(e))
    finally:
        cur.close()

JS:

$(function() {
    $('#btnSignIn').click(function() {
        $.ajax({
            url: '/ValidateLogin',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

score 0 · Answer 1 · edited May 23 '17 at 12:07

When the correct user credentials are entered it is redirecting to /UserHome.

You can confirm that by looking at the request logs which will look something like this:

127.0.0.1 - - [28/Apr/2016 22:27:59] "POST /ValidateLogin HTTP/1.1" 302 -
127.0.0.1 - - [28/Apr/2016 22:27:59] "GET /UserHome HTTP/1.1" 200 -

You can see that the POST request to /ValidateLogin generated by $.ajax() was responded to with a 302 redirect to /UserHome which $.ajax() then followed. This happens automatically, so your javascript has no chance to act on the redirect.

With reference to this answer, one solution is to have your server send a JSON response which includes a "location" URL to redirect to when the login is successful. Then have your success() handler redirect the browser with window.location.replace(location).

If the login is unsuccessful then the HTML rendered from the error.html template could be returned in a different JSON item, which the success() handler (because you should now always get a 200 response) uses to set the document content. Check the referenced answer for some code that shows how to handle it on the client side.

thanks for the answer but I worked out the reason as to why it wasn't working. The password was being hashed and then the variable size was too small to hold the hashed password in the database, causing it to always display the error page! — Yatestom, Apr 28 '16 at 14:55
@Yatestom: really? That's not the problem that you originally described, but I notice that you have since updated your question. Regardless you must still be experiencing the `$.ajax()` redirect problem that I describe above - the browser is not going to redirect to the required page. Did you modify your javascript to handle it? — mhawke, Apr 28 '16 at 22:24

Validating User Login

1 Answers1