jQuery AJAX call to Passportjs login on Express (nodejs) Framework

Question

I'm trying to use AJAX to call a login verification using Passport library on a Express application. Im using local strategy like this:

router.post('/login', function(req, res, next) {


  passport.authenticate('loginUsers', function(err, user, info) {

    if (err) {
       return next(err);
   }
    // if user is not found due to wrong username or password
    if (!user) {
      //return res.render('login', {});
      res.json({detail: info});
    }//(!user)
    //passport.js has a logIn user method

    req.logIn(user, function(err) {

      if (err) { return next(err); }
      return res.render('account', {});
    }); //req.logIn
  })(req, res, next); 
}); 

The problem is I dont know how to pass the variables to Passport, emulating bodyparser.json() functionality, im trying to do something like this:

$(document).ready(function() {


   $('form').submit(function() {
      $.ajax({
         type:'POST',
         url:'/login',
         data:  {username: $('#us').val(), password: $('#pass').val()},
         success:function(result){
            if(!result){
               //$('form input[name="username"]').css("background-color", "red");
            }

         },
         error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
         }
      });


      return false;
   });

});

EDIT-

My Strategy:

passport.serializeUser(function(user, done) {
  done(null, user);
});

passport.deserializeUser(function(user, done) {
  done(null, user);
});


passport.use('loginUsers', new LocalStrategy(

  function(username, password, done) {
     users.findOne({email: username}, function(err, user) {

      if (err) { return done(err); }

      if (!user) {

        console.log('[+] DB: user/password failure'.red);
        return done(null, false, {error: ''});

      }else if(!bcrypt.compareSync(password, user.hashed_password)){

        console.log(("[+] Password error").red);
        return done(null, false, {error: ''});

      }else if(user.verified === false){

            console.log("[+] DB: user not verified");
            return done(null, false, {error: ''});

      }else{

      console.log("[+] DB: user/password success".green);
      return done(null, user);
      }  //else
    }); //findOne
  }
));

Error on passing credentials persist, im geting:

Object {detail: Object}detail: Objectmessage: "Missing credentials"proto:

Can someone point me in the right direction?

Answer 1

This should work, untested, let me know if there's typos.

Basically, you need your express app to listen for a POST request on /login, in this route, you can add your passport auth.

app.post('/login', function(req, res, next) {
    passport.authenticate('loginUsers', function(err, user, info) {
        if (err) { return next(err); }
        if (!user) { return res.render('account'); }
        req.logIn(user, function(err) {
            if (err) { return next(err); }
            return res.json({detail: info});
        });
    })(req, res, next);
});

Also, in your strategy, make sure the fields name are correct ie:

passport.use('loginUsers',new LocalStrategy({
            usernameField : 'username',
            passwordField : 'password',
            passReqToCallback : true
        },