I am using express in the back end with react in the front end. I am using cors to fetch user details from passport.js GoogleOAuth. I am using Heroku to host the front end and the back end in two different domains. The request in the client looks like this:
fetchAuthUser = async () => {
const metadata = {
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
referrerPolicy: "strict-origin-when-cross-origin",
body: null,
method: "GET",
mode: "cors",
credentials: "include"
}
const response = await fetch(Env.backend_host +'/authenticate_google/api/current_user', metadata).catch((err) => {
console.log(err)
});
console.log(response);
if (response && response.data) {
this.setState({user: eval(response.data)}, () => {this.loadPages()});
}
}
and the server is currently set up in the following way:
The cookies is set like this,
router.use(
cookieSession({
maxAge: 30 * 24 * 60 * 60 * 1000, // sets cookie to expire in 30 days (converted to milliseconds)
keys: ["trialkey"],
sameSite: "lax",
})
);
The get response is the following
router.get("/api/current_user", cors({ origin: "https://energycast-front.herokuapp.com", methods: ['GET','POST','OPTIONS'], credentials: true, preflightContinue: true}), (req, res) => {
console.log("User:" +req.user)
res.json(req.user);
});
The problem does not seem to be cors related, however when observing the request, I see that no cookies are being sent. This is strange because I have set credentials "include".
Nota bene, the console is logging the "User" to be undefined on the server itself.
Any help will be appreciated.
I have figured out what went wrong, the problem was in cookie-session. When the cookie was set to sameSite = 'none', the network tool would pick it up and return the error that secure had to be set to true. However, after setting secure equal to true, the network debugging tool reverted into saying that samesite was set to "Lax" and that the cookies could not be sent.
I have thus switched to express-cookie package:
router.set('trust proxy', 1) // trust first proxy
router.use(
session({
secret: SECRET,
resave: false,
saveUninitialized: true,
cookie: {
secure: true,
sameSite: "none"
}
})
);
Cookies with SameSite=Lax are blocked if the request is made from a different site and is not initiated by a top-level navigation (but by a fetch statement).
Try using sameSite: "None".
The cookie might also be blocked because it falls foul of the third-party cookie settings in your browser.