Validate login form with JS/PHP

Question

I want to be able to either send a user to a restricted area or return some text that says Email and or password do not exist or something similar. I'm having trouble getting this to work as whether or not the email and password are correct NOTHING happens. I'm sending the form to the index page where the script to run this sits. Not sure why I'm not redirecting or getting any kind of errors.

The restricted page checks if a $_SESSION variable isset(), if not then send them back home.

JS

loginBtn.addEventListener('click', e => {
  e.preventDefault();

  ajaxRequests.login(`login_email=${ loginEmail.value }&login_password=${ loginPassword.value }`);
});

ajaxRequests.login()

login(formData) {
  return new Promise((resolve, reject) => {
    this.xhr.open('POST', '//localhost/mouthblog/', true);
    this.xhr.send(formData);

    this.xhr.onload = () => {
      if (this.xhr.status == 200) {
        resolve();
      } else {
        reject(this.xhr.statusText);
      }
    };

    this.xhr.onerror = () => {
      reject(this.xhr.statusText);
    };
  });
}

this is the script that is supposed to run when form is sent

  if (isset($_POST['login_email']) && isset($_POST['login_password'])) {
    $email = htmlentities($_POST['login_email'], ENT_QUOTES, 'ISO-8859-15');
    $password = htmlentities($_POST['login_password'], ENT_QUOTES, 'ISO-8859-15');
    $login = new Login($email, $password);

    unset($login);
  }

check for valid $_SESSION vars

  session_start();

  if (!isset($_SESSION['id']) || !isset($_SESSION['name']) || !isset($_SESSION['email'])) {
    header('Location: index.php');
  }

login query (just incase it is needed)

class Login extends Connection {
  public function __construct($email, $password) {
    $this->connect();

    $sql = "SELECT `id`, `name`, `email`, `password` FROM `users` WHERE `email`=:email";
    $query = $this->connect()->prepare($sql);
    $result = $query->execute(
      [
        ':email' => htmlentities($email, ENT_QUOTES, 'ISO-8859-15'),
      ]
    );

    // check if EMAIL exists
    if ($result) {
      $row             = $query->fetch(PDO::FETCH_OBJ);
      $id              = htmlentities($row->id, ENT_QUOTES, 'ISO-8859-15');
      $name            = htmlentities($row->name, ENT_QUOTES, 'ISO-8859-15');
      $email           = htmlentities($row->email, ENT_QUOTES, 'ISO-8859-15');
      $hashed_password = htmlentities($row->password, ENT_QUOTES, 'ISO-8859-15');

      // check if user input PASSWORD matches the unhashed PASSWORD in the database
      if (password_verify($password, $hashed_password)) {
        $_SESSION['id']    = htmlentities($id, ENT_QUOTES, 'ISO-8859-15');
        $_SESSION['name']  = htmlentities($name, ENT_QUOTES, 'ISO-8859-15');
        $_SESSION['email'] = htmlentities($email, ENT_QUOTES, 'ISO-8859-15');

        header('Location: blog_roll.php');
      } else {
        header('Location: index.php');
      }
    } else {
      echo 'THAT EMAIL ADDRESS DOES NOT EXIST';
    }
  }
}

Answer 1

You have to set the content type for your ajax request

this.xhr.open('POST', '//localhost/mouthblog/', true);
this.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.xhr.send(formData);