I've been taking courses and watching tutorials on NodeJS for awhile and decided to put them to good use in an app.
For this project I need users to signup and login in order to store their activity in a database. I used Passport to do this process, the code for this section of the project is this:
/****** Passport functions ******/
passport.serializeUser(function (user, done) {
done(null, user.id);
});
passport.deserializeUser(function (id, done) {
db.user.findOne( { where : { idUser : id } }).then(function (err, user) {
done(err, user);
});
});
//Facebook
passport.use(new FacebookStrategy({
//Information stored on config/auth.js
clientID: configAuth.facebookAuth.clientID,
clientSecret: configAuth.facebookAuth.clientSecret,
callbackURL: configAuth.facebookAuth.callbackURL,
profileFields: ['id', 'emails', 'displayName', 'name', 'gender']
}, function (accessToken, refreshToken, profile, done) {
//Using next tick to take advantage of async properties
process.nextTick(function () {
db.user.findOne( { where : { idUser : profile.id } }).then(function (err, user) {
if(err) {
return done(err);
}
if(user) {
return done(null, user);
} else {
db.user.create({
idUser : profile.id,
token : accessToken,
nameUser : profile.displayName,
email : profile.emails[0].value,
sex : profile.gender
});
return done(null);
}
});
});
}));
app.use(express.static(__dirname + '/public/'));
/* FACEBOOK STRATEGY */
// Redirect the user to Facebook for authentication. When complete,
// Facebook will redirect the user back to the application at
// /auth/facebook/callback//
app.get('/auth/facebook', passport.authenticate('facebook', { scope : ['email']}));
/* FACEBOOK STRATEGY */
// Facebook will redirect the user to this URL after approval. Finish the
// authentication process by attempting to obtain an access token. If
// access was granted, the user will be logged in. Otherwise,
// authentication has failed.
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { successRedirect: '/app',
failureRedirect: '/' }));
app.get('/', function (req, res) {
res.render('/');
});
app.get('/app', isLoggedIn, function (req, res) {
res.sendFile('app.html');
});
function isLoggedIn(req, res, next) {
if(req.isAuthenticated()) {
return next();
} else {
res.redirect('/');
}
}
The tutorial I followed on Facebook Auth using Passport used pretty much the same code, I changed the User model because the tutorial used Mongoose and I'm using Sequelize but this aspect is working great, when I click to signup with FB it registers me or logs me in, the queries do the work.
However, what isn't working is the redirection. When I register using facebook, it gets stuck and doesn't load anything (wheel keeps spinning on index.html (where the FB button is) and doesn't load anything). When I login using facebook, it only displays this on the screen:
[object SequelizeInstance:user]
On the tutorial, the instructor used EJS as a template language,however I already built 95% of the front end of the project using HTML, CSS and jQuery (yeah, should have used React or Angular but time is sensitive and was already learning Node). I believe this is one of the reasons this is happening but I'm not 100% sure on what is going on here and why I'm getting the error or how to get around.
Any help is appreciated, if more information / code is needed, let me know. Thank you
So after a good amount of time debugging and with some good help, I figured out what was causing my problem, there were actually three errors in there.
First of all, in the Facebook Strategy, this is how I should had built it:
passport.use(new FacebookStrategy({
//Information stored on config/auth.js
clientID: configAuth.facebookAuth.clientID,
clientSecret: configAuth.facebookAuth.clientSecret,
callbackURL: configAuth.facebookAuth.callbackURL,
profileFields: ['id', 'emails', 'displayName', 'name', 'gender']
}, function (accessToken, refreshToken, profile, done) {
//Using next tick to take advantage of async properties
process.nextTick(function () {
db.user.findOne( { where : { idUser : profile.id } }).then(function (user, err) {
if(err) {
return done(err);
}
if(user) {
return done(null, user);
} else {
//Create the user
db.user.create({
idUser : profile.id,
token : accessToken,
nameUser : profile.displayName,
email : profile.emails[0].value,
sex : profile.gender
});
//Find the user (therefore checking if it was indeed created) and return it
db.user.findOne( { where : { idUser : profile.id } }).then(function (user, err) {
if(user) {
return done(null, user);
} else {
return done(err);
}
});
}
});
});
}));
The callback after db.user.findOne had switched parameters, so it was giving me an error every time even though it didn't have one, so I switched those and also added a query to look for the user in the DB after creating it to be able to return it.
On the second facebook route, this is how I built it:
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { failureRedirect: '/' }),
function(req, res) {
// Successful authentication, redirect home.
res.redirect('../../app.html');
});
This allowed me to continue using HTML (I'll probably rewrite it to use a better view later on), and on testing, I was able to get the information from req.user.
Finally, I had a minor naming error on Passport's serializeUser:
passport.serializeUser(function (user, done) {
done(null, user.idUser);
});
Just changing from user.id to user.idUser to maintain the naming convention I used.
Hopefully this helps other people using Sequelize with Passport.