next-auth error : CLIENT_FETCH_ERROR

next-auth의 [CLIENT_FETCH_ERROR]

이 글은 로컬작업시의 에러이고, 배포(amplify)이후 에러도 있다...

dev로 보면서 작업 하다가 build & start를 해서 보면 google 로그인 버튼이 사라졌다..
터미널의 에러를 확인해보니

[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'
}

이런식으로 나오며 주어진 에러확인 링크를 타고 들어가보면 NEXTAUTH_URL 가 잘못 설정되어있다는 것 같다. 하지만 건드리질 않았는데 왜이러는건지..?
혹시 다른사람들도 이런 이슈가 있었을까 싶어 github 이슈를 찾아보니 여러 CLIENT_FETCH_ERROR 이슈가 있는것을 확인하였고, 그 중에 나와 같은 케이스를 찾았다.

프로덕션에서 오류가 난다는 것!!

고맙게도 해당 이슈의 밑에 댓글에 있는 방식으로 해보았더니 되었다.

node 17+에서 IPV6에 유리한 도메인 확인 순서 지정 때문이란다. (내 node -v는 v18.15.0 였다)

1. 위 내용대로 .env NEXTAUTH_URL=http://127.0.0.1:3000/ 로 수정
   -> 왜 127.0.0.1 인가?
2. google cloude의 리디렉션 URI에 localhost:3000을 위 ip주소로 바꾸어서 추가

그러면 접속은 localhost던 ip로던 할 수는 있지만 로그인을 거치면 ip주소로 사용하면서 잘 동작 된다 :) , dev도 물론 잘 됨

이유모를 에러가 날 때엔 공식문서와 github issues를 잘 확인하자!

---

공부하며 정리&기록하는 ._. 씅로그