PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

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

 October 13, 2022     axios, firebase, firebase-authentication, javascript, reactjs     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing