I'm currently in the process of adding authentication to a rather large React/Redux/Express application, but the user cookie is never being set.
I'm using client-sessions to store the cookie, as I have no intention of creating a database or similar for storage (I tried an express-session implementation, but the default store shouldn't be used for production environments).
As far as I can tell, passport + client-sessions should work, as long as the name of the client-sessions cookie is set to "user", but nothing is ever being stored. However, I do not believe client-sessions to be my current problem, as passport.serializeUser is never actually fired, even though the Facebook login returns successfully (adds a whooping large /?code=verylongstring to the URL upon return).
Either I have simply overlooked some detail, or there's an issue hidden in the React/Redux setup causing this (for example, I'm using React Router for all my routes except the ones mentioned in the example below).
The login button is a fairly simple one:
<div><a href="/auth/facebook">Login with Facebook</a></div>
I've removed the vast majority of the content of my server.jsx file, but kept the relevant code:
/*
Lots of other imports
....
....
....
*/
import express from 'express';
import passport from 'passport';
import strategy from 'passport-facebook';
import sessions from 'client-sessions';
const app = express();
// Facebook strategy
passport.use(new strategy.Strategy({
clientID: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
callbackURL: 'http://localhost:8081/',
passReqToCallback: true
},
function(accessToken, refreshToken, profile, cb) {
return cb(null, profile);
}));
// Serialize passport user
passport.serializeUser(function(user, cb) {
console.log("SERIALIZE");
cb(null, user);
});
// Deserialize passport user
passport.deserializeUser(function(obj, cb) {
console.log("DESERIALIZE");
cb(null, obj);
});
// Client-sessions
app.use(sessions({
cookieName: 'user',
secret: 'thisisjustatest',
duration: 24 * 60 * 60 * 1000,
activeDuration: 1000 * 60 * 5
}));
// Facebook authentication paths
app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { successRedirect: '/',
failureRedirect: '/' }));
app.use(passport.initialize());
app.use(passport.session());
app.enable('trust proxy');
app.use((req, res) => {
console.log(req);
/*
A lot of code
....
....
....
*/
}
Any advice? I'm aware that custom strategy requires a manual login to be called, but I'm only using the Facebook strategy, so I'm at something of a loss here.
Edit: I suspect it might be down to how the application is divided into front-end (app.js) and back-end (server.js). Not sure how to get around it without a rather large re-write.
It seems I forgot to double check my URLs. The solution is quite simple: The callback URL has to match the passport callback, so in this case it should be http://localhost:8081/auth/facebook/callback.