[FIXED] How can i send firebase getIdToken with axios in reactjs?

Issue

I am using the following code to obtain a user idtoken and i can succesfully log it to the console using console.log:

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        user.getIdToken().then(function(idToken) {  
           console.log("IDTOKEN:",idToken); 

          });
    }
});

I am now trying to send the token as a header in a request using axios like this:

async updatebalance() {
  let id = this.props.id;
  if (id === null || id === undefined) {
    id = "test";
  }
  var res = await axios.post(backUrl + "account/user_load_balance", {
    uid: localStorage.getItem("account-info"),
    id: id,
    idToken
  });
  if (res.data !== null && res.data.status && res.data.balance !== null && res.data.balance !== []) {
    this.props.dispatch(etherBalanceLoaded(res.data.balance[0]));
    this.props.dispatch(tokenBalanceLoaded(res.data.balance[1]));
  }
  this.setState({
    showbuttonFlag: true
  });
  this.reset_values();
}

however i get the following error:

'idToken' is not defined

I think i may need to set this as a global variable so it can be used in different function but i don't know how. How can i achieve this?

Solution 1:

async updatebalance() {
        let id = this.props.id;
        if (id === null || id === undefined) {
            id = "test";
        }
const user = firebase.auth().currentUser
if (user) {
  const idToken = await user.getIdToken();
  var res = await axios.post(backUrl + "account/user_load_balance", {
    uid: localStorage.getItem("account-info"),
    id: id,
    idToken
  });

} else {
  console.log("User not logged in")
}
        if (res.data !== null && res.data.status && res.data.balance !== null && res.data.balance !== []) {
            this.props.dispatch(etherBalanceLoaded(res.data.balance[0]));
            this.props.dispatch(tokenBalanceLoaded(res.data.balance[1]));
        }
        this.setState({ showbuttonFlag: true });
        this.reset_values();
    }

    reset_values() {
        this.setState({ ethAmount: "" });
        this.setState({ sellethAmount: "" });
        this.setState({ ethPrice: "" });
        this.setState({ sellethPrice: "" });
        this.setState({ methAmount: "" });
        this.setState({ methPrice: "" });
        this.setState({ msellethAmount: "" });
        this.setState({ msellethPrice: "" });
    }

Solution

You can use getIdToken() right before the Axios request and pass it as shown below:

const user = firebase.auth().currentUser

if (user) {
  // user logged in
  const idToken = await user.getIdToken()

  var res = await axios.post(backUrl + "account/user_load_balance", {
    uid: localStorage.getItem("account-info"),
    id: id,
    idToken
  });

  if (res.data !== null && res.data.status && res.data.balance !== null && res.data.balance !== []) {
    this.props.dispatch(etherBalanceLoaded(res.data.balance[0]));
    this.props.dispatch(tokenBalanceLoaded(res.data.balance[1]));
  }
  this.setState({
    showbuttonFlag: true
  });
  this.reset_values();

} else {
  console.log("User not logged in")
}

Answered By - Dharmaraj

Answer Checked By - Robin (PHPFixing Admin)