Firebase Doc의 Javascript - V8을 기반으로 작성하였습니다.

---

Auth Setting...

1. auth를 import해줍니다.

import 'firebase/compat/auth';
export const authService = firebase.auth();

2. useState를 사용해서 input으로 받아올 Email과 Password를 담아줄 저장소를 생성합니다.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

---

Email 계정 생성하기 - (Doc)

👀 createUserWithEmailAndPassword(Email, Password)

createUserWithEmailAndPassword 를 이용해서 Email 계정을 생성할 수 있습니다!

data = await authService.createUserWithEmailAndPassword(
  email,
  password
);

👊 이제 Email 계정을 생성해봅시다.

✌ Firebase Authentication Page에서 확인해보니 잘 생성되어있습니다!

Email 계정으로 Login 하기

👀 signInWithEmailAndPassword(Email, Password)

signInWithEmailAndPassword 를 이용해서 Email 계정으로 로그인 할 수 있습니다!

data = await authService.signInWithEmailAndPassword(
  email,
  password
);

👊 이제 Email 계정으로 로그인해봅시다.

✌ 정상적으로 로그인이 되었습니다!

• 저는 메인 페이지에서 로그인 하지 않았을 경우 로그인 페이지를 보여주고
  로그인 했을 경우 로그아웃 페이지를 보여주도록 코드를 작성하였습니다.

---

관찰자 생성하기 - (DOC)

갑자기 관찰자를 생성하는 이유 : 사용자가 계정을 만들었는지, 로그인을 요청했는지, 로그아웃을 요청했는지 UseEffect를 이용해 따로 코드를 작성하지 않고 제공되는 함수를 이용해 확인하기 위해 생성합니다.

👀 onAuthStateChanged(callback)

useEffect(() => {
  authService.onAuthStateChanged((user) => {
    if (user) {
      console.log("user",user);
      setIsLoggedIn(true);
      setUserObject(user);
    } else {
      setIsLoggedIn(false);
    }
    setInit(true);
  });
}, []);

로그인을 할 경우 user에는 다음과 같은 Object가 담겨있습니다.

이 Object 안에는 DisplayName(Email 계정 로그인시에는 null로 표시), Email, createdAt(계정 생성 날짜) 등의 유저의 다양한 정보들이 담겨있습니다.
꼭 한 번은 일일이 탐색해보시길 추천드립니다!

다음에는 Social Login과 LogOut에 대해서 정리해보도록 하겠습니다!😁

---

👍 Reference

• NomadCoder - Nwitter
• Firebase - Auth