/pages/post/[id].tsx
export async function getServerSideProps(context: GetServerSidePropsContext) {
const { id } = context.params as Params
const { req, res } = context
const { cookie } = req?.headers
const parsedCookie = cookie && parse(cookie as string)
res.setHeader('Cache-Control', 's-maxage=20, stale-while-revalidate')
const postDetails = await getPostDetails(id as string)
if (parsedCookie) {
return {
props: {
postDetail: postDetails,
cookie: parsedCookie
}
}
} else {
return {
props: {
postDetail: postDetails,
cookie: {
accessToken: '',
refreshToken: ''
}
}
}
}
}
//server/auth.ts
res.cookie('refreshToken', refreshToken, {
httpOnly: true,
secure: environment === 'production',
sameSite: environment === 'production' ? 'none' : 'lax',
path: '/'
})
res.cookie('accessToken', accessToken, {
httpOnly: true,
secure: environment === 'production',
sameSite: environment === 'production' ? 'none' : 'lax',
path: '/'
})
[![Cookies being populated inside “getServerSideProps” in local development][1]][1]
[![Cookies are empty that’s why else block run in vercel deployment][2]][2]
I am using NextJs pages and separate express backend. In local development, the cookies are available inside ‘getServerSideProps” and can access it. And I can see accessToken from it to my backend through axios.
But the deployed site on vercel has empty or undefined cookie “req.headers.cookie” is empty while trying to access inside getServerSideProps in production. But yeah, in client side fetching, I can see access token being available to backend. So, no issue of cookie not being set on deployed domain. Just there is empty cookie inside getServerSideProps in deployment.
What might be the issue? Am I missing something? Has anyone encountered this issue? I tried all methods of setting path to “/” and all others but still no luck
//in local development
[1]: https://i.sstatic.net/fz2E9r36.png
in production deployed in vercel
[2]: https://i.sstatic.net/0ksy2EZC.png