NextJS api cookies are not set in response header - laravel

Question

I'm using NextJs getInitialProps trying to refresh the access token.
if(!access_token && ctx.req) {
try {
await axios({
method: 'GET',
url: 'http://localhost:3000/api/refresh_token',
withCredentials: true,
headers: refresh_token ? { cookie: ctx.req.headers.cookie } : {}
})
console.log(ctx.res.headers)
} catch (error) {
console.log(error.response)
}
}
and this is the api endpoint:
import axios from 'axios'
import { serialize } from 'cookie'
export default async (req, res) => {
try {
const response = await axios.post('http://localhost/oauth/token', {
grant_type: 'refresh_token',
refresh_token: req.cookies.refresh_token,
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
scope: '*',
})
const { access_token, refresh_token, expires_in } = response.data
res.setHeader('Set-Cookie', [
serialize('access_token', access_token, { path: '/', maxAge: expires_in, httpOnly: true, sameSite: true }),
serialize('refresh_token', refresh_token, { path: '/', httpOnly: true, sameSite: true })
])
return res.status(200).json({ message: 'yess' })
} catch (error) {
res.status(error.status || 500).end(error.response.data.message)
}
}
but when I log the response headers the cookies are not set. Chrome also doesnt show the cookies. Am I missing a step? Maybe because its server side rendering I have to do it another way? I've honestly been stuck with this for 3 days now and I've tried everything (I think so at least) and with no success. Its bugging me as I have no idea to setup proper auth in NextJs.