Call REST API with auth token with React.js

Question

This is a try of call a REST API that as an authentication token with React.js. I'm sending the token request as POST and it's been read as GET, can someone help me please?

componentDidMount() {
  fetch("theURL/api-token-auth/", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      email: "EMAIL",
      password: "PASSWORD"
    }
  })
    .then(res => {
      if (res.ok) {
        return res.json();
      } else {
        throw Error(res.statusText);
      }
    })
    .then(json => {
      this.setState({
        isLoaded: true,
        token: json
      });
    })
    .catch(error => console.error(error));
}

You are correctly giving method POST, so the error might be in the backend. However, the data you want to send should probably be in the body instead of in the headers. Try body: JSON.stringify({ email: email, password: password }) — Tholle
– Tholle, Commented Jul 19, 2018 at 12:47
It's working now, but now how do I store token's value to do another fetch? @Tholle — soalrib
– soalrib, Commented Jul 19, 2018 at 12:55
Could you show us the backend ? Your fetch seems to be right. Here is the way we are using fetch in my company, with a Auth code: fetch(route, {method: 'POST', headers: {'Content-Type': 'application/json', auth: AUTHCODE}, body: JSON.stringify({data})}) The authcode should only be used to confirm the user is coming for a good location. You should use the body for all the other data. — TBouder
– TBouder, Commented Jul 19, 2018 at 12:55

Tholle · Accepted Answer · 2018-07-19 12:58:55Z

6

You are correctly using the method POST, so that's not an issue. However, the data you want to send should be in the body instead of in the headers.

componentDidMount() {
  const email = "[email protected]";
  const password = "foobar";

  fetch("theURL/api-token-auth/", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      email,
      password
    })
  })
    .then(res => {
      if (res.ok) {
        return res.json();
      } else {
        throw Error(res.statusText);
      }
    })
    .then(json => {
      this.setState({
        isLoaded: true,
        token: json
      });
    })
    .catch(error => console.error(error));
}

answered Jul 19, 2018 at 12:58

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Call REST API with auth token with React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related