인프런 커뮤니티 질문&답변

평범한 도미님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

로그인과 회원가입 실제로 하기

credentials provider 에서 서버로 부터 받아온 error message가 반환되지 않는 경우

24.02.22 17:45 작성

·

677

·

수정됨

0

안녕하세요 제로초님!
강의 들으면서 개인 프로젝트에 적용 중입니다!

현재 로그인 기능 구현을 시도하고 있고, 백엔드 API는 개인적으로 이미 구현이 되어있는 상황입니다.
로그인 구현 방식은 강의 내용과 동일하게 진행하고 있는데요,

아이디 또는 비밀번호가 틀렸을 때 authResponse.ok가 false로 반환되어 아래처럼 에러를 던져주고 있는데, 이 에러의 에러메시지가 터미널에서는 확인이 됩니다.

스크린샷 2024-02-22 오후 5.25.38.png스크린샷 2024-02-22 오후 5.26.41.png

근데 저 에러 메시지를 로그인을 요청하는(onSubmit 함수가 있는) 클라이언트 컴포넌트에서 확인을 하고 싶은데 next-auth signIn 요청시에 error로 잡히지 않고 res(정상응답)으로만 반환이 되고 있습니다.
스크린샷 2024-02-22 오후 5.26.21.png그리고 그 res를 콘솔에 찍어보면
{error: 'CallbackRouteError', status: 200, ok: true, url: null} 로만 반환이 됩니다.
로그인이 정상적으로 이루어졌을 때는

{error: null, status: 200, ok: true, url: 'http://localhost:3000/login'} 이렇게 반환이 됩니다.

next-auth에서 Import해온 signIn 함수의 response 와 서버에서 받아온 errorMessage를 어디서 핸들링해야하는 건지 궁금하여 질문 드립니다.. 터미널에서 찍히는 errorMessage를 동일하게 signIn 함수의 error로 잡고 싶은데 가능한가요?

 

답변 6

0

jaeyong Kim님의 프로필 이미지

2024. 02. 28. 18:20

안녕하세요 혹시 저도 강의 들으면서 개인 프로젝트 적용 중인데 동일한 에러가 나오는데 해결 하셨을까요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 02. 28. 19:27

이건 에러가 아닙니다. next-auth가 이렇게 제한해둔 것입니다.

https://github.com/nextauthjs/next-auth/pull/9871

이 기능이 들어가기 전까지는 지금처럼 할 수밖에 없습니다.

0

평범한 도미님의 프로필 이미지

2024. 02. 23. 10:43

그렇군요 ㅠㅠ 답변감사합니다...!

0

평범한 도미님의 프로필 이미지

2024. 02. 23. 10:29

삭제된 글입니다

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 02. 23. 10:39

이게 4버전에서는 수정되었는데 5버전 오면서 다시 발생하는 문제같습니다.

0

평범한 도미님의 프로필 이미지

2024. 02. 23. 09:37

이게 보안 때문에 커스텀 오류메시지 반환이 불가능한 건가 싶기도 해요 0-0 찾아보니 app router에서만 발생하는 문제 같기도 하구요..
https://github.com/nextauthjs/next-auth/issues/7638#issuecomment-1599319687
이런 방식으로 해결하는 것 같긴한데.. 확실하지가 않네용 ㅠㅠ

아이디 또는 비밀번호가 틀렸을 때 return null로 설정해주면 client에서 signIn response로 {error: 'CredentialsSignin', status: 200, ok: true, url: null} 를 확인할 수 는 있습니다. throw Error를 하면 {error: 'CallbackRouteError', status: 200, ok: true, url: null} 로 반환되더라구요.
정상적으로 로그인을 하면 response로 {error: null, status: 200, ok: true, url: 'http://localhost:3000/login'}가 반환됩니다.

그리고 실제로 response의 error가 null 일때만 쿠키에 authjs.session-token이 생성되기 때문에 (즉 client signIn요청의 response의 error가 null이 아니면 로그인이 되지 않아서) 우선은 아래처럼 코드를 구현해 놓았습니다.
스크린샷 2024-02-23 오전 9.54.02.png

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 02. 23. 10:21

https://github.com/nextauthjs/next-auth/pull/8775

여기서 해결되었다고하는데 버전이 몇버전이신가요?

평범한 도미님의 프로필 이미지

2024. 02. 23. 10:37

"next-auth": "^5.0.0-beta.11",
"@auth/core": "^0.27.0"

입니다!

0

평범한 도미님의 프로필 이미지

2024. 02. 23. 08:46

답변 감사합니다!ㅠㅠ 시도해봤는데 터미널에서만 에러가 확인되고.. 로그인 창 브라우저 콘솔 로그에서는 여전히 response로 {error: 'CallbackRouteError', status: 200, ok: true, url: null} 반환되고 있습니다.

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 02. 22. 18:00

https://stackoverflow.com/a/70935976

이렇게 한 번 쓰로우 해보시겠어요?