nuxt + firebase를 통한 auth 구현에 있어 생기는 문제 해결

firebase auth 를 사용하면서 생기는 문제가 있었다.

일전에 중복 이메일시 에러가 났을때 로긴하는 방법에 대해서 이야기 했었고 오늘은 nuxt에서 firebase auth를 사용할시 발생하는 문제에 대해서 말해보려고 한다.

 

결론부터 말하면 문제는 바로 로그인이 승인된 시점에서 시작된다.

signInWithRedirect로 로긴을 하고 나서 nuxt는 페이지가 새로 로드되는데 만약 메인페이지와 로그인 페이지가 따로 불리되어 있을경우 메인페이지로 가지 못하고 계속해서 로그인 페이지만 뜨게 된다.

 

이 문제를 해결하기위해 이틀을 투자했지만 제대로 해결하지 못하고 3일째 되던날 해결되었다.

여러가지 방법을 써 보았는데, 먼저는 middleware에서 들어오는 주소값 및 user state 값을 확인해주고 다시 redirect 하는 방법이었다.

하지만 해당 방법은 실패했는데, middleware 이벤트는 초반 nuxt 페이지 로딩에는 발생하지 않고,

1차로 페이지가 로딩되고 다른 페이지로 이동시에만 발생함을 알았다.

즉 구글로 redirect 했다가 페이지로 다시 돌아오는 시점에는 페이지가 다시 로딩되는 경우이므로 middleware 이벤트가 발생하지 않는다.

 

다음으로 mounted에 onAuthStateChanged 이벤트를 넣고 실행시키는 방법인데,

해당 방법은 로그인페이지가 다 로딩된후에 실행되서 사용자가 로그인 페이지를 한번 더 보게되는 불편함이 있었다.

이것도 써먹지 못할 방법이었다.

 

그래서 찾은 최적의 방법은 nuxtServerInit 을 이용하는 것이다.

nuxtServerInit은 서버 렌더링 과정중에 일어나는 이벤트인데, 여기서 redirect를 해주면 깔끔하게 페이지가 옮겨감을 확인했다.

 

https://github.com/nuxt/nuxt.js/issues/2413

how to redirect page in nuxtServerInit function · Issue #2413 · nuxt/nuxt.js

그런데 이 사람이 로그인 했다는 것을 어떻게 확인할지가 문제였는데,

이미 페이지가 로드되어 있지 않아서 state 값에 접근은 불가능했고,

signInWithRedirect 후에 firebase에서 가져온 유저 토큰값을 집어넣어 사용해보려고 했지만 이벤트 후에는 성공시에 발생하는 다음 함수가 제대로 실행되고 있지 않았다. 

 

그래서 생각해 낸 방법이 바로 쿠기 이용이다.

아래의 링크에는 nuxtServerInit 안에서 쿠키를 어떻게 사용할 것인지 예제를 들어놓았다.

 

https://github.com/nuxt/nuxt.js/issues/4066

How to get cookie on nuxtServerInit function? · Issue #4066 · nuxt/nuxt.js

이를 통해 나는 firebase auth를 이용해 완벽히 로그인 페이지를 구현할 수 있었다.

생각보다 인터넷 상에 해당 방법에 대해 깔끔하게 설명해 놓은 예가 없어서 꽤 헤멧던거 같다.

 

firebase + nuxt를 이용할 사람들이라면 해당 방법을 참고하길 바란다.