[Next.js] 내가 겪은 next-auth Error들

참고 문서

next-auth 공식 문서

삽질의 시작...

최근에 웹페이지에 로그인 기능을 도입하게 되었다. 단, 서비스 자체 가입 및 로그인은 만들지 않기로 했다. 카카오 로그인 등의 간편 로그인만 사용하기로 했다.
하지만 각각의 간편 로그인 서비스들을 일일이 구현하기에는 많은 시간 소모와 삽질이 예고 되어있음을 감지했다.
그래서 어지간한 간편 로그인 서비스들이 모여있고 코딩하기에 간편한 'next-auth' 라이브러리를 사용하기로 했다.
그 중 GoogleProvider(구글 계정으로 로그인), KakaoProvider(카카오 계정으로 로그인)를 추가할 계획이다.
그런 뒤에, 이렇게 저렇게 해서 아기다리 고기다리 던 로그인 기능 구현이 완료되었다.
이제 배포해야지ㅎ 하고 기능 구현이 생각보다 금방 끝나 신나하던 나는 앞으로 마주할 오류와 삽질을 예상하지 못했다.
신나게 GIthub에 push를 했고 Github Actions로 Google Cloud Run에 배포되기를 기다렸고 4분 뒤 배포가 성공적으로 완료되었다는 Github의 메시지에 곧바로 도메인에 접속하여 로그인을 하던 중... 보지 말아야 할, 일어나지 말아야 할 오류가 발생했다...

첫 번째 오류와의 조우

이 때 OAuthCallback라는 녀석을 처음 마주하게 되었다.
브라우저의 console 창에서는 OAuthCallback이 돈을 주고 매수를 했는지 아무런 오류 메시지도 출력되지 않아 오류가 없는 것 같이 보인다. 하지만 '해치웠나?'

(플래그 ON)

라는 '그'발언을 함과 동시에 URL 부분을 쳐다보는 순간 내가 설정하지 않은 error라는 문구와 함께 OAuthCallback녀석이 허락도 없이 내 도메인과 사이좋게 붙어있는 모습을 볼 수 있었다.
나는 당장 둘을 떨어뜨려놓기 위해 Sentry, Cloud Run의 로그를 필사적으로 살펴보았다.
OAuthCallback에러라는 녀석은 무엇인지, 왜 나타난 것인지 부터해서 이 사이트 저 사이트 다 찾아보고 요즘 핫하다는 요술램프의 지니같은 ChatGPT한테도 물어봤지만 별다른 소득은 없었다.
Sentry에서도 별다른 로그를 찾지 못했고 Cloud Run에서 아래와 같은 로그를 찾을 수 있었다.

error: TypeError: checks.state argument is missing

인간은 망각의 동물이라고, 앞전에 '해치웠나'를 경험했음에도 '이 에러 메시지에 대한 오류만 처리하면 되겠다!'라는 확신을 가지게 되었고 그 플래그는 발작버튼이 눌린 것 마냥 어김없이 발동되었다.
브라우저 쿠키를 살펴보니 state값도 멀쩡히 살아있었다.
그리하여 삽질의 신호탄이 격발되었고 아래와 같은 삽질들을 모두 진행해보았다.

• NEXTAUTH_URL 변수의 문제일까 싶어 수정
• NEXTAUTH_SECRET 변수의 문제일까 싶어 지우기도 해보고 살려두기도 해봄
• next-auth의 'signIn'에서 'callbackUrl'이 문제일까 싶어 수정
• Google Cloud에서 프로젝트의 'API 및 서비스' 탭에서 사용자 인증 정보의 'OAuth2.0 클라이언트 ID'의 '승인된 자바스크립트 원본', '승인된 리디렉션 URI'문제일까 싶어 수정
• '킹'택오버플로 'stackoverflow'에 질문(도 해봤지만 답글은 아직까지도 달리지 않고 있다... 조회 수는 올라가는데 읽씹 당하는 중)

하지만 문제는 해결되지 않았다.
이 현상이 특이한 점은 Cloud Run에 배포했을 때 여기서 나온 서비스 URL에서는 아무런 문제 없이 잘 동작하는데 Firebase Hosting을 통해 배포된 도메인에서는 동작하지 않는다는 점이다.

결국 Firebase Hosting 과정에서의 문제라고 결론짓고 배포 환경을 변경하게 되었다.

Cloud Run + Firebase Hosting → AWS beanstalk + nginx (편ㅡ안한 새로운 환경을 구축해주신 팀장님께 압도적 감사)

두 번째 오류와의 조우

새로 배포된 환경에서도 어김없이 오류를 맛보게 되었다.

(오류감별사 오믈리에로 전직 중)

이번에는 OAuthSignIn이라는 녀석과 만났다.
내가 할 수 있는 삽질은 정해져있으니 가장 먼저 GOOGLE_CLIENT_ID 값과 GOOGLE_CLIENT_SECRET 값을 수정해보았다.
근데 왠걸? 이 녀석은 OAuthCallback과 다르게 끈기가 없었다.
단순히 오탈자 문제였다... 이것만 바꿔주니 드디어 도메인에서도 로그인 기능이 정상동작!!!

(감동의 눈물을 흘릴 뻔... 하지만 난 눈물을 자주 흘리진 않지)

이로써 next-auth의 삽질기가 마무리 되었다. 새로운 영역에 도전하는 것은 흥미롭지만 새로운 오류는 언제나 나에게 흰머리를 가져다주더라...

내가봐도 글이 길다 요약본은 아래에...

1. OAuthCallback에러는 Firebase Hosting과정에서 문제가 생기는 것으로 결론지었다.
2. OAuthSignIn에러는 단순히 API Key값의 오탈자였다.