Firebase 和 React Auth 如何更新用户信息

Question

I am trying to run two async functions however I keep getting the following error.

error: Unhandled Promise Rejection: RangeError: Maximum call stack size exceeded.

Can someone help with this. I need to update display name, email and password and I need them in different functions in my useAuth.js. I only get the error when trying to run more than 1 function

profile.js

//context 
const {
    updateDisplayName,
    updateEmail,
    updatePassword,
  } = useAuth();

//   when update button is pressed this function runs
const handleSubmit = async (event) => {
    // prevent page from reloading
    event.preventDefault();

    // make sure there no old error before making new request
    setErrorUpdating([]);

    await updateDisplayName(displayName)
    await updateEmail(email);
    await updatePassword(password)
}

useAuth.js

async function updateDisplayName(displayName) {
    const updateDisplayName = await updateProfile(currentUser, { displayName });
    // update the ui with the updated profile
    const newUserObj = { ...currentUser, displayName };
    setCurrentUser(newUserObj);

    return updateDisplayName;
}

async function updateEmail(email) {
    return await updateEmail(currentUser, email);
}

async function updatePassword(password) {
    return await updatePassword(currentUser, password);
}

Answer 1

These two method calls are invoking themselves ad infinitum:

async function updateEmail(email) {
    return await updateEmail(currentUser, email);
}

async function updatePassword(password) {
    return await updatePassword(currentUser, password);
}

Note that your custom updateEmail invoked itself, as does updatePassword . You're probably trying to call the Firebase equivalents in there, but your custom functions are shadowing the Firebase imports.

You can rename your custom functions to not clash with the Firebase names:

async function updateEmailForCurrentUser(email) {
    return await updateEmail(currentUser, email);
}

async function updatePasswordForCurrentUser(password) {
    return await updatePassword(currentUser, password);
}

And then call this in handleSubmit :

const handleSubmit = async (event) => {
    ...
    await updateEmailForCurrentUser(email); // 👈
    await updatePasswordForCurrentUser(password); // 👈
}