Passport local returns error 400 bad request with Angular

Question

I am trying to integrate passport to my code's login form. Client side calling server side works as it should until i call passport.authenticate in the request, 400 Bad Request was returned. What am I missing here.

HTML

        <div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="user-email" type="text" ng-model="user.email">
                    <label for="user-email">Your email address</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <input id="user-password" type="password" ng-model="user.password">
                    <label for="user-password">Your password</label>
                </div>
            </div>
            <div id="login-button-panel" class="center-align">
                <button class="btn" id="login-btn" ng-click="vm.login(user);">Login</button> 
            </div>
            <div class="section center">
                <a class="modal-trigger">Forgot password?</a>
            </div>
        </div>

JS

$http.post('/api/login',user).success(function(result){
    console.log(result)
})

server.js

passport.use(new LocalStrategy(
    function(username, password, done) {
        return done(null, false, {message:'Unable to login'})
    }
));
passport.serializeUser(function(user,done){
    done(null,user);
});

passport.deserializeUser(function(user,done){
    done(null,user);
});
app.post('/api/login', passport.authenticate('local'), function(req,res){
    res.json(req.user)
});

Answer 1

Bad Request was thrown by passport for missing access on username and password.

It is checking body and URL query for fields username and password. If either is falsy the request is rejected with status 400.

On creating your LocalStrategy you may pass set of options in additional argument to constructor choosing differently named fields using options usernameField and/or passwordField. In your particular case this would look like this:

passport.use(new LocalStrategy(
    {usernameField:"user-email", passwordField:"user-password"},
    function(username, password, done) {
        return done(null, false, {message:'Unable to login'})
    }
));