unable to read cookie done with res.cookie - node.js

Question

Currently I'm messing around with JWT tokens, authentication and authorization. I'm creating a JWT token and refresh tokens. I set the refresh token in a cookie. Creating and logging in a user works as intended. However trying to refresh the token and updating it, it goes wrong.
/login
router.post("/login", passport.authenticate("local"), (req, res, next) => {
const token = getToken({
_id: req.user._id
})
const refreshToken = getRefreshToken({
_id: req.user._id
})
User.findById(req.user._id).then(
user => {
user.refreshToken.push({
refreshToken
})
user.save((err, user) => {
if (err) {
res.statusCode = 500
res.send(err)
} else {
res.cookie("refreshToken", refreshToken, COOKIE_OPTIONS)
res.send({
success: true,
token
})
}
})
},
err => next(err)
)
})
/refreshToken
router.post("/refreshToken", (req, res, next) => {
console.log("in refreshtoken")
const { signedCookies = {} } = req;
const { refreshToken } = signedCookies
console.log(refreshToken)
if (refreshToken) {
try {
const payload = jwt.verify(refreshToken, process.env.REFRESH_TOKEN_SECRET)
const userId = payload._id
User.findOne({
_id: userId
}).then(
user => {
if (user) {
// Find the refresh token against the user record in database
const tokenIndex = user.refreshToken.findIndex(
item => item.refreshToken === refreshToken
)
if (tokenIndex === -1) {
res.statusCode = 401
res.send("Unauthorized1")
} else {
const token = getToken({
_id: userId
})
// If the refresh token exists, then create new one and replace it.
const newRefreshToken = getRefreshToken({
_id: userId
})
user.refreshToken[tokenIndex] = {
refreshToken: newRefreshToken
}
user.save((err, user) => {
if (err) {
res.statusCode = 500
res.send(err)
} else {
res.cookie("refreshToken", newRefreshToken, COOKIE_OPTIONS)
res.send({
success: true,
token
})
}
})
}
} else {
res.statusCode = 401
res.send("Unauthorized2")
}
},
err => next(err)
)
} catch (err) {
res.statusCode = 401
res.send("Unauthorized3")
}
} else {
res.statusCode = 403
res.send("Unauthorized4")
}
})
Cookie options
exports.COOKIE_OPTIONS = {
httpOnly: true,
secure: false,
signed: false,
maxAge: eval(process.env.REFRESH_TOKEN_EXPIRY) * 1000,
sameSite: "none",
}
App.js
function App() {
const [currentTab, setCurrentTab] = useState("login")
const [userContext, setUserContext] = useContext(UserContext)
const verifyUser = useCallback(() => {
fetch(process.env.REACT_APP_API_ENDPOINT + "users/refreshToken", {
method: "POST",
credentials: "include",
headers: { "Content-Type": "application/json" },
}).then(async response => {
console.log(response)
if (response.ok) {
const data = await response.json()
console.log(data)
setUserContext(oldValues => {
return { ...oldValues, token: data.token }
})
} else {
setUserContext(oldValues => {
return { ...oldValues, token: null }
})
}
// call refreshToken every 20 seconds to renew the authentication token. Make it longer for prod.
setTimeout(verifyUser, 20000)
}).catch((error) => {
console.log(error)
})
}, [setUserContext])
useEffect(() => {
verifyUser()
}, [verifyUser])
/**
* Sync logout across tabs
*/
const syncLogout = useCallback(event => {
if (event.key === "logout") {
// If using react-router-dom, you may call history.push("/")
window.location.reload()
}
}, [])
useEffect(() => {
window.addEventListener("storage", syncLogout)
return () => {
window.removeEventListener("storage", syncLogout)
}
}, [syncLogout])
return userContext.token === null ? (
<Card elevation="1">
<Tabs id="Tabs" onChange={setCurrentTab} selectedTabId={currentTab}>
<Tab id="login" title="Login" panel={<Login />} />
<Tab id="register" title="Register" panel={<Register />} />
<Tabs.Expander />
</Tabs>
</Card>
) : userContext.token ? (
<Welcome />
) : (
<Loader />
)
}
I'm unsure what causes it that when I console.log(refreshToken) in /refreshToken it comes out as undefined. I also tried looking it up in any responses in the developer tools but couldn't find it.
Would really appreciate if anyone has some clarity about what might cause this issue.