firebase - next.js getInitialProps login

next.js 의 장점은 ssr(server side rendering)이다. page를 렌더하기전에 미리 필요한 데이터를 받아와서 page를 렌더링할 때, 데이터와 함께 렌더링을 해준다. 이러한 장점을 가지고 있어서 페이지를 렌더링 할 때, login이 정보를 빨리 받아와서 login 여부에 따라서 페이지 기능을 다양하게 이용할 수 있는 페이지들이 많다.

 

firebase의 oAuth 기능을 활용해서 login 정보를 받아오고 싶지만, 매번 useEffect를 호출할 수 있다. 하지만, next js 장점을 활용하지 못하고 사용하는것 같다.

useEffect(() => {
    auth.onAuthStateChanged((user: any) => {
      if (user) {
        dispatch(signin(user.providerData[0]));
      }
    });
  }, [signin]);

 

그래서 매번 useEffect로 re-render 시키기 보다 미리 login 데이터를 받아와서 뿌려주면 좋을 것 같다는 생각이 들어서 찾아봤더니...

next-firebase-auth 라는 라이브러리가 있었다.

사용하는 장점, 단점이 나와있다.

 

  장점은 SSR 접근 가능

  단점은 팩키지 설치 및 사용전보다 복잡성

 

www.npmjs.com/package/next-firebase-auth

next-firebase-auth

 

사용을 설정하는데 어려움이 조금 있다. firebase에서 privateKey를 받아와야 하는데 생각보다 firebase에서 private key 받을 수 있는 페이지를 찾기 어려웠다. 결국 찾다가 접속을 하게 되었고, privateKey를 사용하는데 key값을 설정할 때도 보통 사용하는 방식과 조금 달랐다.

 

firebase private key 페이지를 찾았던 방법은 firebase private key를 검색을 하고 빨간색으로 표시된 곳으로 들어간다.

페이지를 접속을 하고 중간쯤에 To generate a private key에서 1.에 있는 Service Accounts 클릭하면 내 프로젝트를 보여주는 페이지로 이동을 한다. private key를 받을 프로젝트를 선택하면 다음 페이지로 넘어간다.

 

이페이지로 넘어오게 된다. 그리고 나서 generate new private key를 누르면 메모장에 private key가 담긴 파일을 다운 받을 수 있다.

 

 

그리고 나서 npm에 나와있는 데로 설정을 해야 한다. .env에 private key를 넣고 설정을 했다. 보통 .env에서 key 같은것을 설정을 하면 다음과 같이할 수 있다.

DB_HOST=localhost

위와 같은 방식으로 .env를 설정 했다면 다음과 같은 error message를 보게 된다. node에서...

error: failed to parse private key: error: invalid pem formatted message.

 

firebase private key 설정 할 땐, 조금 다르게 설정 해야한다.

이렇게 ', " 를 꼭 써야한다. 그리고 \n도 그대로 사용을 해야한다. 

PRIVATE_KEY='"-----BEGIN PRIVATE KEY----- ~~~~ \n ~~~ \n -----END PRIVATE KEY-----"'

 

그리고 또 다른 에러는 \\n 이 들어 있으면 process.env.PRIVATE_KEY.replace(/\\n/g, '\n') 으로 바꿔서 사용이 필요하다.