1. 배경설명 ✏️

이번 모프 웹앱을 만들면서 로그인 기능을 구현하기 위해 Firebase Authentication를 사용했다. Original Documentation이 친절한 편이기 때문에 구글 소셜 로그인, 일반 이메일 로그인, 로그아웃 등의 부분은 큰 어려움이 없었다.

하지만...! 마이페이지-비밀번호 재설정을 구현하면서 처음으로 어려움을 맞이했다.

일단 비밀번호 재설정 과정을 서술해보면,

1. Firebase 측에서 가지고 있는 현재 비밀번호와 사용자가 입력한 현재 비밀번호가 맞는지 확인
2. 새로운 비밀번호 입력
3. 변경 완료

의 순서로 이루어진다. 이 과정에서 <재설정> 부분이 Original Documentation과 달라 어려웠다.

2. Original Documentation 📃

import { getAuth, reauthenticateWithCredential } from "firebase/auth";

const auth = getAuth();
const user = auth.currentUser;

// TODO(you): prompt the user to re-provide their sign-in credentials
const credential = promptForCredentials();

reauthenticateWithCredential(user, credential).then(() => {
  // User re-authenticated.
}).catch((error) => {
  // An error ocurred
  // ...
});

그런데 여기서 문제는!

const credential = promptForCredentials();

이 부분이라는 것이다. TODO(you)라는 주석을 보면, 우리가 직접 저 promptForCredentials 라는 함수를 구현해야 한다는 것이다.

3. 해결방법 💡

해결방법은 아래의 StackOverFlow를 통해 알게 되었다.
https://stackoverflow.com/questions/37811684/how-to-create-credential-object-needed-by-firebase-web-user-reauthenticatewith

답은!

const credential = firebase.auth.EmailAuthProvider.credential(
    user.email, 
    userProvidedPassword
);

나의 경우, 로그인 방식을 이메일 로그인으로 했기 때문에 EmailAuthProvider 을 사용해야 했던 것 같다.

이때 userProvidedPassword는 prompt나 input 태그를 이용해 현재 비밀번호를 받아와야 한다. (나는 input 태그 사용)

---

정리하자면,
API에서 TODO로 credential 값을 받아오라고 한 이유는 아마도

사용자가 이메일로 로그인 했는지 소셜 로그인 했는지 firebase는 알 수 없음

이 아닐까 싶다.