[firebase] updateProfile is not a function Issue

 

문제 상황

Firebase의 Auth 기능을 이용해 유저의 프로필 정보를 받아서 DisplayName을 업데이트하려고 했다. 첫 번째 업데이트는 제대로 됐지만, 두 번째부터는 아래 같은 에러를 냈다.

 

userObj.updateProfile is not a function

문제 해결

최상위 App.js 파일에서 refreshuser라는 메소드를 두고, 프로필 정보를 업데이트할 때마다 이를 바로 반영할 수 있게 firebase.auth로부터 currentUser를 받아오고 있었다. 여기까지는 문제가 없었지만, 이를 Object.assign({}, user))로 복사한 객체를 받아오는 과정에서 enumerable 속성인 메소드 updateProfile을 복사해오지 못했던 것이다. 그래서 유저가 프로필 이름을 변경한 첫 번째 시점에서는 제대로 작동했지만, refreshuser 메소드를 실행한 이후부터는 UserObject로부터 해당 메소드를 사용할 수 없게 된 것이다.

코드

// App.js
import { autService } from 'fBase';

function App() {
  const [userObj, setUserObj] = useState(null);
  // ....

  const refreshuser = () => {
      const user = authService.currentUser;
    // setUserObj(Object.assign({}, user)); (*)
    setUserObj({
            displayName: user.displayName,
            uid: user.uid,
            updateProfile: (args) => user.updateProfile(args)
    });
  }
}

refreshuser는 prop으로 전달되어서, Profile.js에서 아래처럼 쓰인다.

// Profile.js


    const onSubmit = async (e) => { // profile update를 위한 Form에 onSubmit으로 들어가는 부분
        e.preventDefault();
        if (newDisplayName === '') {
            setError('Name can\'t be empty');
        }
        if (userObj.displayName !== newDisplayName) {
            try {
                await userObj.updateProfile({
                    displayName: newDisplayName
                });
                refreshuser(); // refreshuser가 쓰이는 부분
            } catch (err) {
                console.log(err)
            }
        }

    }

Object.assign()

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object.

from MDN