CODEWITHSUNDEEP
reactjsreact-nativehttp-headersaxiosjwt
Ruan Duarte
Ruan Duarte

Reputation: 385

Sending request headers / authorization axios.post in react-native

I am having difficulty passing my authorization on my application. My jwt token

export const update_profile = ({
  about,
  birthday,
  birth_location,
  residence_location,
  occupation,
  company_name,
  gender,
  marital_status,
  phone
}) => {
  return dispatch => {
    dispatch(
      {
        type: UPDATE_PROFILE
      }
    )
    const token = AsyncStorage.getItem('@token_jwt')
    let url = "/update_profile"
    Axios.post(`${SERVER}${url}`, {
      headers: {
        "Authorization": `Bearer ${token}`
      },
      "user": {
        "about": about,
        "birthday": birthday,
        "birth_location": birth_location,
        "residence_location": residence_location,
        "occupation": occupation,
        "company_name": company_name,
        "gender": gender,
        "marital_status": marital_status,
        "cellphone": phone
      }
    })
      .then((response) => {
        updateProfileSuccess(dispatch, response)
      })
      .catch((err) => {
        updateProfileError(err, dispatch)
      })
  }
}

This is my code, and I always have the unauthorized return, my token is saved in AsyncStorage when the user logs in.

Can someone help me please

Upvotes: 2

Views: 8205

Answers (1)

gdh
gdh

Reputation: 13682

With Axios, the headers needs to be provided as a 3rd argument (not 2nd).

Like this

const headers = {
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${token}`
}

const data = {
"user": {
        "about": about,
        "birthday": birthday,
        "birth_location": birth_location,
        "residence_location": residence_location,
        "occupation": occupation,
        "company_name": company_name,
        "gender": gender,
        "marital_status": marital_status,
        "cellphone": phone
      }
}

axios.post(`${SERVER}${url}`, data, {
    headers: headers
  })
  .then((response) => {
    ...
  })
  .catch((error) => {
    ...
  })

Alternativly, you can pass a single argument which should be an object

...
const options = {
  method: 'POST',
  headers: headers,
  data: data,
  url: `${SERVER}${url}`,
};
axios(options);

Upvotes: 4

Related Questions