Axios/React - JsonWebTokenError: jwt must be provided

Question

As a React/BackEnd Learner, I'm trying to delete a blogpost that requires my JWT to be sent as a header to deleted. Insomnia is working perfectly, but I cannot trace where the problem lies on my application.

App.jsx

const handleRemove = async (id) => {
    const data = await JSON.parse(window.localStorage.getItem('username'));
    loginServices.setToken(data)
    await loginServices.removeBlog({
      id: id,
    })
    setUpdate(Math.floor(Math.random() * 100));
  }

loginServices.jsx

  let token = '';
  
  const setToken = (newToken) => {
    console.log(newToken.token)
    token = `bearer ${newToken.token}`;
  }

  const removeBlog = async (blog) => {

     const config = {
     header: {Authorization: token},
      }

  console.log(blog.id);

  const response = await axios.delete(`${URI}/api/blog/${blog.id}`, config);
  }

blogs.js [BACKEND]

const deleteBlog = async (req, res) => {

        const token = req.token

        const decodedToken = jwt.verify(token, process.env.SECRET);


        if(!token || !decodedToken.id) {
                return res.status(400).json({error: 'token or wrong user'});
        }

        const blogId = req.params.id;
        const blog = await BlogSchema.findById(blogId);
        

        if(blog.userId.toString() === decodedToken.id) {
                await BlogSchema.deleteOne({_id: blogId})
                return res.status(204).json({ message: 'Blog Deleted'}).end();
        }

};

Error:

JsonWebTokenError: jwt must be provided

xhr.js:220          DELETE http://localhost:3001/api/blog/630244cc261924f7a0b542cb 500 (Internal Server Error)
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
Axios.<computed> @ Axios.js:131
wrap @ bind.js:9
removeBlog @ Login.jsx:46
handleRemove @ App.jsx:87
await in handleRemove (async)
onClick @ RenderData.jsx:38
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
App.jsx:91 Uncaught (in promise) AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

Console.logs (to be sure than my data sent to setToken is not null or undefined

{token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZ…Q4M30.b6oPD9KmAEm7joU45V5WAw0eacWW22oV19Pg0hpmOS0', username: 'sara', name: 'Saraza'}
Login.jsx:8 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImhkaXRhbm8iLCJpZCI6IjYyZmFmNjBhOWZmODA4ODZmNWVhNWMyOSIsImlhdCI6MTY2MTIyMzQ4M30.b6oPD9KmAEm7joU45V5WAw0eacWW22oV19Pg0hpmOS0

What middleware have you got configured to add `req.token` from the header value? — Phil, Aug 23 '22 at 03:33

score 2 · Answer 1 · edited Aug 23 '22 at 13:48

2

In the loginServices.jsx, you must rename header to headers property.

Reference: https://axios-http.com/docs/req_config

edited Aug 23 '22 at 13:48

Youssouf Oumar

29,373
11
46
65

answered Aug 23 '22 at 03:49

phibershinigami

50
7

Axios/React - JsonWebTokenError: jwt must be provided

1 Answers1