[LAB-8] 파이어베이스 회원가입된 사용자 객체 커스터마이징 질문!

[rlawlsdn263]

질문 작성자

김진우

문제 상황

  async function registerUser() {
    try {
      const user = await createUserWithEmailAndPassword(
        auth,
        email,
        password,
      )
      console.log(user);
    } catch(error) {
      console.log(error.message);
    }
  }

회원가입 버튼을 누르면 다음 createUserWithEmailAndPassword()가 담긴 registerUser()가 실행돼 회원가입이 됩니다.

하지만 아래 사진처럼 displayName, photoURL, phoneNumber와 같은 값들은 비어있습니다. 회원가입이 되면 다음 정보들도 추가가 되어 currentUser를에 입력한 정보값이 들어가게끔 해주고 싶습니다.

  function handleProfileImage(e){
    if(e.target.files[0]) {
      setImage(e.target.files[0]);
      const newURL = upload(image);
      setImageURL(newURL);
    }
  }

export async function upload(file) {
  const fileRef = ref(storage, "profiles/" + file.name);
  const snapshot = await uploadBytes(fileRef, file);
  console.log("업로드됨!");
  const photoURL = await getDownloadURL(fileRef);
  return photoURL;
}

인풋의 파일 선택을 눌러 이미지를 고르고 담아주면 image 전역상태변수에 파일이 담깁니다. 이 이미지를 upload() 함수를 사용해 파이어 스토어에 성공적으로 올립니다. 그리고 이미지의 URL을 반환하게끔 해줬습니다 .이 반환된 URL은 setImageURL의 인자로 들어가 ImageURL에 담기게 됩니다.

  onAuthStateChanged(auth, (user) => {
    if(user) {
      updateUser(user.name, imageURL);
    }
  })

  async function updateUser(name, photoURL) {
    try{
      const update = updateProfile(auth.currentUser, {
        displayName: name, 
        photoURL: photoURL,
      }) 
      console.log("프로필 업데이트 성공!")
    } catch(error) {
      console.log(error.message);
    }
  }

OnAuthStateChanged()로 회원가입 직후 updateUser()를 실행시켜주게끔 했습니다. updateUser()함수는 파라미터로 name 전역상태변수에 저장된 값과 아까 위에서 설정해준 imageURL의 값이 담기게 해줬습니다. 이후에 updateProfile이 실행되면서 currentUser의 객체를 업데이트 해주길 바랬습니다. 하지만 결국 아무것도 들어가지 않게 됐습니다.

어떻게 하면 회원가입을 한 유저의 객체를 내가 원하는 값들을 넣어 업데이트 해줄 수 있을까요?

프로젝트 저장소 URL

https://github.com/likelion-frontendo/likelion-saja/tree/feature/jinwoo/register

develop으로 들어갈 경우 버그를 발생시킬 걸 우려해 feature/jinwoo/register 브랜치에 담아뒀습니다

환경 정보

• 운영체제 정보 (예: Windows, macOS)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[rlawlsdn263]

다른 방법을 도전해보기로 해서 질문을 정리해서 다시 가져와보겠습니다!

[yamoo9]

다른 방법을 도전해보기로 해서 질문을 정리해서 다시 가져와보겠습니다!

답변이 늦어 자체적으로 closed 하셨나 보네요 🥲 혹시 문제 해결이 안 되었다면 다시 질문 주시면 검토해서 바로 답변 드릴께요! @rlawlsdn263 님 화이팅! 😃