inflearn logo
강의

Course

Instructor

Next + Create a SNS service with React Query

Actual Membership Registration

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

975

whgpwls2103175

7 asked

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로 잡고 싶은데 가능한가요?

 

react next.js react-query next-auth msw

Answer 6

0

jaeyong Kim

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

1

zerocho

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

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

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

0

whgpwls2103175

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

0

whgpwls2103175

삭제된 글입니다

1

zerocho

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

0

whgpwls2103175

이게 보안 때문에 커스텀 오류메시지 반환이 불가능한 건가 싶기도 해요 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

0

zerocho

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

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

0

whgpwls2103175

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

입니다!

0

whgpwls2103175

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

0

zerocho

https://stackoverflow.com/a/70935976

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

캡처링부분 질문있습니다.

0

74

2

깃에 소스코드를 찾을 수 없습니다.

0

113

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

109

2

css 라이브러리 추천 부탁드립니다

0

140

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

131

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

172

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

108

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

132

2

next.js 에서 로그인에 관하여

0

138

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

98

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

230

2

fetch 캐싱과 revalidate 관련

0

84

2