Firebase_ 이메일 로그인창 만들기

노마드코드 복습 겸 오늘 공부 정리

 

 

 

authService = firebase.auth() 를 import.

---

Auth.js

 

참고문서를 찾아보면 firebase.auth에는 EmailAuthProvider라는 기능이 있는 것을 볼 수있다.

EmailAuthProvider는 두가지 API를 제공한다.

createUserWithEmailAndPassword와 signInWithEmailAndPassword.

둘다 promise이므로 비동기적으로 처리. (async와 await 사용할거임)

input창에 email과 password를 입력하고 버튼클릭 혹은 enter입력 시,

newAccount가 true일경우 입력받은 정보로 회원가입을 하고,

false일경우 입력받은 정보로 로그인을 실행하는 함수.

만약 정보가 잘못 입력될 경우를 대비해 try catch를 사용하여 오류를 처리했다.

 

---

App.js

 

firebase.auth().currentUser은 현재 로그인되어있는 user를 나타낸다.

isloggedIn의 기본값을 currentUser API를 사용하여,

현재 로그인이 되어있는지를 식별한다.

로그인이 되어있다면 Home.js로, 아니라면 Auth.js가 나온다.

(AppRouter.js 안에서 작동)

 

하지만 다음과 같이 사용할 경우, firebase를 기다리지 않고 먼저 렌더링이 진행되기 때문에

처음 웹페이지를 방문했을 때의 currentUser의 값은 항상 null이다.

그러므로 currentUser값에 변화가 생긴 후 (firebase값을 다 받아온 후) 새로 렌더링할 필요가 있다.

onAuthStateChanged API는 유저가 로그인하거나 로그아웃할때의 변화를 감지하는 Observer이다.

useEffect 함수를 사용해서 유저의 로그인 변화가 있을 때 isLoggedIn의 값을 받아와 true 또는 false로 리턴해준다.

init는 firebase의 모든 정보를 다 받아왔는지 체크하는 state.

정보를 다 가져온 후 useEffect가 실행되고, init의 값은 true가 되어

'loading...'이라는 문구대신 AppRouter가 화면에 나타난다.

---

App.js