Next.js 13 - [next-auth][error][CLIENT_FETCH_ERROR] 오류

Next.js 13.3.1 버전으로 개인프로젝트를 진행하던 중 Google OAuth로그인시 문제가 발생하였다. run dev로 실행한 상태에서는 오류가 발생하지 않았는데 실제 환경과 비슷한 환경에서 테스트 해보기위해 build 후 start시켜 next/auth에 설정해둔 signIn 페이지에서 OAuth로그인을 하려고 하니까 아래와 같은 오류가 발생하였다......

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error fetch failed {
  error: {
    message: 'fetch failed',
    stack: 'TypeError: fetch failed\n' +
      '    at Object.fetch (node:internal/deps/undici/undici:11413:11)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
    name: 'TypeError'
  },
  url: 'http://localhost:3000/api/auth/providers',
  message: 'fetch failed'
}

이를 해결하기 위해 Next.js 버전을 낮춰보기도하고 next-auth 라이브러리의 버전도 낮춰보고 코드에 잘못된 것은 없는지 다시 디버깅 해보고.... 3~4시간을 이 오류에 소비하였다. ㅠㅠ

 

문제 발생 원인

해당 문제 원인은 정확히 모르겠지만 99% next-auth 라이브러리의 버그인 것 같다. next-auth를 사용하는 다른 사람들은 env 파일에 설정 해야하는 NEXTAUTH_URL에 http://localhost:3000을 넣어도 별 문제가 없었던 것 같기 때문이다(next, next-auth 버전에 따라 차이가 있을수도...). 

 

그래도 디버깅하며 찾은 결과는 next-auth라이브러리에 있는 getProviders 함수에서 OAuth Provider 정보를 가져오지 못해서 발생한 오류였다. 

 

해결 방법

문제를 해결하기 위해 stackoverflow부터 공식문서까지 꼼꼼히 찾아보았으나 내가 해결한 글은 저 둘과는 거리가먼 일반 블로그 글이었다.

우측에 있는 링크가 해결을 도와준 글이다. https://ntalam.com/2023/01/15/client_fetch_error-nextjs-nextauth/

Client_Fetch_Error, Nextjs, NextAuth - Nallib Tala

 

바로 env에 있는 NEXTAUTH_URL키에 값을 localhost가 아닌 127.0.0.1로 주는 방법이었다.

// .env.local

NEXTAUTH_URL=http://127.0.0.1:3000
NEXTAUTH_SECRET=블라블라

 

이와같이 적용하니 이제는 다른 문제가 발생하였다 ㅎㅎㅎㅎㅎㅎㅎ 구글 로그인에 엑세스할 수 없다는 문제였다. 이제서야 감이 와서  Google Cloude에 등록한 프로젝트의 OAuth정보에 redirection URI 정보에 새로 지정한 주소인 127.0.0.1을 추가 해주었다.

http://127.0.0.1:3000/api/auth/callback/google

 

드디어... 문제없이 잘 동작하게 되었다. 진짜 이 오류놈을 해결하려고 next랑 next-auth 버전을 내려가며 빌드하고 실행해보고... 

next-auth 공식문서에서 next13.2 버전 이상에서는 /app/api/auth/[...nextauth]/route.ts 경로에 next-auth를 설정하면 된다고 하였는데 아직 안정화가 안되서 오류가 나는건가 싶어 기존에 지원하던 pages/api/auth/[...nextauth].js 디렉터리에서 작업도 해보고 별짓을 다 해보았다... 다신 보지말자 이놈아