Passport: "deserializeUser" not called with CORS. when FE & BE serve on different ports

[Marshevskyy]

My app is being served from a different port (FE side) than my API server (BE side). I am using passport to authenticate the user of the API. Looks like "deserializeUser" not called with CORS. I've already tried add to FE request "withCredentials" option, but without luck.

btw When I tested my BE server with POSTMAN, all work fine, "deserializeUser" was called, and req.user has beed returned (it means that I setted up server correctly). But if you need my server.js config, I can sent it out, just le me know.

I also using "passport-local" strategy, maybe there is a problem....

is it possible to get "passport" workable with CORS app? I want to have getting "req.user" in each request =), because, for now I can get in only right after passport.authenticate('local-login'....... -> req.login -> req.user

pls help

[marcoapferegrino]

Hi guys is there any solution?

I have my front in one port and my back in other but deserialize is not being called. I tried credentials true in my cors but did not work. Thanks for your answers

[Marshevskyy]

hey @marcoapferegrino. It is not working so far. I've found workaround, once user logs in, user saved into cache
const mcache = require('memory-cache');
setCurrentUser: function (token, user) { mcache.put(token, JSON.stringify(user)); }
then I can get user by token in any places I want

[YoshiYo]

Same problem here.
With postman it works, but with the localhost juste the serialize is called.
I tried everything.

Any solution ?

[aaomidi]

I'm having this issue as well.

[bnerDY]

Same problem here.

[aaomidi]

My problem was that the cookie was not being set properly on client side. CORS is fine. Ports are fine.

[marcoapferegrino]

I set credentials true in my Vue component and also I did the normal configuration for cookies. My problem was the cookie was not set correctly or was not sent correctly. I hope this helps you guys

[Bitpocketer]

Same issue, spent whole day trying to figure it out no luck, with postman it works fine.

[aaomidi]

@Bitpocketer it's most likely an issue with your client not sending the proper cookies back.

[Bitpocketer]

@aaomidi thank you very much, but could you please guide me what needs to be done, I'm very new to web development, I have very little idea of cookies and cookie parser, but why does it work fine for other strategies like facebook and google i have no idea, it is only local strategy that is problematic.

[aaomidi]

@Bitpocketer I'm personally new too, but you need a few headers to enable credential passing to origin, and making sure you're setting the cookies.

[bnerDY]

I solved my problem with sending request with "withCredentials: true". Everything works fine then. Hope that helps

[adamgen]

Same issue

[almondevon]

I'm having this issue as well. The client cookie doesn't seem to be the issue, the passport object just isn't saved inside of the MemoryStore when coming from a CORS browser, however it is with Postman. I'll keep digging and will report back with any other clues.

[adamgen]

I eventually walked around using a JWT.

Here's an example, instead of passport.authenticate('local') to identify if the user is logged in , I used the callback under the /me route as a middleware. Also on the login route I used passport.authenticate('local', {session: false}) so it won't try to keep track of the session itself.

https://gist.github.com/adamgen/d79e3148913bb7ee609fb7c589e94e8e

On the client, after a successful login I save the token on localStorage and I send it with every request that need permissions.

[rewantkedia]

My problem was that the cookie was not being set properly on client side. CORS is fine. Ports are fine.

How did you solve it ?

[aaomidi]

How did you solve it ?

Read what I sent earlier :P

[rewantkedia]

_Working on sending {withCredentials:true} parameter along with every request from the frontend so that the frontend sends cookie along with every request._

Added the following code in the backend:

app.use(cors());

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "frontendURL");
res.header("Access-Control-Allow-Credentials", true);
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});

Example front-end request for login handle:

const login_axios = axios.create({
withCredentials: true,
headers: {
Accept: "application/json",
"Content-Type": "x-www-form-urlencoded"
},
params: {
username: this.state.username,
password: this.state.password
}
});
login_axios
.post()
.then(function(response) {
console.log("RESPONSE");
console.log(response);
})
.catch(function(error) {
console.log("ERROR");
console.log(error);
});

[gabgagnon]

Don't forget to call the fonction req.logIn(user, () => {}); during the authentication! The doc is lying, passport.authenticate() middleware DOES NOT invokes req.login() automatically.

passport.serializeUser and passport.deserializeUser will never be call if you don't call this fonction by yourself!

5 hours for this...

[pavan-sagar]

Hi All, I had this exact same problem and literally spent an entire day pulling my hair. Passport was recognising session when sending request from Postman but not from the frontend. My Frontend was on port 3000 and backend on 3001. I solved the problem by following below steps :

Step 1. Setting with credentials flag to true in the axios request from FE
{withCredentials:true}

This will make sure that cookies are sent when making a request to cross origin BE (as they are running on different ports).

Step 2: Enabling such requests from an allowed origin in BE cors option

app.use(cors({credentials: true, origin: 'http://localhost:3000'}))

Original Credit --> https://stackoverflow.com/questions/43002444/make-axios-send-cookies-in-its-requests-automatically