사용자 피드백 받은 것중에 백엔드 개발공부 하시는 분이 답변 주신 것이 있었음.
로컬 로그인 시 구글 이메일을 입력하였고 다시 구글 소셜로그인을 했을 때 같은 프로필이 나옵니다. 그리고 기존의 로컬로그인 비밀번호로 로그인이 불가능합니다!
와… 이걸 이렇게 테스트 하실 줄은 몰랐다. 진짜… 생각치도 못했다.
로컬로 회원가입 한 것을 구글이 덮어 쓰기 해서 기존의 로컬은 안되는 것이였다.
그리고, 여러가지 방법을 써보았다.
- 첫번째 코드도 실패…
const googleLogin = async () => { try { await setPersistence(auth, browserSessionPersistence); const provider = new GoogleAuthProvider(); // 임시로 로그인을 시도하여 사용자 정보를 얻음 const tempLoginResult = await signInWithPopup(auth, provider); const userEmail = tempLoginResult.user.email || `${tempLoginResult.user.uid}@no-email.com`; // Firestore에서 이메일 중복 확인 const usersRef = collection(db, 'users'); const querySnapshot = await getDocs(query(usersRef, where("email", "==", userEmail))); if (!querySnapshot.empty) { // 중복된 이메일이 있는 경우 Swal.fire({ title: '이메일 중복!', text: '이미 사용중인 이메일입니다.', icon: 'error', confirmButtonText: '확인', confirmButtonColor: '#0051FF', }); // 로그아웃 처리 await signOut(auth); return; // 로그인 과정 중단 } // 중복되지 않은 경우, 로그인을 유지하고 사용자 프로필 업데이트 await updateUserProfile(tempLoginResult.user); Swal.fire({ title: '로그인 성공!', icon: 'success', confirmButtonText: '확인', confirmButtonColor: '#0051FF', }); router.push('/'); } catch (error) { console.error('Google 로그인 실패:', error); } }; - 두번째 코드도 실패…
useEffect(() => { // 페이지 로드 시 리디렉션 결과 처리 getRedirectResult(auth).then(async (result) => { if (result) { const userEmail = result.user.email || `${result.user.uid}@no-email.com`; // Firestore에서 이메일 중복 확인 const usersRef = collection(db, 'users'); const querySnapshot = await getDocs(query(usersRef, where("email", "==", userEmail))); if (!querySnapshot.empty) { // 중복된 이메일이 있는 경우 Swal.fire({ title: '이메일 중복!', text: '이미 사용중인 이메일입니다.', icon: 'error', confirmButtonText: '확인', confirmButtonColor: '#0051FF', }); // 로그아웃 처리 await signOut(auth); return; // 추가 처리 중단 } // 중복되지 않은 경우, 로그인 성공 처리 Swal.fire({ title: '로그인 성공!', icon: 'success', confirmButtonText: '확인', confirmButtonColor: '#0051FF', }); router.push('/'); } }).catch((error) => { console.error('로그인 실패:', error); }); }, [router]);
첫번째와 두번째 코드로 중복이면 안되도록 아무리 로그인 화면에서 못하도록 막아도 기어이 firebase Authentication은 등록을 시켜버렸다.
그래서 찾아본 것은 아래의 링크들인데… 엄두가 나지 않았다.
Build a Role-based API with Firebase Authentication | Toptal®
Build a Role-based API with Firebase Authentication | Toptal®
백엔드의 지식이 필요했었고, 튜터님께 도움을 구해보았다.
supabase의 트리거를 이용하면 편하지만, 우리는 firebase였고, 아래의 글을 알려주셨다.
Firebase용 Cloud Functions | Cloud Functions for Firebase
유료 플랜이라 결제가 필요했다. 그리고 이걸 할애할 시간이 될까..? 피드백으로 고쳐야할 부분이 아직 많다.
ID 공급업체별로 여러 계정만들기를 선택해보니, firebase Authentication에서 아래 이미지처럼 이메일이 들어가야할 식별자에 - 처리를 해버렸다.
와… 산넘어 산..
팀원들과 협의를 했다. 지금 상황을 이야기 해주었고, 우리는 백엔드 개발자가 없기에, 이런 방법은 어떻냐고 추천해주었다 .
대안 . gmail을 로컬 회원가입에서 못하도록 막자.
- 정말 괜찮은 아이디어라고 생각했다.
- 로컬 회원가입 영역에서는 얼마든지 커스터마이징이 가능하기 때문이다.
if (email.includes('@gmail.com')) {
setEmailCheck('@gmail.com은 사용할 수 없습니다');
setEmailValidationClass('text-[#EB271C]');
isValid = false;
}<p className="text-center text-[#0051FF] mt-[15px] ">현재 Gmail은 간편로그인만 지원합니다.</p>결과 ⇒ 무사히 gmail을 방지했다. 그리고 유저들에게 미리 간편로그인만 된다는 멘트도 적었다.
그리고 두번째 문제…. 이건 예시로 설명하는 것이 빠를 듯하다.
- 구글 > github 로그인
1) google 아이디로 google로그인을 진행 ⇒ 가입완료
2) 동일한 google아이디로 github 로그인을 진행 ⇒ 이메일 중복 alert 와 가입 중지
3) google 아이디로 로그인 ⇒ 로그인 성공
- github > 구글 로그인
1) google 아이디로 github 로그인을 진행 ⇒ 가입완료
2) 동일한 google 아이디로 google 로그인을 진행 ⇒ 구글 아이디로 덮어 쓰기 됨
3) 로그 아웃하고 동일한 google아이디로 github 로그인을 진행 ⇒ 로그인 불가 (중복된 이메일)
4) google 아이디로 로그인 ⇒ 로그인 성공
정말 미칠거같은 노릇이다… 와, 리액트 공부를 시작하면서, 개발 공부를 시작하면서, 지금까지 많은 프로젝트 중에 회원가입과 로그인을 안해봐서 이번 프로젝트때 맡아봤는데 온갖 유효성검사 뿐만이 아니라 이런 문제도 있다니 세상에나….
이번 대안도 팀원의 의견에 찬성했다.
대안. github 로그인 없애자.
지금 딱히 할 수 있는 영역도 아니고, github하나 뺀다고 큰 문제가 되지 않을 것이며,
일단 해야할 일들은 많기 때문에 제거하기로 함
그래서 앞으로의 할일..? 계획은?
일단, 고쳐야하는 사용자 피드백 유지보수하고, MVP 이후 미뤄둔걸 개발 한 이후 시간이 남거나, 취준 할때,
next auth를 사용해보기로 했다. 이건 소셜로그인을 google, github 뿐만이 아니라 다른 naver, kakao 등등도 지원해주기 때문에 이걸 활용하는 방안을 생각해내기로 했다.
