Why does my ajax login script won't work?

Question

I need an AJAX Login Script for my school project. But it actually won't work because when I try to login, I get kicked to the startpage (login-form) without any message.

That's my backend-script (login2.php):

if(empty($_POST['loginEmail']) || empty($_POST['loginPassword'])) {
    $error[] = "Bitte füllen Sie alle Felder aus!";
}
if (!empty($_POST['loginEmail']) && !filter_var($_POST['loginEmail'], FILTER_VALIDATE_EMAIL)) {
    $error[] = "Bitte geben Sie eine gültige E-Mail-Adresse an!";
} 
if(count($error)>0) {
    $resp['msg'] = $error;
    $resp['status'] = false;
    echo json_encode($resp);
    exit;
}

$sql = "SELECT * FROM `users` WHERE `uEmail` = :email AND `uPassword` = :password";
$stmt = $conn->prepare($sql);
$stmt->execute(array(':email' => $_POST['loginEmail']));
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(count($row)>0) {
    if(!password_verify($_POST['loginPassword'],$row[0]['uPassword'])) {
        $error[] = "Falsches Passwort!";
        $resp['msg'] = $error;
        $resp['status'] = false;
        echo json_encode($resp);
        exit;
    }
    session_start();
    $_SESSION['Email'] = $row[0]['uEmail'];
    $resp['redirect'] = "dashboard.php";
    $resp['status'] = true;
    echo json_encode($resp);
    exit;
}
else {
    $error[] = "Falsche E-Mail-Adresse!";
    $resp['msg'] = $error;
    $resp['status'] = false;
    echo json_encode($resp);
    exit;
}

And this is my JS part of the login form:

$(function() {
    $('#login').click(function(e){
        let self = $(this);
        e.preventDefault();
        self.prop('disabled',true);
        var data = $('#login-form').serialize();
        $.ajax({
            url: '/login2.php',
            type: "POST",
            data: data,
        }).done(function(res) {
            res = JSON.parse(res);
            if(res['status']) {
                location.href = "dashboard.php";
            } else {
                var errorMessage = "";
                console.log(res.msg);
                $.each(res['msg'],function(index,message) {
                    errorMessage += '<p>' + message + '</p>';
                });
                $("#error-msg").html(errorMessage);
                $("#error-msg").show();
                self.prop('disabled',false);
            }
        }).fail(function() {
            alert("error");
        }).always(function(){
            self.prop('disabled',false);
        });
    });
});

When I try to add action="/login2.php" in the form I get a HTTP 500 Error and the message, that it can not process this request at this time.

Answer 1

I'm not sure if this is your main problem, but it's a significant one. You're preparing two parameters:

$sql = "SELECT * FROM `users` WHERE `uEmail` = :email AND `uPassword` = :password";

But you're only binding one:

$stmt->execute(array(':email' => $_POST['loginEmail']));

You don't want to include the password in the select, since you're using password_verify() to validate it later. Change your SQL to this:

$sql = "SELECT * FROM `users` WHERE `uEmail` = :email";