[CallbackRouter Error] 회원가입->DB입력 성공... - 인프런

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

회원가입 실제로 하기

[CallbackRouter Error] 회원가입->DB입력 성공-> 자동로그인 안됨

작성

966

회원가입 성공 status: 201전달받고,
회원가입 성공하면 전달받는 리턴객체도 잘 전달받았는데,
signIn이 동작하지 않는거 같습니다.

PostgreSQL 디비들어가서 보면 User테이블에 신규가입된 정보잘 입력되어있습니다.

packge.json

 "dependencies": {
    "@auth/core": "^0.18.0",
    "@faker-js/faker": "^8.3.1",
    "@tanstack/react-query": "^5.17.10",
    "@tanstack/react-query-devtools": "^5.17.10",
    "classnames": "^2.4.0",
    "dayjs": "^1.11.10",
    "next": "^14.0.4",
    "next-auth": "^5.0.0-beta.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intersection-observer": "^9.5.3"
  },
  "devDependencies": {
    "@mswjs/http-middleware": "^0.9.2",
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "cors": "^2.8.5",
    "eslint": "^8",
    "eslint-config-next": "^14.0.4",
    "express": "^4.18.2",
    "msw": "^2.0.12",
    "typescript": "^5"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

[auth][error] CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror

[auth][cause]: TypeError: fetch failed

at node:internal/deps/undici/undici:12344:11

[auth][details]: {

"name": "HeadersTimeoutError",

"code": "UND_ERR_HEADERS_TIMEOUT",

"message": "Headers Timeout Error",

"provider": "credentials"

}

CallbackRouteError: Read more at https://errors.authjs.dev#callbackrouteerror

at Module.callback (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/actions/callback/index.js:307:23)

at async AuthInternal (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/index.js:65:24)

at async Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:123:29)

at async signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:55:17)

at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:9)

at async /Users/jungjuyoung/dev/x-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406

at async t0 (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773)

at async rh (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636)

at async doRender (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1391:30)

at async cacheEntry.responseCache.get.routeKind (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1552:28)

at async DevServer.renderToResponseWithComponentsImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1460:28)

at async DevServer.renderPageComponent (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1843:24)

at async DevServer.renderToResponseImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:1881:32)

at async DevServer.pipeImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:909:25)

at async NextNodeServer.handleCatchallRenderRequest (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/next-server.js:266:17)

at async DevServer.handleRequestImpl (/Users/jungjuyoung/dev/x-clone/node_modules/next/dist/server/base-server.js:805:17) {

type: 'CallbackRouteError',

kind: 'error',

[cause]: {

err: TypeError: fetch failed

at node:internal/deps/undici/undici:12344:11 {

cause: [HeadersTimeoutError]

name: 'HeadersTimeoutError',

code: 'UND_ERR_HEADERS_TIMEOUT',

message: 'Headers Timeout Error',

provider: 'credentials'

}

react next.js react-query next-auth msw

답변 4

제로초(조현영)

지식공유자

깃헙 ch4 폴더로 했을 때 잘 되는 것 확인했습니다. git pull 받아서 최신으로 해서(npm i 필수) 실행해보세요.

@auth/core@0.26에는 다른 문제가 있어서(https://www.inflearn.com/questions/1169062/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C-500%EC%97%90%EB%9F%AC-%EB%B0%9C%EC%83%9D)

npm i @auth/core@0.19 도 한 번 입력해주세요.

백엔드 서버인 nest-prisma도 git pull 받아서 한 번 해보세요.

라푼젤

질문자

auth.ts파일

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,
          }),
        })
console.log('[auth] CredentialsProvider authResponse: ',authResponse)
        if (!authResponse.ok) {
          return null
        }

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

제로초(조현영)

지식공유자

여기는 콘솔 안 찍히나요?

라푼젤

질문자

auth.ts에서 찍은 콘솔은 안찍혔어요
아무래도 이부분에서 실행이 안되는거 아닌가 싶어요.
authorize함수안에 credentials까지는 찍히는데 authResponse 는 안찍혀요. 혹시나 하고 process.env.AUTH_URL찍어보니까 localhost:9090까지 찍히고
비동기로 받아오는 authResponse부분은 처리가 안되지 싶어요... authResponse가 안찍혀요

제로초(조현영)

지식공유자

일단 fetch 위에 콘솔 넣어서 authorize 함수가 실행되는지를 보고, 이게 실행됐다면 백엔드 터미널에 에러가 없는지 봐야할 것 같습니다.

AUTH_URL에 http:// 는 붙어있나요?

오늘 갑자기 next-auth 질문이 많이 올라오는 걸로 봐서는 버그가 생긴게 아닌가 싶기도 하네요.

라푼젤

질문자

네, auth쪽 authorize함수 안에서 credentilas객체까지 잘 찍히고, http://localhost:9090까지도 잘 찍히는데 fetch부분 앞에 await에서 기다리고 있는거같은... 느낌적인 느낌... 그 아래 콘솔은 안찍히고 await fetch부분 위에서 로그찍으면 아래처럼 나옵니다.

[auth] authorize(credentioals: {

username: 'tete',

password: 'ASF',

callbackUrl: 'http://localhost:3000/i/flow/signup'

} process.env.AUTH_URL: http://localhost:9090

라푼젤

질문자

signup파일

"use server";

import { redirect } from "next/navigation";
import { signIn } from "@/auth";

export default async function onSubmit(prevState: any, formData: FormData) {
  if (!formData.get('id') || !(formData.get('id') as string)?.trim()) {
    return { message: 'no_id' };
  }
  if (!formData.get('name') || !(formData.get('name') as string)?.trim()) {
    return { message: 'no_name' };
  }
  if (!formData.get('password') || !(formData.get('password') as string)?.trim()) {
    return { message: 'no_password' };
  }
  if (!formData.get('image')) {
    return { message: 'no_image' };
  }
  formData.set('nickname',formData.get('name') as string);
  
  let shouldRedirect = false;
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, {
      method: 'post',
      body: formData,
      credentials: 'include',
    })
    console.log(response.status);
    if (response.status === 403) {
      return { message: 'user_exists' };
    }
    console.log('response: ', await response.json())
    shouldRedirect = true;
    await signIn("credentials", {
      username: formData.get('id'),
      password: formData.get('password'),
      redirect: false,
    })
    console.log('signIn shouldRedirect: ',shouldRedirect)
  } catch (err) {
    console.error(err);
    return;
  }

  if (shouldRedirect) {
    redirect('/home'); // try/catch문 안에서 X
  }
}

제로초(조현영)

지식공유자

여기서 콘솔이 어디까지 찍히나요?

라푼젤

질문자

signup에서는
status 201
회원가입유저 객체까지 찍혀요

제로초(조현영)

지식공유자

처음보는 에러인데 코드 한 번 보여주세요. 회원가입 쪽이랑 auth.ts요

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

[CallbackRouter Error] 회원가입->DB입력 성공-> 자동로그인 안됨