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

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

작성한 질문수

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

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

CredentialsSignin 에러

24.01.01 15:17 작성

·

1.3K

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

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

2024. 01. 01. 15:22

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

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

2024. 01. 01. 15:31

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으로 찍히긴하네여ㅠ

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

2024. 01. 01. 16:42

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

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

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

2024. 01. 01. 16:47

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

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

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

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

2024. 01. 01. 16:53

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("아이디와 비밀번호가 일치하지 않습니다.");
    }
  };
제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 01. 17:09

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

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

2024. 01. 01. 17:25

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("아이디와 비밀번호가 일치하지 않습니다.");
    }
  };
제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 01. 18:46

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

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

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

2024. 01. 01. 18:47

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


사용하고있습니다.

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

2024. 01. 01. 19:02

 

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

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

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

2024. 01. 01. 19:14

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

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

작성한 질문수

전체 Q&A
질문하기