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

밍끼님의 프로필 이미지
밍끼

작성한 질문수

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

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

CredentialsSignin 에러

작성

·

1.5K

1

CredentialsSignin 에러가 발생합니다.
아래의 CredentialsSignin 질문과 같이 redis 재시작,
백엔드 서버 재시작, next, node_modules 삭제 후
다시 npm install 후 확인해도 계속 같은 에러가 나옵니다.

next

[auth][error] CredentialsSignin: Read more at https://errors.authjs.dev#credentialssignin
    at Module.callback (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/actions/callback/index.js:256:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async AuthInternal (webpack-internal:///(rsc)/./node_modules/@auth/core/lib/index.js:65:24)
    at async Auth (webpack-internal:///(rsc)/./node_modules/@auth/core/index.js:123:29)
    at async /Users/mac/Documents/next14/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63251

백엔드

[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [WebSocketsController] EventsGateway subscribed to the "test" message +22ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [WebSocketsController] EventsGateway subscribed to the "sendMessage" message +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [WebSocketsController] EventsGateway subscribed to the "login" message +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RoutesResolver] AppController {/}: +2ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RoutesResolver] ApiController {/api}: +1ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/login, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/logIn, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/logout, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/logOut, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/user, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/decode, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RoutesResolver] HashtagsController {/api/hashtags}: +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/hashtags, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/hashtags, GET} route +1ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/hashtags/trends, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/hashtags/:id, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/hashtags/:id, PATCH} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/hashtags/:id, DELETE} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RoutesResolver] UsersController {/api/users}: +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/followRecommends, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id/posts, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id, PATCH} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id, DELETE} route +1ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id/follow, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id/follow, DELETE} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id/rooms, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/users/:id/rooms/:roomId, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RoutesResolver] PostsController {/api/posts}: +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/recommends, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/followings, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/heart, DELETE} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/heart, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id, DELETE} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/reposts, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/reposts, DELETE} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/comments, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/comments, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/posts/:id/photos/:imageId, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RoutesResolver] MessagesController {/api/messages}: +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/messages, POST} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/messages, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/messages/:id, GET} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/messages/:id, PATCH} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [RouterExplorer] Mapped {/api/messages/:id, DELETE} route +0ms
[Nest] 6106  - 01/01/2024, 3:07:18 PM     LOG [NestApplication] Nest application successfully started +2ms
redis connected
test 12345
test 123125
test sadfasf
test zcxv

 

reactnext.jsreact-querynext-authmsw

답변 1

0

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

authorize 함수 부분 보여주세요. return 값이 null인 상황입니다

밍끼님의 프로필 이미지
밍끼
질문자

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { NextResponse } from "next/server";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  pages: {
    signIn: "/i/flow/login",
    newUser: "/i/flow/signup",
  },
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        const authResponse = await fetch(`${process.env.AUTH_URL}/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: credentials.username,
            password: credentials.password,
          }),
        });

        if (!authResponse.ok) {
          return null;
        }

        const user = await authResponse.json();
        return {
          email: user.id,
          name: user.nickname,
          image: user.image,
          ...user,
        };
      },
    }),
  ],
});

무조건 status가 200으로 찍히긴하네여ㅠ

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

!authResponse.ok 위에서 console.log(authResponse)하시면 백엔드에서 어떤 status 보내는지 확인하실 수 있습니다.

status가 500 대이면 백엔드쪽 에러인데 백엔드 콘솔에 에러가 없네요;;

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

근데 에러가 나면 프론트 화면에

아이디와 비밀번호가 일치하지 않습니다.

메시지 안 뜨나요? 프론트쪽에서 뭐가 문제인 건가요?

밍끼님의 프로필 이미지
밍끼
질문자

console.log(authResponse) 작성시 console 

Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: true,
    requestIncludesCredentials: true,
    type: 'default',
    status: 401,
    timingInfo: {
      startTime: 11867.10775,
      redirectStartTime: 0,
      redirectEndTime: 0,
      postRedirectStartTime: 11867.10775,
      finalServiceWorkerStartTime: 0,
      finalNetworkResponseStartTime: 0,
      finalNetworkRequestStartTime: 0,
      endTime: 0,
      encodedBodySize: 52,
      decodedBodySize: 52,
      finalConnectionTimingInfo: null
    },
    cacheState: '',
    statusText: 'Unauthorized',
    headersList: HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [ URL {} ],
    body: { stream: undefined }
  },
  [Symbol(headers)]: HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(9) {
      'x-powered-by' => [Object],
      'vary' => [Object],
      'access-control-allow-credentials' => [Object],
      'content-type' => [Object],
      'content-length' => [Object],
      'etag' => [Object],
      'date' => [Object],
      'connection' => [Object],
      'keep-alive' => [Object]
    },
    [Symbol(headers map sorted)]: null
  }
}

프론트 onSubmit 함수 이고 아이디와 비밀번호가 일치하지않습니다 라고 메세지가 나오지않고있습니다.

  const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault();
    setMessage("");
    try {
      const response = await signIn("credentials", {
        username: id,
        password,
        redirect: false,
      });

      if (!response?.ok) {
        setMessage("아이디와 비밀번호가 일치하지 않습니다.");
      } else {
        router.replace("/home");
      }
    } catch (err) {
      console.error(err);
      setMessage("아이디와 비밀번호가 일치하지 않습니다.");
    }
  };
제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

catch문이나 setMessage 가 있는 부분에 console.log 넣으면 그 콘솔은 실행되나요?

밍끼님의 프로필 이미지
밍끼
질문자

catch문 에서는 console이 실행되지않고
if (!response?.ok) 에서도 console이 실행되지 않습니다.

try문과 try문3 에서만 console이 출력되고 현재 response가 이렇게 출력되는데
그래서 !response?.ok 으로 들어가질 못하는거같은데 왜 true가 날라오는지를 모르겠네여ㅠ

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


  const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault();
    setMessage("");

    try {
      const response = await signIn("credentials", {
        username: id,
        password,
        redirect: false,
      });
      console.log(
        "try문----------------------------------------------",
        response
      );
      if (!response?.ok) {
        console.log(
          "try문2----------------------------------------------",
          response
        );
        setMessage("아이디와 비밀번호가 일치하지 않습니다.");
      } else {
        console.log(
          "try문3----------------------------------------------",
          response
        );
        router.replace("/home");
      }
    } catch (err) {
      console.log("catch문----------------------------------------------");
      console.error(err);
      setMessage("아이디와 비밀번호가 일치하지 않습니다.");
    }
  };
제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

음 지금 next-auth 버전 몇 이신가요?

일단은 response.ok 대신 response.error 유무로 구별하시면 되긴 합니다.

밍끼님의 프로필 이미지
밍끼
질문자

  "next-auth": "^5.0.0-beta.3",


사용하고있습니다.

밍끼님의 프로필 이미지
밍끼
질문자

 

{"url":"http://localhost:9090/i/flow/login?error=CredentialsSignin"}
요청 URL:http://localhost:3000/api/auth/callback/credentials?
요청 메서드:POST
상태 코드:200 OK
원격 주소:[::1]:3000

네트워크텝에는 이런식으로 되어있습니다.

밍끼님의 프로필 이미지
밍끼
질문자

우선 말씀하신대로 임시로 response.error로 변경해놓았습니다ㅠ

밍끼님의 프로필 이미지
밍끼

작성한 질문수

전체 Q&A
질문하기