Next.JS와 파이어베이스 로그인 구현 삽질 연대기

제이통님의 하하하하하하하하하

하하하하하하하하하. 파이어베이스 도큐먼트를 보면서 넥스트JS와 함께 사용하려고 몇가지 알아보았다...

 

파이어베이스 클라이언트를 이용해서 이메일, 비밀번호를 사용해서 회원가입까지는 험난하지않았으나....

 

로그인 기능 구현 때 부터는 점점 막히기 시작하여 로그아웃까지 장장 2주간의 삽질끝에 완⭐️성하였다.

 

일단 막힌부분을 나열해보겠다. 

 

오류 피드백 1 -  파이어베이스 클라이언트와 어드민.

 

파이어베이스를 사용하면 패키지 중 클라이언트와 어드민이 존재한다.

클라이언트는 프론트, 어드민은 백엔드 단에서 사용하는데 넥스트는 getInitialProps, getServerSideProps를 통해서 서버사이드 데이터 패칭이 가능하다.

 

처음 파이어베이스를 사용하는것과 제일 큰건 도큐먼트를 자세히 읽지 않은 것이 큰 오산이었던거같다.

그래서 파이어베이스 클라이언트와 어드민 모두 api폴더에 기능을 다 추가해버렸었다. 전부 서버사이드에 맡겨버린것.

 

이 후 알게된 것이 파이어베이스 클라이언트는 화면단에서 처리해주고 어드민은 서버사이드(/pages/api)에서 처리해줘야 하는것을 알게되었다.

 

결론. 파이어베이스 클라이언트와 어드민. 둘을 나눈 구조로 코딩을해야한다.

 

오류 피드백 2 - initializeApp.

 

파이어베이스 클라이언트는 안그랬는데, 유독 어드민쪽 initializeApp에서

 

"Firebase App named '[DEFAULT]' already exists (app/duplicate-app) [duplicate]"

 

이런 오류가 발생한 것이다. 오류를 읽어보니 어드민app은 2개가 될 수 없다는 것이다. 킹갓택오버플로우님의 힘을 빌려 어드민 앱을 1개만 사용할 수 있도록 설정해주니 해당오류가 사라졌다...

 

오류 피드백 3 - firebase 클라이언트단 auth().onAuthStateChanged(callback)

 

유저의 상태에 대한 정보를 담고있는 메소드이다. (콜백 함수의 첫번째 파라미터로 사용자 로그인 시 객체를, 초기 화면 상태와 로그아웃하면 null을 던진다.)

 

문서

https://firebase.google.com/docs/auth/web/manage-users?hl=ko#web-version-9 

Firebase에서 사용자 관리하기  |  Firebase Documentation

 

문서에서 관찰자라는 단어가 있는데, 이 부분을 가볍게 보고 넘긴것이 화근이었다.

 

나는 이 메서드를 로그아웃 클릭 이벤트에 한 번, 로그인 기능을 리덕스 사가로 처리 할 때 유저의 상태를 추적하려고 한 번. 총 두번의 메서드를 사용하였다.

 

로그아웃 버튼의 이벤트함수의 내부 onAuthStateChange

 

로그인 사가내부에서 로그인 후 사용자가 잘 로그인이 되었는지 확인 하려고 사용한 onAuthStateChange

 

첫 로그인 로그아웃 할 때는 별 탈없이 오류가 안나는데, 두번째 로그인 로그아웃만하면 로그인 사가쪽에서 throw를 발생시키는 것이다.

 

그렇게 삽질에 삽질을 거쳐 메소드를 다시 찬찬히 읽어보니...

보다시피 리턴타입이 Unsubscribe라고 되어있다. 이걸 보고나서야 감이 잡힌 것이다.

 

즉 사용자의 로그인 상태를 추적한다는 말인데, 사용자의 상태(로그온, 로그아웃)가 바뀔 때 마다 로그아웃 기능과 로그인 기능에 사용된 onAuthStateChange함수가 실행되어 사실 첫 로그아웃때 부터 오류를 발생시킨 것을 디버깅을 통해서 알게 되었다...

 

해결방법은 간단했다 onAuthStateChange함수를 안쓰면된다 단. 사용자의 상태가 의심이 간다면 사용해야 할 듯싶다.

후기.

1. 공식문서와 도큐먼트를 잘 참고하자...

1-1. 읽을 자신이 없으면 다른 사람들은 어떻게 하였는지도 보자...

2. 테스트와 디버깅의 중요성을 다시한번 느낀다...

 

틀린 부분이나 수정해야 할 부분이 있다면 댓글로 남겨주세요.🙏