Unhandled Rejection (TypeError): firebase_app__WEBPACK_IMPORTED_MODULE_18__.default.auth(...).updateProfile is not a function

Question

So I made an Avatar Chooser and now I'm getting this error if I Select an image.

It should also display the image in the avatar, but it's just trowing me the error instead.

How can I solve this and manage it to display the image in the Avatar Icon?

My code:

async function handleFileInputChange(e) {
    const files = e.target.files;
    const file = files[0];

    const storage = firebase.storage();
    const usersImageRef = storage
      .ref()
      .child(`users/${user.uid}/profilepicture.jpg`);

    const snap = await usersImageRef.put(file);

    const donwloadURL = await snap.ref.getDownloadURL();
    setDownloadURL(donwloadURL);

    await firebase.auth().updateProfile({ photoURL: donwloadURL });
  }

 <input
          accept="image/*"
          className={classes.input}
          id="contained-button-file"
          multiple
          type="file"
          onChange={handleFileInputChange}
        />
        <label>
          <IconButton>
            <Avatar
              src="../assets/ana.png"
              style={{
                margin: "10px",
                width: "60px",
                height: "60px",
              }}
            />
          </IconButton>
        </label>

The error:

This is what it looks like:

Answer 1

The updateProfile method exists on User object and not Firebase Auth Instance. Try refactoring the function like this:

const user = firebase.auth().currentUser // <-- .currentUser

if (user) {
  await user.updateProfile({ photoURL: donwloadURL });
} else {
  console.log("No user logged in!")
}