-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
[CallbackRouter Error] 회원가입->DB입력 성공-> 자동로그인 안됨
24.02.06 18:51 작성 조회수 400
0
회원가입 성공 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'
}
}
답변을 작성해보세요.
0
조현영
지식공유자2024.02.07
깃헙 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 받아서 한 번 해보세요.
0
라푼젤
질문자2024.02.06
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,
}
},
}),
]
});라푼젤
질문자2024.02.06
auth.ts에서 찍은 콘솔은 안찍혔어요
아무래도 이부분에서 실행이 안되는거 아닌가 싶어요.
authorize함수안에 credentials까지는 찍히는데 authResponse 는 안찍혀요. 혹시나 하고 process.env.AUTH_URL찍어보니까 localhost:9090까지 찍히고
비동기로 받아오는 authResponse부분은 처리가 안되지 싶어요... authResponse가 안찍혀요
조현영
지식공유자2024.02.06
일단 fetch 위에 콘솔 넣어서 authorize 함수가 실행되는지를 보고, 이게 실행됐다면 백엔드 터미널에 에러가 없는지 봐야할 것 같습니다.
AUTH_URL에 http:// 는 붙어있나요?
오늘 갑자기 next-auth 질문이 많이 올라오는 걸로 봐서는 버그가 생긴게 아닌가 싶기도 하네요.
라푼젤
질문자2024.02.06
네, 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
0
라푼젤
질문자2024.02.06
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
}
}0
답변 4