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