React firebase, 소셜 로그인 기존 데이터 저장하기 (google, github)

Firebase에서 Auth 서비스로 간편하게 소셜 로그인을 할 수 있게 제공해준다.

그 중 Google과 GitHub로 로그인을 할 수 있는 서비스를 기획하였다.

기존 깃헙 로그인 코드

const githubLogin = () => {
   const provider = new GithubAuthProvider();
   signInWithPopup(authService, provider)
     .then(() => {
       setDoc(doc(db, 'user', authService.currentUser.uid), {
         uid: authService.currentUser.uid,
         email: authService.currentUser.email,
         nickname: authService.currentUser.displayName,
         bookmarks: [],
         profileImg:
           authService.currentUser.photoURL === ''
             ? defaultImg
             : authService.currentUser.photoURL,
         teamID: [],
         moreInfo: {
           u_isRemote: '',
           u_location: '',
           u_stack: [],
           u_time: '',
         },
       });
     };

기존 구글 로그인 코드

const gooleLogin = () => {
   const provider = new GoogleAuthProvider();
   signInWithPopup(authService, provider)
     .then(() => {
       setDoc(doc(db, 'user', authService.currentUser.uid), {
         uid: authService.currentUser.uid,
         email: authService.currentUser.email,
         nickname: authService.currentUser.displayName,
         bookmarks: [],
         profileImg:
           authService.currentUser.photoURL === ''
             ? defaultImg
             : authService.currentUser.photoURL,
         teamID: [],
         moreInfo: {
           u_isRemote: '',
           u_location: '',
           u_stack: [],
           u_time: '',
         },
       });
     };

⛔⛔ FireBase에서 제공하는 서비스로 간편하게 로그인 할 수 있지만, 문제는 이게 회원가입 따로, 로그인 따로가 아니라 동시에 하는 것이기 때문에 로그인 할 때마다 초기화 된 정보가 DB에 들어가는 것이다

⭐⭐ 해결방법
Auth 서비스에 providerId가 구글인지, 깃헙인지 알 수 있어서, 그것을 이용해보기로 했다.

 // 로그아웃
 const HeaderLogOut = async () => {
   // 구글, 깃헙 기존 정보 입력하기
   if (authService.currentUser.providerData[0].providerId === 'google.com') {
     await setDoc(doc(db, 'google', authService.currentUser.uid), {
       bookmarks: [...profileUserInfo[0]?.bookmarks],
       teamID: [...profileUserInfo[0]?.teamID],
       uid: authService.currentUser.uid,
       profileImg: profileUserInfo[0]?.profileImg,
       moreInfo: {
         u_isRemote: profileUserInfo[0]?.moreInfo.u_isRemote,
         u_location: profileUserInfo[0]?.moreInfo.u_location,
         u_stack: [...profileUserInfo[0]?.moreInfo.u_stack],
         u_time: profileUserInfo[0]?.moreInfo.u_time,
       },
     });
   } else if (
     authService.currentUser.providerData[0].providerId === 'github.com'
   ) {
     await setDoc(doc(db, 'github', authService.currentUser.uid), {
       bookmarks: [...profileUserInfo[0].bookmarks],
       teamID: [...profileUserInfo[0].teamID],
       uid: authService.currentUser.uid,
       profileImg: profileUserInfo[0].profileImg,
       moreInfo: {
         u_isRemote: profileUserInfo[0].moreInfo.u_isRemote,
         u_location: profileUserInfo[0].moreInfo.u_location,
         u_stack: [...profileUserInfo[0].moreInfo.u_stack],
         u_time: profileUserInfo[0].moreInfo.u_time,
       },
     });
   }
   authService.signOut();
   window.location.replace('/');
 };

⭐로그아웃 할 때 기존에 있던 정보를 새로운 google과 github이라는 새로운 컬렉션에 해준다.

⭐기존에 초기화 되는 로그인 코드에서 로그아웃 할 때 들어있던 정보를 입력해준다.

// 구글 로그인
 const gooleLogin = () => {
   const provider = new GoogleAuthProvider();
   signInWithPopup(authService, provider)
     .then(() => {
       setDoc(doc(db, 'user', authService.currentUser.uid), {
         uid: authService.currentUser.uid,
         email: authService.currentUser.email,
         nickname: authService.currentUser.displayName,
         bookmarks: [],
         profileImg:
           authService.currentUser.photoURL === ''
             ? defaultImg
             : authService.currentUser.photoURL,
         teamID: [],
         moreInfo: {
           u_isRemote: '',
           u_location: '',
           u_stack: [],
           u_time: '',
         },
       });
       onAuthStateChanged(authService, (user) => {
         if (user) {
           const q = query(
             collection(db, 'google'),
             where('uid', '==', authService.currentUser.uid),
           );
           const unsubscribe = onSnapshot(q, (snapshot) => {
             const newInfo = snapshot.docs.map((doc) => ({
               id: doc.id,
               ...doc.data(),
             }));
             updateDoc(doc(db, 'user', authService.currentUser.uid), {
               nickname: authService.currentUser.displayName,
               bookmarks: [...newInfo[0]?.bookmarks],
               profileImg:
                 authService.currentUser.photoURL === ''
                   ? defaultImg
                   : newInfo[0]?.profileImg,
               teamID: [...newInfo[0]?.teamID],
               moreInfo: {
                 u_isRemote: newInfo[0]?.moreInfo?.u_isRemote,
                 u_location: newInfo[0]?.moreInfo?.u_location,
                 u_time: newInfo[0]?.moreInfo?.u_time,
                 u_stack: [...newInfo[0]?.moreInfo?.u_stack],
               },
             });
           });
           return unsubscribe;
         }
       });
       navigate('/');
     })
     .catch((err) => {
       console.log(err);
     });
 };

👍👍 코드만 보면 복잡해 보일 수 있다고 생각이 들지만, 기존에 정보도 유지하면서, 로그인 했을 때 초기화 되는 것을 방지하기 위해서는 위에 코드가 적절한 방법이라고 생각해서 구현을 했다