채팅 구현시 카카오로 로그인 된 정보값을 가져오지 못하는 문제

📌 채팅 구현시 카카오로 로그인 된 정보값을 가져오지 못하는 문제

 

[카카오 로그인시]

채팅 프로필에 카카오 로그인시에 그냥 디폴트이미지만 불러오고 이름은 불러와지지않는 이슈가 발생했다. 🥹

 

[이메일로 회원가입시]

이메일로 회원가입시에는 마이페이지에서 변경한 이미지가 실시간으로 잘 들어오지만 카카오 로그인은 정보값을 가져오지 못했다.

 

알고보니 카카오 로그인시 firestore 의 users collection에 정보가 들어가지 않고있었던걸 확인할 수 있었다.

---

🧐 해결과정

export function ButtonKakao({
  widthValue,
  maxWidthValue,
  heightValue,
  className,
}: Props) {
  const buttonStyle = {
    width: widthValue,
    maxWidth: maxWidthValue,
    height: heightValue,
  };
  const navigate = useNavigate();

  const handleKakaoLogin = (response: KakaoLoginResponse) => {
    if (response === undefined) {
      return; // 로그인 실패
    }

    const displayName = response.profile.properties.nickname;
    const email = response.profile.kakao_account.email;
    const password = response.profile.id.toString();
    const photoURL = response.profile.kakao_account.profile.profile_image_url;
    auth.onAuthStateChanged((user) => {
      if (user) {
        navigate('/mainpage');
      }
    });

    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        updateProfile(user, {
          displayName: displayName,
          photoURL: photoURL,
        });

        const db = getFirestore();
        const userDocRef = doc(db, 'users', user.uid);
        const userData = {
          displayName: displayName,
          email: email,
          photoURL: photoURL,
        };
        setDoc(userDocRef, userData);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <KakaoLogin
      token={import.meta.env.VITE_KAKAO_API_KEY}
      onSuccess={handleKakaoLogin}
      onFail={(error) => console.log(error)}
      render={({ onClick }) => (
        <button
          type="button"
          aria-label={'Kakao 로그인 버튼'}
          className={classNames(classes.button, className)}
          style={buttonStyle}
          onClick={onClick}
        >
          <img src={kakao} alt="Kakao 로고 이미지" />
          Kakao 로그인
        </button>
      )}
    />
  );
}

위 코드는 버튼카카오 컴포넌트 입니다.

 const db = getFirestore();
        const userDocRef = doc(db, 'users', user.uid);
        const userData = {
          displayName: displayName,
          email: email,
          photoURL: photoURL,
        };
        setDoc(userDocRef, userData);
      })
      .catch((error) => {
        console.error(error);
      });

 

updateProfile() 메서드는 사용자 프로필 정보를 업데이트하는 메서드입니다. 이를 통해 사용자의 닉네임 및 프로필 사진 URL을 설정할 수 있습니다.  

 

getFirestore() 함수는 Firestore 데이터베이스 인스턴스를 반환합니다. doc() 메서드를 사용하여 새로운 사용자의 정보를 저장할 Firestore 문서의 참조를 가져옵니다.  

 

마지막으로 setDoc() 메서드를 사용하여 Firestore에 새로운 사용자 문서를 저장합니다. 이 문서는 새로운 사용자의 정보를 포함하며, displayName, email 및 photoURL 등이 포함됩니다. 만약 이 과정에서 에러가 발생하면 catch 블록에서 오류가 처리됩니다.  

이렇게 새로운 사용자가 생성되고 Firestore에 저장됩니다. 

 

위 사진을 보면 users collection에 카카오 로그인 정보가 들어간걸 확인할 수 있습니다.

 

---

🌼 결과 !!

 

위 좌정에 따라 users collection에 정보를 저장해 주니 카카오 로그인시 이미지와 이름이 잘 들어온걸 확인 할 수있습니다!