Firebase updateProfile does not exist on type 'User'-CodePudding

For a final school project. I have to create some sort of to-do application with firebase as a database and authentification tool. I allow some kind of username change so people can get creative. On the homescreen, there is a dashboard with a welcome sign. Until the user doesn't have a username, the current UID is shown. You can change this with a form. The point is that when I want to write the code to update the users username, I get an error with the message:

Property 'updateProfile' does not exist on type 'User'.

I find this rather strange because I'm implementing the code the way as it is documented on the original firebase documentation. Is there anyone who can see if there is an error or a clue to get the problem fixed?

Now I've putted the code into an onAuthStateChanged-codeblock so I can get the users actual credentials instead of null.. . ideally, the code is seperated in another block

const userCred = () => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      const { uid } = user;
      const userPlaceholder = document.querySelector<HTMLHeadElement>('#dashboardName');
      const displaynamePlaceholder = document.querySelector<HTMLInputElement>('#displaynameInput');
      console.log(userPlaceholder);
      if (user.displayName !== null) {
        userPlaceholder!.innerHTML = `Welcome ${user.displayName}`;
        displaynamePlaceholder!.setAttribute('value', `${user.displayName}`);
      } else {
        userPlaceholder!.innerHTML = `Welcome ${uid}`;
        displaynamePlaceholder!.setAttribute('value', `${uid}`);
        userPlaceholder!.style.fontSize = '1.6rem';
      }
    }
    const displaynamePlaceholder = document.querySelector<HTMLInputElement>('#displaynameInput')?.value;
    user?.updateProfile({
      displayName: String(displaynamePlaceholder),
      photoURL: null,
    });
  });
  console.log('not logged in');
};

here is my code:

CodePudding user response：

That is probably due to you were looking at Firebase v8 documentation while using the Firebase v9 in your app. As per firebase v9 User documentation there is no updateProfile method in User anymore. It is a standalone function now, here are the docs.

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});