CODEWITHSUNDEEP
reactjsexpressaxiosjwtpassport-jwt
Isaac Padberg
Isaac Padberg

Reputation: 248

Post Request from axios always returns Unauthorized despite having valid JWT set in header/Axios Deletes Headers

I set up passport-local to login a user, and then once logged in, the user will be given a JWT token through passport-JWT. The JWTStrategy is set up to use jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken() so that the JWT can sent with the Authorization header Authorization: `Token ${userContext.token}`}. In my react client side, I have set up a GET request using axios as shown here:

const fetchProfileDetails = async(config)=>{
    const res = await axios.get("http://localhost:8080/users/me", config)
}

    const config = {
        method:"GET",
        withCredentials: true,
        headers: {Authorization: `Bearer ${userContext.token}`}
    }

This request successfully authenticates and returns the user data from /me.

Now heres the kicker: when I use the exact same request structure, but switch the method to post in the axios request and in my express route in the backend, the request always responds with a 401 Unauthorized.

However, when I send the same request from POSTMAN, with the same Bearer Token used in the request that was Unauthorized, the request succeeds without any errors.

TLDR: GET requests work with the JWT token and return with a 200 status code, while the same request with a POST method returns with a 401 status code.

What am I missing here??!

Upvotes: 0

Views: 946

Answers (2)

Isaac Padberg
Isaac Padberg

Reputation: 248

I have come upon a solution for this issue. For some reason, axios was not maintaining the Authorization header I had set in my config variable, and deleted it upon making the request. To solve this, I just had to reshuffle my axios request to look like this:

const res = await axios({
    method:'POST',
    url:"http://localhost:8080/users/test",
    headers:{'Authorization':`Bearer${token}`
  
  }})

I feel cheated as I spent a ton of time on this and the solution was so underwhelming. Axios was trolling me the whole time :/

Upvotes: 0

user16622035
user16622035

Reputation:

You are probably using there GET and not using POST anywhere. In your code, you have code only for get. You will need to write code for post as well. Below is the code for post for your reference:

router.post('/', config, async(req, res, next) => { 
    const { error } = validateBody(req.body);

    if (error) {
        return res.status(400).send(error.details[0].message);
    }    
    const newData= new passport({ name: req.body.name });    
    await newData.save();
    console.log('saving the document');
    res.send(newData);
})

Your code should have post as well. Writing single code will not work. You need to have to write code for every condition and every possibility. So like for get need code for post as well, also if you have condition for patch or delete or put you will have to write the axios method for that as well.

Hope this has helped you in any way.

Upvotes: 0

Related Questions