Cannot parse to get the token - node.js

Question

For some reason I cannot get the token from the localstorage in order to make the request, it says that there is no token. I am using cookie parser. I am trying to create a new category for my shop. It is not recognizing the token, although it is here.
here is my client:
adminDashoard.js
import { useState } from 'react';
import { createCategory } from './api/category';
import isEmpty from 'validator/lib/isEmpty';
import { showErrorMsg, showSuccessMsg } from './helpers/message';
import { showLoading } from './helpers/Loading'
export default function AdminDashboard() {
const [category, setCategory] = useState('');
const [errorMsg, setErrorMsg] = useState('');
const [successMsg, setSuccessMsg] = useState('');
const [loading, setLoading] = useState(false);
const handleMessages= evt =>{
setErrorMsg('');
setSuccessMsg('');
}
const handleCategoryChange = (evt) => {
setErrorMsg('');
setSuccessMsg('');
setCategory(evt.target.value);
}
const handleCategorySubmit = (evt) => {
evt.preventDefault();
if (isEmpty(category)) {
setErrorMsg('Please enter a category')
} else {
const data = { category }
setLoading(true);
createCategory(data)
.then(response => {
setLoading(false);
setSuccessMsg(response.data.successMessage)
})
.catch(err => {
setLoading(false);
setErrorMsg(err.response.data.errorMessage)
console.log(err)
})
}
};
function ShowHeader() {
return (
<div className='bg-dark text-white py-4'>
<div className='container'>
<div className='row'>
<div className='col-md-6'>
<h1>
<i className='fas fa-home'> Dashboard</i>
</h1>
</div>
</div>
</div>
</div>
)
}
function ShowActionBtns() {
return (
<div className='bg-light my-2'>
<div className='container'>
<div className='row pb-3'>
<div className='col-md-4 my-1 '>
<button
className='btn btn-outline-info btn-block'
data-toggle='modal'
data-target='#addCategoryModal'>
<i className=' fas fa-plus'>Add Category</i>
</button>
</div>
<div className='col-md-4 my-1 '>
<button className='btn btn-outline-danger btn-block'>
<i className=' fas fa-plus'>Add Products</i>
</button>
</div>
<div className='col-md-4 my-1 '>
<button className='btn btn-outline-success btn-block'>
<i className=' fas fa-plus'>Add Blog</i>
</button>
</div>
</div>
</div>
</div>
)
}
function ShowCategoryModal() {
return (
<div id='addCategoryModal' className='modal' onClick={handleMessages}>
<div className='modal-dialog modal-dialog-centered modal-lg'>
<div className='modal-content'>
<form onSubmit={handleCategorySubmit}>
<div className='modal-header bg-info text-white'>
<h5 className='modal-title'>Add Category</h5>
<button className='close' data-dismiss='modal'>
<span>
<i className='fas fa-times'></i>
</span>
</button>
</div>
<div className='modal-body my-2'>
{errorMsg && showErrorMsg(errorMsg)}
{successMsg && showSuccessMsg(successMsg)}
{
loading ? (
<div className='text-center'>{showLoading()}</div>
) : (
<>
<label className='text-secondary'> Category</label>
<input
type='text'
className='form-control'
name='category'
value={category}
onChange={handleCategoryChange}
/>
</>
)
}
</div>
<div className='modal-footer'>
<button data-dismiss='modal' className='btn btn-secondary'>Close</button>
<button className='btn btn-info' type='submit'>Submit</button>
</div>
</form>
</div>
</div>
</div>
)
}
return <div>
{ShowHeader()}
{ShowActionBtns()}
{ShowCategoryModal()}
</div>
}
Here is my api file:
import axios from "axios"
export const createCategory = async (formData) => {
const config = {
headers: {
'Content-Type': 'application/json'
},
};
const response = await axios.post('http://localhost:5000/api/category', formData, config);
return response;
}
on the server side,
here is my server.js :
const express=require('express');
const app= express();
const cors=require('cors');
const connectDB= require('./database/db');
const morgan= require('morgan');
const authRoutes= require ('./routes/auth')
const categoryRoutes = require ('./routes/category');
const cookieParser = require('cookie-parser')
//middleware
app.use(cors());
app.use(morgan('dev'));
app.use(express.json());
app.use(cookieParser());
app.use('/api/auth', authRoutes);
app.use('/api/category', categoryRoutes);
connectDB();
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));
app.get('/', (req, res) =>{
res.send(' hello server')
})
here is my route file :
const express = require('express');
const router = express.Router();
const categoryController = require('../routes/controllers/category');
const {authenticatateJWT} = require('./middleware/authenticator');
router.post('/', authenticatateJWT, categoryController.create);
module.exports = router;
here is my controller:
exports.create = (req, res)=>{
console.log(req.user);
setTimeout(() =>{
res.json({
successMessage: `${req.body.category} was created!`
});
}, 5000)
}
here is my middleware:
const jwt = require('jsonwebtoken');
const { jwtSecret } = require('../../config/keys');
exports.authenticatateJWT = (req, res, next) => {
const token = req.cookies.token;
console.log(token);
if (!token) {
return res.status(401).json({
errorMessage: 'No token. Authorization denied',
});
}
try {
const decoded = jwt.verify(token, jwtSecret);
req.user = decoded.user;
next();
} catch (err) {
console.log('jwt error:', err)
res.status(401).json({
errorMessage: 'Invalid token',
});
}
};