버전이 업데이트 되면서 미묘하게 문법이 바뀌는 바람에

파이어베이스 문서를 꼼꼼히 읽어봐야 했다 …

문서를 찾기가 어려웠던 걸 토대로 사용했던 함수엔 참고링크를 달아뒀습니다

이렇게 해 두면 나중에 버전업할때도 도움이 되지 않을까요

이메일과 패스워드로 로그인 또는 가입

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [newAccount, setNewAccount] = useState(true);
const [error, setError] = useState("");

// input이 변화할 때 호출
const onChange = (e) => {
  // ES6문법. event 내의 target 안에 있는 값을 빼 오는 역할
  const {
    target: { name, value },
  } = e;
  // input에 네임을 입력해 선택된 값 판별해 변경
  if (name === "email") {
    setEmail(value);
  } else if (name === "password") {
    setPassword(value);
  }
};

// submit 했을 때 호출
const onSubmit = async (e) => {
  e.preventDefault();
  try {
    let data;
    if (newAccount) {
      data = await authService.createUserWithEmailAndPassword(email, password);
    } else {
      data = await authService.signInWithEmailAndPassword(email, password);
    }
  } catch (error) {
    setError(error.message);
  }
};

소셜 로그인 또는 가입

const onSocialClick = async (e) => {
  const {
    currentTarget: { name },
  } = e;
  let provider;
  // 내 앱과 연결된 인증 인스턴스 반환. 인스턴스가 없으면 초기화
  const auth = getAuth();
  if (name === "google") {
    provider = new GoogleAuthProvider();
  } else if (name === "github") {
    provider = new GithubAuthProvider();
  }
  // provider가 있다면 로그인화면을 띄움
  if (provider) {
    const data = await signInWithPopup(auth, provider);
  }
};

Home

앱에 진입했을 때 로그인 여부를 확인,

가입시키거나 로그인하는 공간을 보여줄지, 홈을 보여줄지 여부 판단

useEffect(() => {
  // 유저의 sign in out 상태를 감시한다. user를 찍으면 유저정보가 나옴.
  // 당연하게도 유저가 없으면 null이 찍힌다.
  authService.onAuthStateChanged((user) => {
    if (user !== null) {
      // 로그인 여부를 판별하는 state
      setIsLoggedIn(true);
      // 사용할 유저정보를 저장하는 오브젝트
      // 라우터에 내보내서 로그인정보를 사용하는 목적으로 자주 쓰임
      setUserObj({
        displayName: user.displayName,
        uid: user.uid,
        // 프로필에서 설정한 유저 정보를 업데이트 하는 용도
        updateProfile: (args) => user.updateProfile(args),
      });
    } else {
      setIsLoggedIn(false);
    }
    setInit(true);
  });
}, []);

유저 정보 업데이트

const refrashUser = async () => {
  const user = authService.currentUser;
  if (user) {
    setUserObj({
      displayName: user.displayName,
      uid: user.uid,
      // args는 원래 있던 정보를 말하는듯?
      updateProfile: (args) => user.updateProfile(args),
    });
  }
};

JSX

return (
  <>
    {init ? (
      <AppRouter
        // 라우터에 로그인 여부, 유저 정보, 유저 수정사항을 전달한다
        refrashUser={refreshUser}
        isLoggedIn={isLoggedIn}
        userObj={userObj}
      />
    ) : (
      "Initializing..."
    )}
  </>
);