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

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

 

[구글 로그인시]

구글 로그인시

채팅 프로필에 구글 로그인시에는 그냥 디폴트이미지만 불러오는 이슈가 발생했다. 🥹

 

 

[이메일로 회원가입시]

이메일로 회원가입시

 

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

 

---

🧐 해결 과정

알고 보니 구글 로그인한 정보값은 파이어베이스의 users collection에 들어가지 않아서 생긴 이슈였다.

 

[ handleGoogleSignIn.tsx ]

import classNames from 'classnames';
import { auth } from '@/firebase/auth';
import { db } from '@/firebase/firestore';
import classes from './Button.module.scss';
import { useNavigate } from 'react-router-dom';
import google from '/public/assets/googleLogo.svg';
import { GoogleAuthProvider, signInWithPopup } from '@firebase/auth';
import { collection, doc, setDoc } from '@firebase/firestore';

interface Props {
  widthValue?: string | number;
  maxWidthValue?: string | number;
  heightValue?: string | number;
  className?: string;
}

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

  const handleGoogleSignIn = async () => {
    const provider = new GoogleAuthProvider();
    try {
      const result = await signInWithPopup(auth, provider);
      const user = result.user;

      if (user) {
        const { uid, displayName, photoURL } = user;
        const userData = {
          uid,
          displayName,
          photoURL,
        };
        const userRef = doc(collection(db, 'users'), uid);
        await setDoc(userRef, userData, { merge: true });
      }

      navigate('/mainpage');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>
      <button
        type="button"
        aria-label={'Google 로그인 버튼'}
        className={classNames(classes.button, className)}
        style={buttonStyle}
        onClick={handleGoogleSignIn}
      >
        <img src={google} alt="Google 로고 이미지" />
        Google 로그인
      </button>
    </>
  );
}

위 코드는 구글 로그인 버튼 클릭 시 실행되는 함수인 handleGoogleSignIn 입니다. 이 함수는 구글 인증 제공자(GoogleAuthProvider)를 사용하여 signInWithPopup 함수를 호출하여 사용자가 로그인할 수 있도록 합니다.

로그인이 성공하면 result 객체를 반환합니다. result 객체에서 user 객체를 가져온 후 uid, displayName, photoURL 값을 추출하여 userData 객체에 저장합니다. 그리고 userRef를 사용하여 Cloud Firestore의 users 컬렉션에 사용자 정보를 저장합니다.

이때 setDoc 함수의 merge 옵션을 true로 설정하여, 이미 해당 사용자의 정보가 저장되어 있을 경우, 새로운 정보로 업데이트합니다.

 

마지막으로 navigate 함수를 사용하여 /mainpage 경로로 이동합니다.

 

만약 로그인 과정에서 에러가 발생하면, catch 블록에서 해당 에러를 콘솔에 출력합니다.

 

✅ signInWithPopup이란??

signInWithPopup는 Firebase Authentication에서 제공하는 함수 중 하나로, 팝업 창을 통해 사용자 인증 프로세스를 수행합니다. 이 함수를 사용하면, Google, Facebook, Twitter, GitHub 등의 제공자를 사용하여 사용자를 인증할 수 있습니다.

예를 들어, 구글 로그인을 구현하기 위해 signInWithPopup 함수를 사용하면, 구글 로그인 창이 팝업되어 사용자가 구글 계정으로 로그인할 수 있습니다. 로그인에 성공하면 Firebase Authentication에서 해당 사용자 정보를 반환합니다. 이 정보를 사용하여 애플리케이션에서 추가적인 처리를 할 수 있습니다.

signInWithPopup 함수는 Promise 객체를 반환하므로, async/await 패턴을 사용하여 사용자 인증 프로세스를 처리할 수 있습니다.

 

🌼 결과 !!

---

참고

https://firebase.google.com/docs/auth/web/google-signin?hl=ko 

자바스크립트로 Google을 사용하여 인증  |  Firebase