I have a React app that accesses the Twitter API using an Express backend I created for it. The React frontend is served through Github Pages and the backend is server through Heroku.
When I, initially, implemented the authentication flow, I did it all in the same tab. The React app would send the request to the backend, which would respond with the Twitter authentication URL and then I would redirect the user in the same tab to initiate the login process. Once the login is completed, I would redirect the user back to the app.
This was working fine. The Express server would send a session cookie to the frontend, and all subsequent requests would work properly.
However, I wanted to implement the login flow in a popup window that closes automatically once the login is complete. I didn't change anything in the backend, just how the frontend implements the login. But now, subsequent requests to the backend don't work because the frontend doesn't send the cookie in the request headers. Each new request initiates a new session. I know that because I log the session ID in my backend, and they are all different from each other.
It seems like the session cookie expires some time after the popup window closes. This is despite the fact that I have the maxAge
property of the session cookie set to 24 hours.
Here are the session options I have in my backend:
resave: false,
saveUninitialized: false,
proxy: true,
cookie: {
sameSite: "none",
secure: true,
maxAge: 24 * 60 * 60 * 1000,
},
I also have trust proxy
set to 1.
In the frontend, the way I launch the popup is using the window.open()
function.
I have looked everywhere for any solutions for this problem, but I can't figure this one out. I would really appreciate if someone can help me.
I figured this one out. Turns out the problem was specific to me as I have very aggressive cookie clearing settings, so the session cookie was deleted soon after the popup window is closed.