문제 발생!

다른 소셜로그인 유저가 로그인 하면 아무 문제가 없었는데 이메일/패스워드로 가입한 유저가 로그인 했을 때는 문제가 발생한다.

기존 소셜로그인은 유저의 프로필 정보를 이미 가지고 있기 때문에 displayName을 가지고 있지만, 이메일/패스워드로 가입한 유저의 경우 프로필 정보에는 displayName을 가지고 있지 않다.

따라서 헤더 네비게이션에 작성해 둔, {userObj.displayName}의 프로필 부분에 구멍이 난다. 현재 이메일/패스워드로 가입한 유저의 userObj.displayName 값이 null이기 때문이다.

해결 방법

조치를 취해줘야 하는데, 이를 해결하는 데에는 여러 방법이 있다.

• 가입할 때 displayName 받는 form 만들어 displayName 받기
• 가입 후 첫 로그인 시 user 정보에 updateProfile()메서드 사용하여 displayName 임의로 지정하기
• 등등..

가장 편한 방법으로 판단되는 2번으로 일단 진행해보자.

가입 후 첫 로그인 시 user 정보에 updateProfile()메서드 사용하여 displayName 임의로 지정하기

import { getAuth, onAuthStateChanged, updateProfile } from "firebase/auth";

//...

const auth = getAuth();

onAuthStateChanged(auth, async (user) => {
  //🔥 user의 displayName이 null인 경우 updateProfile()을 사용하여 displayName을 "유저"로 임의 변경 해버리자. 그러고 나서 유저 정보를 userObj에 업데이트 하여 로그인 한다.
  if (user) {
    if (user.displayName === null) {
      await updateProfile(user, { displayName: "유저" });
    }
    setUserObj(user);
  } else {
    setUserObj(null);
  }
  setInit(true);
});

문제 해결!
로그인 시 자동으로 "유저"라고 뜬다. 마음에 안 들면 프로필 수정 고고~ 😇
사실 진짜 트위터처럼 모달창 띄워서 가입할 때 부터 이름을 받고 싶긴 한데 아직 실력이 안되므로 일단 간단한 방법으로 진행하고, 나중에 방법을 바꿔보자! 차근차근! 아자아자! 홧팅!