AngularJS bad POST request with Express / Passport - angularjs

Trying to authenticate with passport via AngularJS. I've found a lot of threads saying that the issue is the default Content-Type of the request. Tried a couple of ways and I always get a 400 Error (Bad Request).
$http.post('/login', {
username: $scope.user.username,
password: $scope.user.password
})
.success(function(user) {
console.log('success');
// $location.url('/');
})
.error(function() {
console.log('failed');
// location.url('/login')
})
[Snipped some stuff that I don't think is the issue]
UDPATE: I think this might be an issue with passport. Using the body-parser middleware, I'm able to tell that I'm sending the data in the following format:
{ username: me, password: 12345 }
Alas, I still get the error code 400.
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
app.post('/login', jsonParser, function(req,res) {
if (!req.body) {
console.log('no body');
return res.sendStatus(400);
}
console.log(req.body);
res.end(req.user);
});
Here's the local strategy
passport.use(new LocalStrategy(
function(username, password, done) {
if (username === "me" && password === "123") {
return done(null, {name: "me"});
}
return done(null, false, {message: 'Incorrect username or password.'});
}
));
And the route for when I try to get passport to work.
app.post('/login',passport.authenticate('local'), function(req,res) {
console.log('login in server.js')
res.send(req.user);
});
Pretty sure this is all standard, based on everything I've read.

Needed this...
var bodyParser = require('body-parser');
app.use(bodyParser.json());

Related

MongooseJS Update API

I am having a 404 issue with my NodeJS API. I don't know if I am quite doing it right, I tried referring to documentation, and I feel like it's close.
MongoDB Schema
var User = mongoose.Schema({
local: {
email: String,
password: String,
handle: String,
pic: {data: Buffer, contentType: String}
}
});
NodeJS UPDATE API
app.post('/api/users', function(req, res, user) {
User.update({email : user.email,
password : user.password,
handle : user.handle,
pic : user.pic},
{$set: {
email : req.body.email,
password : req.body.email,
handle : req.body.handle,
pic : req.body.pic,
done : false
}
}, function(err, users) {
if(err) {
res.send(err);
}
res.redirect('/profile');
});
});
Controller POST API call
$scope.editProfile = function() {
$http.post('/api/users', $scope.editFormData)
.success(function(data) {
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
Any suggestions?
You are not doing a post call correct. You can't pass your post object in the URL. Your node post should look like this.
app.post('/api', upload.array(), function(req, res) {
var body = req.body; //body will be your post object
});
For a post to work you need to make sure you have the proper things added to your Node Project. The above example is using ExpressJS with require('body-parser') and require('multer'). The example you are showing will never show as a true path. For reference here is how you would do a get in node.
app.get('/getcall/*', function(){
// the * denotes any singleton parameter you wanted to pass in.
})
Here are the references I use in all my node projects. These are the basics.
var express = require('express'),
bodyParser = require('body-parser'),
multer = require('multer'),
helmet = require('helmet'),
upload = multer(),
path = require('path'),
request = require('request'),
app = express(),
http = require('http');
Also as for your angular call an $http.post looks like this and you should be using .then instead of .success.
$http.post('/api', $scope.editFormData)
.then(function successCallback(resp) {
console.log(resp.data)
}, function errorCallback(resp) {
console.log(resp)
});

PassportJS with NodeJS not returning errors (MEAN stack)

I'm running a MEAN stack with PassportJS for authentication, and I'm having an issue with my signup module interacting with my Angular controller. Basically, the errorCallback is never called, and I'm not sure how to properly use the Passport done() implementation.
I have a basic signup form that upon submission, calls this request:
$http.post('/api/signup', {
name: $scope.user.name,
email: $scope.user.email,
password: $scope.user.password,
userSince: new Date().now
}).then(
function successCallback(res) {
$rootScope.message = 'Account Created';
console.log('Success'+res);
console.dir(res,{depth:5});
$location.url('/signupConf');
}, function errorCallback(res) {
$rootScope.message = 'Failure, see console';
console.log('Error: '+res);
console.dir(res,{depth:5});
$location.url('/');
});
With the express route:
app.post('/api/signup', passport.authenticate('local-signup'),function(req, res) {
console.log('User: ' + req.user.email);
});
And finally the Passport (adapted from a Scotch.io tut) module, abridged a little:
passport.use('local-signup', new LocalStrategy({
usernameField : 'email',
passwordField : 'password',
passReqToCallback : true
},
function(req, email, password, done) {
console.log("Signup Request: "+email);
process.nextTick(function() {
User.findOne({ 'email' : email }, function(err, user) {
if (err) { return done(err); }
// check to see if theres already a user with that email
if (user) {
console.log("User not created, already exsists: "+user);
return done(err, false, {message: 'Username already exsists.'});
} else {
// if there is no user with that email
// create the user
var newUser = new User();
//a bunch of data creation here
newUser.save(function(err) {
if (err) {throw err;}
console.log("Sucessfully created: "+newUser);
return done(null, newUser);
});
}
});
});
}));
Everything runs fine, users are created corrected, and if a user with a given email exists, a new one isn't written over it. However, no matter what, successCallback is called. When a username already exist, I can see a 401 error in the browser console. When its a bad request (i.e. not all fields filled), a 400 error.
All the server side console.logs work fine, leading me to think there's something wrong in my angular frontend, or how the backend is responding to the request.
(Scotch.io tutorial credit: https://scotch.io/tutorials/easy-node-authentication-setup-and-local)
The problem was sort of staring me in the face, it was in my route handling.
app.post('/api/signup', function(req, res, next) {
passport.authenticate('local-signup', function(err,user,response) {
//handle responses based on state of user and err
})
(req, res, next);
});

CORS issue when combining AngularJS with PassportJS

I'm trying to combine ExpressJS + PassportJS with Angular SPA application. The problem probably is in CORS headers.
Here is what I'm trying to accomplish:
Client View:
<a class="btn btn-block btn-social btn-twitter" ng-click="twitter()">
<i class="fa fa-twitter"></i> Sign in with Twitter
</a>
Client Controller:
Is the following approach correct?
$scope.twitter = function() {
$http.get('oauth/twitter').then(function(res) {
// Fetch the user from response and store it somewhere on the client side
});
};
The server side responsible for handling authentication looks as follows:
Server routes:
app.get('/oauth/twitter', passport.authenticate('twitter', {
failureRedirect: '/signin'
}));
app.get('/oauth/twitter/callback', passport.authenticate('twitter', {
failureRedirect: '/signin',
successRedirect: '/'
}));
Twitter strategy:
passport.use(new TwitterStrategy({
consumerKey: config.twitter.clientID,
consumerSecret: config.twitter.clientSecret,
callbackURL: config.twitter.callbackURL,
passReqToCallback: true
}, function (req, token, tokenSecret, profile, done) {
var providerData = profile._json;
providerData.token = token;
providerData.tokenSecret = tokenSecret;
var providerUserProfile = {
fullName: profile.displayName,
username: profile.username,
provider: 'twitter',
providerId: profile.id,
providerData: providerData
};
users.saveOAuthUserProfile(req, providerUserProfile, done);
}));
Users Server Controller:
exports.saveOAuthUserProfile = function (req, profile, done) {
User.findOne({
provider: profile.provider,
providerId: profile.providerId
}, function (err, user) {
if (err) {
return done(err);
} else {
if (!user) {
var possibleUsername = profile.username || ((profile.email) ? profile.email.split('#')[0] : '');
User.findUniqueUsername(possibleUsername, null, function (availableUsername) {
profile.username = availableUsername;
user = new User(profile);
user.fullName = profile.fullName;
user.save(function (err) {
if (err) {
var message = getErrorMessage(err);
req.flash('error', message);
return done(err);
}
return done(err, user);
});
});
} else {
return done(err, user);
}
}
});
};
When I click Sign in with Twitter in a browser (Chrome/Firefox) I see the following requests being made:
GET http://localhost:3000/oauth/twitter (302 Moved Temporarily)
GET https://api.twitter.com/oauth/authenticate?oauth_token=Zz014AAAAAAAg5HgAA******** (307 Internal Redirect)
The browser complains about missing "Access-Control-Allow-Origin" headers.
To fix this I have tried using cors package like this
var cors = require('cors');
api.use(cors());
and also manually setting headers of all responses, with no effect.
Could you please show me the way?
Regards
Instead of using cors module,try to set header in nodejs
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
I faced with a similar problem and couldn't fix it within the code. So I found this Chrome extension: Allow-Control-Allow-Origin: *
You can set URL patterns and enable Cross-Origin Resource Sharing.
Don't forget to disable it when you finish your work!

Trouble with getting data from nodejs/express because of CORS

Solution here: Trouble with getting data from nodejs/express because of CORS
So i have a problem with getting data from nodejs/express because of CORS.
I'm getting error something like this (sorry, error i translated with google):
Query from an external source is blocked: one source of policy prohibits reading remote resource on http://localhost:8080/api/login. (Cause: Failed to query CORS).
I'm trying to send query with angular $http.post
$http.post($rootScope.api + 'login', {
email: form.email.$viewValue,
password: form.password.$viewValue
}).then(function(data) {
console.log(data.data);
});
Here is my server code (i cut some code, because i think it not important):
/* some nodejs requires */
var cors = require('express-cors');
mongoose.connect('mongodb://localhost:27017/batarindashboard');
require('./config/passport')(passport);
/* some express settings */
app.use(cors({
allowedOrigins: [
'localhost:*', '127.0.0.1:*'
]
}));
var port = process.env.PORT || 8080;
var router = express.Router();
router.use(function(req, res, next) {
console.log('Something is happening');
next();
});
/* sign up api */
router.post('/login', passport.authenticate('local-login', {
failureRedirect : '/api/passport_message',
failureFlash : true
}), function(req, res) {
res.json({
'message': 'You successfully signed in!'
});
});
/* passport_message api */
/* is_logged_in api */
/* logout api */
app.use('/api', router);
app.listen(port);
console.log('Magic happens on port ' + port);
And passport file (maybe problem is here. Why not?)
var LocalStrategy = require('passport-local').Strategy;
var User = require('./../app/models/user');
module.exports = function(passport) {
/* some serialize deserialize code */
/* sign up strategy */
passport.use('local-login', new LocalStrategy({
usernameField: 'email',
passwordField: 'password',
passReqToCallback: true
}, function(req, email, password, done) {
User.findOne({
'local.email':email
}, function(err, user) {
if(err) return done(err);
if(!user) {
return done(null, false, req.flash('message', 'No user found.'));
}
if(!user.validPassword(password)) {
return done(null, false, req.flash('message', 'Oops! Wrong password.'));
}
return done(null, user);
})
}))
};

howto prevent www-authenticate header when using passport-http Basic + passport-local combination

Hi I want to support both formbased authentication and http basic authentication in my app. Everything works as expected except when I use form based auth via angularjs with wrong credentials.
Instead of having my angular code handle the 401, the browser shows the BASIC auth dialog, caused by the WWW-Authenticate header.
How can I prevent that header from being added when the local strategy is used?
Or how can I support both mechanisms in a different way?
I use the following route in my express based app.
api.post('/authenticate', passport.authenticate(['local', 'basic'], { session: false }), function (req, res) {
This enables both authentication methods on that url. I repeat, when I use wrong credentials using formbased it shows me the basic auth dialog (I don't want that).
Following is how I registered the strategies.
passport.use(new BasicStrategy({ realm: 'Authentication failed. Wrong username or password.'}, verifyLocalUser));
passport.use(new LocalStrategy(verifyLocalUser));
This is how my verifyUser method looks like...
var verifyLocalUser = function (username, password, next) {
User.findOne({
username: username
}).select('fullname admin username password').exec(function (err, user) {
if (err) {
return next(err);
}
if (user && user.comparePasswords(password)) {
return next(null, user);
} else {
next(null, false, { message: 'Authentication failed. Wrong username or password.' });
}
});
}
Does anyone know how to support multiple authentication methods using passport.js?
For completeness, this is the angular code which authenticates me...
authFactory.signIn = function (username, password) {
return $http.post('/api/authenticate', {
username: username,
password: password
}).then(function (res) {
AuthToken.setToken(res.data.token);
return res.data;
}, function (res) {
console.warn(res);
});
};
instead of this:
next(null, false, { message: 'Authentication failed. Wrong username or password.' });
You can use this:
cb(new YourCustomError())
And "YourCustomError" can have a message, for me mine "YourCustomError" looks like:
class HttpError extends Error {
constructor (msg = 'Invalid Request', status = 400) {
super(msg)
this.status = status
}
}
class Forbidden extends HttpError {
constructor (msg = 'Forbidden') {
super(msg, 403)
}
}
Or probably new Error(<message>) will work properly for you, too

Resources