How to pass Header JWT Token with Axios & React?

Question

I make web application with React, Express, MongoDB.

And, I want to pass jwt token with header.

But, I pass it, get 401 error (Unauthorized).

In login actions.js :

export function login(username, password) {
return function(dispatch) {
  axios
  .post(`${API_URL}/auth/login`, { username, password })
  .then(res => {
    dispatch(loginSuccess(res.data, username));
    const token = res.data.token;
    axios.defaults.headers.common["Authorization"] = token;
    history.push("/");
  })
  .catch(err => {
    if (err.response.status === 401) {
      dispatch(loginFailure(err));
    }
  });
 };
}

And, In my post.js in server :

getToken = function(headers) {
  if (headers && headers.authorization) {
    var parted = headers.authorization.split(" ");
      if (parted.length === 2) {
       return parted[1];
      } else {
       return null;
      }
    } else {
     return null;
    }
 };
...
// Save Post
router.post("/", passport.authenticate("jwt", { session: false }), 
 function(
  req,
  res,
  next
  ) {
 var token = getToken(req.headers);
 if (token) {
   Post.create(req.body, function(err, post) {
     if (err) return next(err);
      res.json(post);
     });
   } else {
    return res.status(403).send({ success: false, msg: "Unauthorized." });
   }
});

How I do fix it? + Login is success

score 41 · Accepted Answer · answered Oct 05 '18 at 05:34

First of all when you login and send username and password to backend then in response you get token_id. now try to token store in session_storage and redirect to your desire page. now you take token_id in your desire page and store one variable as like..

let user = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id;

now you have token and pass in the header and get data in response

const api = `your api here`
axios.get(api, { headers: {"Authorization" : `Bearer ${token}`} })
        .then(res => {
            console.log(res.data);
        this.setState({
            items: res.data,  /*set response data in items array*/
            isLoaded : true,
            redirectToReferrer: false
        })

note : you should set blank items array in initial setState as like

this.state={
            items:[],
            isLoaded: false,
            redirectToReferrer:false,
            token:''
        }

Actually, if I understand correctly, you shouldn't store the token in sessionStorage because hackers can then read and use the token. There are alternatives out there, like saving in an httponly marked cookie, that may be safer. — TBrenner, Mar 23 '23 at 03:56

score 12 · Answer 2 · edited Aug 11 '18 at 00:16

12

Include your token as authorization key as below.

axios.post(url,data, {
    headers: {
        'authorization': your_token,
        'Accept' : 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(response => {
    // return  response;
})
.catch((error) => {
    //return  error;
});

edited Aug 11 '18 at 00:16

camille

16,432
18
38
60

answered Jul 30 '18 at 07:24

Sumit Kumar

763
9
14

score 4 · Answer 3 · answered Apr 11 '19 at 14:05

how-to-pass-header-jwt-token-with-axios-react ???

This is example for create axios instance with API Base URL and JWT_TOKEN globally and access it for different API calls

step 1 : create static instance for axios

static axiosInstance =  axios.create({
    baseURL: "BASE_API_URL",
    timeout: 5000,
    headers: {
      'Authorization': "JWT_TOKEN",
      'Content-Type': 'application/json'
    }
  });

this is the second setep access axiosInstance already create and use it with dynamic REST API calls

step 2 : access static instance and bind API_URL to base URL

export const x = (data) => dispatch => {
    axiosInstance.post('API_URL',
        {
            PLAYLOAD
        })
        .then(function (response) {

        })
        .catch(function (error) {

        });
}

API URL = BASE_API_URL + API_URL and single JWT_TOKEN for all and this very clean , clear and working.

Shubham Agarwal Bhewanewala · Answer 4 · 2018-07-30T03:52:01.910

0

Try res.header('x-auth', token).send() 'x-auth' can be anything. Above is used to set token in the headers

edited Jul 30 '18 at 03:52

answered Jul 30 '18 at 03:46

Shubham Agarwal Bhewanewala

1,119
1
8
20

How to pass Header JWT Token with Axios & React?

4 Answers4

Linked