Using , jQuery, Sequelize and SQL to Login and route

Question

My goal is to use the values of the IDs #username-l and #pwd-l in a html form when the user clicks the button submit, have it compare those values to values in a SQL database and if the values equal exactly the values in the database then route the user to a specified route (for now just /user is fine for testing). Currently it routes to /? with no errors which is not specified anywhere. The console shows the query is returning username = null and password = null. I have seeds in the DB called username = test password = test for testing. Any help is appreciated!

HTML:

<form id="login-form">
                      <div class="form-group">
                        <label for="username-l">Username:</label>
                        <input type="username" class="form-control" id="username-l" placeholder="Enter username">
                      </div>
                      <div class="form-group">
                        <label for="pwd-l">Password:</label>
                        <input type="password" class="form-control" id="pwd-l" placeholder="Enter password">
                      </div>
                      <button id="login-button" type="submit" class="btn btn-default">Login</button>
                  </form>

SEQUELIZE:

app.get("/api/users", function(req, res) {

    db.User.findAll({
      where:
      {
        username: req.body.username,
        password: req.body.password
      }
    }).then(function(dbUser) {
      // res.json(dbUser);
      if (req.body.username === dbUser.username && req.body.password === dbUser.password) {
      res.redirect("/users");
      } else {
        console.log("error");
      }
    });
  });

LOGIN.JS:

$("#login-button").on('click', function() {
    var username = $("#username-l").val().trim();
    var password = $("#pwd-l").val().trim();

    $.get("/api/users", function(data){
        console.log(data);
        if (username === data.username && username === data.password) {
            reRoute(); 
        } else {
            console.log("that does not exist");
        }
    });
});

function getUser(userData) {
    $.get("/api/users", userData).then(reRoute());
  }

function reRoute() {
    window.location.href = "/users";
}

Answer 1

First of all, you're doing a GET request, which, as much as I know HTTP, dosn't have body. Second, I'm no expert in jQuery, nor I've ever used it, but a quick Google search showed that second parameter is passed as a query string, which is how GET is supposed to work. If you have any data to send, you send it via query string, not through request body.

Therefor, the problem you have is with the server side code, where you read username and password from body instead from query string. So in order for this to work, you need to extract username and password from query like this (I'm guessing you're using Express):

app.get("/api/users", function(req, res) {
    const username = req.query.username;
    const password = req.query.password;
    // do the rest of the stuff with Sequelize and bussiness logic here
  });

On the sidenote, you're full router callback has some bad things, like redundant checking if username and password match from the one retrieved from DB. You've already asked Sequelize to retrieve a row from the DB where username and password are the ones you recived from the frontend, and because of that, you don't need to check if instance's username and password matches the one you have. The thing you do need to check if the instance is null, because that means that there is no user with that username and password in your DB. So the "fixed" code should look something like this:

app.get("/api/users", function(req, res) {
  const username = req.query.username;
  const password = req.query.password;

  db.User.findAll({
    where: {
      username,
      password
    }
  }).then(function(dbUser) {
    // res.json(dbUser);
    if (dbUser != null) {
      res.redirect("/users");
    } else {
      // you'd maybe like to set response status to 404
      // also some user friendly error message could be good as response body
      console.log("Error: user not found");
    }
  });
});

I hope you get the idea of the flow and where was your mistake.