after doing authentication from firebase, the data cannot be displayed in the console

Question

i am building a react app in which i am using firebase for authentication. the code is as follows:

function signIn(){
  firebase.auth().signInWithPopup(provider).then(function(result)=>{
    console.log(result.user);
    setUserInfo(result.user);
    console.log(userInfo);
  }).catch(function(error)=>{
    console.log(error.message);
  });
}
const [userInfo, setUserInfo] = useState({});

now when console logging result.user, the data is perfect. but when i assign it to userInfo and console log it, it returns an empty object with something like this-

{proto}

Hey Tam2006. Did you ever get anywhere with this? – Frank van Puffelen Aug 01 '21 at 03:30 — Frank van Puffelen, Aug 01 '21 at 03:30

score 0 · Answer 1 · answered Nov 18 '20 at 15:34

Calls to the setter of a useState hook are asynchronous, so you can't log the state variable straight after calling setUserInfo.

If you want to get the updates state, you can use a useEffect hook. But within your current then() listener I'd recommend simply sticking to result.user.

Also see:

after doing authentication from firebase, the data cannot be displayed in the console

1 Answers1