❗️ next-auth Crendentials 에러

next-auth를 사용해서 /src/auth.ts에서 api 연동을 통해 서버에서 받아온 값을 클라이언트 컴포넌트에 보내는 코드를 작성하였다. 성공 시 로그인 성공으로 처리하여 redirect 해주고, 에러 발생 시 서버에서 보내준 status에 따라 다르게 화면을 처리하기 위해서이다.

하지만 서버에서 보내준 에러가 터미널에서는 확인이 되지만, 클라이언트 컴포넌트에서는 error로 잡히지 않고 아래와 같이 {error: 'CallbackRouteError', status: 200, ok: true, url: null}으로 반환되었다.

여러가지 해결방법을 찾아서 적용해보았지만 해결되지 않았다. 다양하게 다른 방식으로 콘솔창에 Crendentials 에러가 찍힐 뿐이었다^^

• patch-package 사용
• auth-errors.ts
  auth-errors.ts
• CredentialsSignin

그래서 일단 임시 방안을 사용하기로 했다.

로그인 성공 시

{error: null, code: null, status: 200, ok: true, url: 'http://localhost:3000/login'}

로그인 실패 시

{error: 'Configuration', code: null, status: 200, ok: true, url: null}

프론트엔드 form에서 유효성검사를 철저하게 진행하고, /src/auth.ts에서 Sentry.io에 api 에러를 전송하게 하여 이 부분에 에러가 나더라도 어떤 에러인지 나중에 파악할 수 있도록 만들었다.