res.clearCookie method is not clearing cookies on the browser dev tools

Question

I'm trying to make a Sign Out function on React-Express Web App. But it doesn't clear my cookie.

Code when set the cookie

res.cookie('!', t, {
    maxAge: 1000 * 60 * 60 * 24 * 30,
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: "strict",
    priority: "high"
})
res.status(200).json()

Code to removing the cookie

const SignOut = (_: Request, res: Response) => {
    res.clearCookie('!')
    res.status(200).json()
}
export default SignOut

Route

import RegCon from '../controllers/Register'
import LogCon from '../controllers/Login'
import OutCon from '../controllers/SignOut'

const router = express.Router({
    caseSensitive: true,
    strict: true
})
router.post('/API/register', RegCon)
router.post('/API/login', LogCon)
router.delete('/API/signout', OutCon)

React SignOut handler

const handleSignOut = async () => {
        try {
            await axios.delete('http://localhost:3001/API/signout')
            // location.href = '/'
        } catch (err) {
            const XR = err as AxiosError
            alert(XR.response!.statusText)
        }
    }

The things that makes me more even confuse is its not fall into the catch, its actually succeeded but it doesn't clear my cookie on here

Anybody could explain why?

Answer 1

You missed something which is credential (i.e { withCredentials: true }) in your SignOut handler

const handleSignOut = async () => {
    try {
        await axios.delete('http://localhost:3001/API/signout', { withCredentials: true })
        // location.href = '/'
    } catch (err) {
        const XR = err as AxiosError
        alert(XR.response!.statusText)
    }
}