Can't authenticate my cookie when I run the server in Heroku web local

I am a self taught developer (pretty noob) and I’m trying to deploy a working book collection app with Vite-React, running the server on Express, the db on MongoDB and using Passport and express-session for the authentication part.
Is based on the first part of theis course: https://www.freecodecamp.org/learn/quality-assurance/advanced-node-and-express/implementation-of-social-authentication.
I made some changes due to a more recent version of the dependencies.

Basically the problem is that when I open the page I have a certain cookie, but proceding to login my cookie changes and then I end up with all the calls to “/api/auth” authenticated but any other call isn’t.
The login happens correctly, but there’s no serialization and later deserialization.

N.B.
An effect in a react context keeps calling “/auth” to reflect the changes in the UI, I don’t like this behavior but “/auth” isn’t the route that change the cookie, and I will focus on this issue later.

Now I can’t wrap my head around why in local (and using a proxy to /api in vite.config) this works with no issue. The cookie changes in local as well, but when I login then the session cookie is the same and my session object has a passport value with the correct id.

(Local working version is the main branch of this repository: GitHub - Alberto23B/shelfable

npm run server for the server and npm run dev for the client
)

(Current problem version: GitHub - Alberto23B/shelfable at Develop/fix

heroku local web --port 5001 for server and npm run dev for the client

)

Example logger in api.js:

//FIRST LOADING  
route: /auth     
cookie: ooFMgdYjgKcYRAfrH58dLx8aaW1B-IIx       

route: /    
cookie:FIzCwUjbDG59P3DCg3YD3cjaERu1wyTm

this first loading behavior is the same in local

//LOGIN     
route: /login     
cookie: BoP2rhhrirnZ484w5eaFkLyrN3OZCQaw //lost after login    
   
route: /auth    
cookie: ooFMgdYjgKcYRAfrH58dLx8aaW1B-IIx //kept after login but unauthenticated
route: /       
cookie: FIzCwUjbDG59P3DCg3YD3cjaERu1wyTm

This is the basic structure of my api route:

<code>
const api = express.Router();
let db;
const checkDbConnection = (req, res, next) =\> {
  if (!db) {
    return res.status(500).json({ error: "Database not connected yet" });
  }
  next();
  };
  connection(async (client) =\> {
  db = await client.db("TheGoodReads").collection("users");
  api.use(checkDbConnection);
  api.use(
    session({
      secret: process.env.SESSION_SECRET,
      resave: true,
      saveUninitialized: true, //if false: can't generate a new cookie
      cookie: {
      secure: false,
    },
   })
  );
api.use(passport.initialize());
api.use(passport.session());
</code>

//LOGGER HERE//

Then I have my passport.use(LocalStrategy ....) and all the routes necessary to handle the registration, login and logout all using passport.authenticate and req.logIn / req.logOut.

//FUNCTION TO ENSURE USER IS KEPT ATTACHED TO REQ (don't look problematic in my debugging

//COLLECTION ROUTES//

//SERIALIZE//
//DESERIALIZE//

}

Changing the position of the session options to app instead of api didn’t work, and also bypassing the useEffect in client’s context didn’t solve the problem. The cookie at auth

While working locally with “npm run server” and “npm run dev” works correctly (even if all the routing is a bit messy, I have to fix that as well), when I use the web local the whole cookies behavior changes.

I really can’t wrap my head around this deployment and it’s been several days now, I can’t seem to find a user with the same problem so I think I’m not getting something pretty big in how this works.

If there someone willing to help would be great, If more info are needed I can provide them!

Thank you very much community!

Alberto

Hi, @beeo23 it seems to be a while since you asked a question here. Welcome back!

Right now I am not fully into authorizations (has been a while since…).

So I did a search on the Internet instead :disappointed:. I found the following on stackoverflow that might give you a possible answer?

… the session was renewed every time when a new request starts other than a login request. The solution was, I had to add { withCredentials: true } to every Axios option in my frontend.

Maybe in the configurations then?

If that doesn’t help, stay around to see if someone else can help you better?

Hi, @evaristoc thank you very much for your reply!

In fact it is the correct solution, all I have found around the net was about the way session was configured but in this case the problem was in my frontend and this is a pretty logical error, will be a lesson for the future.

Thank you very much

1 Like