title: An authorized user is not able to access a protected route
body: <p>I am developing a MERN stack app. After a user successfully logs in, they can both view their tickets and create new tickets.</p>
  <p><a href="https://i.stack.imgur.com/qPC7W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qPC7W.png" alt="enter image description here" /></a></p>
  <p>When a user clicks on the <code>View Tickets</code> button, a <code>GET</code> request is sent to the <code>/api/users/tickets</code> route, which is a protected route. So only logged in users can access it.</p>
  <p>However, when I click on the <code>View Tickets</code> button (after logging in), I get an error message that says <code>Not Authorized, No token</code>. How is this possible? I am already logged in.
  <a href="https://i.stack.imgur.com/n8xRU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n8xRU.png" alt="enter image description here" /></a></p>
  <p>I am sending the JWT on every request header using Axios global defaults. Here is my <code>App.js</code> code snippet:</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { Routes, Route } from &quot;react-router-dom&quot;;
  import axios from &quot;axios&quot;;
  import { useDispatch } from &quot;react-redux&quot;;
  import jwt_decode from &quot;jwt-decode&quot;;
  import { updateName } from &quot;./components/clientState/authSlice&quot;;
  import Home from &quot;./components/screens/Home&quot;;
  import Header from &quot;./components/screens/Header&quot;;
  import Login from &quot;./components/screens/Login&quot;;
  import Register from &quot;./components/screens/Register&quot;;
  import Tickets from &quot;./components/screens/Tickets&quot;;
  import SingleTicket from &quot;./components/screens/SingleTicket&quot;;
  import NewTicket from &quot;./components/screens/NewTicket&quot;;
  import PrivateRoute from &quot;./components/screens/PrivateRoute&quot;;
  
  const App = () =&gt; {
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      const tokenObj = localStorage.getItem(&quot;authStatus&quot;)
        ? JSON.parse(localStorage.getItem(&quot;authStatus&quot;))
        : null;
  
      if (tokenObj) {
        const { token } = tokenObj;
        axios.defaults.headers.common[&quot;Authorization&quot;] = `Bearer ${token}`;
        const { username } = jwt_decode(token);
        dispatch(updateName(username));
      }
    }, [dispatch]);
    return (
      &lt;&gt;
        &lt;Header /&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
          &lt;Route path=&quot;/register&quot; element={&lt;Register /&gt;} /&gt;
          &lt;Route path=&quot;/tickets/:id&quot; element={&lt;SingleTicket /&gt;} /&gt;
          &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
          &lt;Route path=&quot;/new-ticket&quot; element={&lt;PrivateRoute /&gt;}&gt;
            &lt;Route path=&quot;/new-ticket&quot; element={&lt;NewTicket /&gt;} /&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/tickets&quot; element={&lt;PrivateRoute /&gt;}&gt;
            &lt;Route path=&quot;/tickets&quot; element={&lt;Tickets /&gt;} /&gt;
          &lt;/Route&gt;
        &lt;/Routes&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Here are my ticket routes:</p>
  <p>ticketRoutes.js</p>
  <pre><code>const express = require(&quot;express&quot;);
  const { requireAuth } = require(&quot;../middleware/authMiddleware&quot;);
  
  const {
    userTickets,
    userTicket,
    createUserTicket,
    deleteUserTicket,
  } = require(&quot;../controllers/ticketControllers&quot;);
  
  const router = express.Router();
  
  router.get(&quot;/api/users/tickets&quot;, requireAuth, userTickets);
  router.get(&quot;/api/users/tickets/:id&quot;, requireAuth, userTicket);
  router.post(&quot;/api/users/tickets/create&quot;, requireAuth, createUserTicket);
  router.delete(&quot;/api/users/tickets/:id&quot;, requireAuth, deleteUserTicket);
  
  module.exports = router;
  </code></pre>
  <p>And here is my auth middleware:</p>
  <p>authMiddleware.js</p>
  <pre><code>const jwt = require(&quot;jsonwebtoken&quot;);
  const asyncHandler = require(&quot;express-async-handler&quot;);
  const User = require(&quot;../models/userModel&quot;);
  const createError = require(&quot;http-errors&quot;);
  
  const requireAuth = asyncHandler(async (req, res, next) =&gt; {
    let token;
  
    if (
      req.headers.authorization &amp;&amp;
      req.headers.authorization.startsWith(&quot;Bearer&quot;)
    ) {
      try {
        token = req.headers.authorization.split(&quot; &quot;)[1];
        console.log(token);
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        req.user = await User.findById(decoded.id);
        next();
      } catch (err) {
        next(err);
      }
    }
  
    if (!token) {
      const err = createError(401, &quot;Not Authorized. No Token&quot;);
      next(err);
    }
  });
  
  module.exports = { requireAuth };
  </code></pre>
  <p>What am I doing wrong? Also note that this problem was not always there. Started recently.</p>