inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

로그아웃 & 로그인 여부에 따라 화면 다르게 하기

회원가입이 되지 않습니다.

721

비가싫어요

작성한 질문수 87

0

안녕하세요. 회원가입을 하려고 할 때 이상한 점이 몇 가지 있어 질문을 남겨봅니다.

 

삽질을 하다가 다른 분의 질문을 보고 npm i next-auth@5.0.0-beta.3 이건 적용을 해본 상태입니다.

 

  1. [auth][error] UnknownAction: Cannot parse action at /api/auth/session

localhost:3000으로 접속하고 나면 잠시 뒤에 콘솔에 이런 에러가 뜹니다.

 

  1. 회원가입이 되지 않는 문제

아이디, 닉네임, 비밀번호, 이미지를 넣고 회원가입을 하면 [auth][error] UnknownAction: Cannot parse action at //callback/credentials .Read more at https://errors.authjs.dev#unknownaction

at parseActionAndProviderId (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:87:27)

at toInternalRequest (webpack-internal:///(action-browser)/./node_modules/@auth/core/lib/utils/web.js:32:40)

at Auth (webpack-internal:///(action-browser)/./node_modules/@auth/core/index.js:82:103)

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

at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/index.js:82:75)

at $$ACTION_0 (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:53:60)

at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406

at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773)

at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636)

at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30)

at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28)

at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28)

at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24)

at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32)

at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25)

at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17)

at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17)

TypeError: Invalid URL

at new URL (node:internal/url:775:36)

at signIn (webpack-internal:///(action-browser)/./node_modules/next-auth/lib/actions.js:61:19)

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

at async /Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:406

at async t0 (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:5773)

at async rh (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:23636)

at async doRender (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1391:30)

at async cacheEntry.responseCache.get.routeKind (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1552:28)

at async DevServer.renderToResponseWithComponentsImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1460:28)

at async DevServer.renderPageComponent (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1843:24)

at async DevServer.renderToResponseImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:1881:32)

at async DevServer.pipeImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:909:25)

at async NextNodeServer.handleCatchallRenderRequest (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/next-server.js:266:17)

at async DevServer.handleRequestImpl (/Users/moonhyunjun/Desktop/study/frontend/z.com/node_modules/next/dist/server/base-server.js:805:17) {

code: 'ERR_INVALID_URL',

input: 'undefined'

}

이런 에러가 뜨며 회원가입이 되지 않습니다.

 

그런데 npm i next-auth@5.0.0-beta.3 이걸 적용하기 전에는 1번에서 언급한 에러는 떠 있어도 회원가입은 정상적으로 됐었는데 beta.3 버전을 설치한 이후에는 회원가입이 아예 안 되네요.

 

  1. 회원가입 후 로그아웃 버튼이 보이지 않는 문제

이건 회원가입이 정상적으로 됐을 때 궁금했던 부분입니다.회원가입이 되면 /home으로 리다이렉트가 됐었는데 그런데 전 로그아웃 버튼이 보이지가 않더라구요.

useSession() 으로 데이터를 받아오지 못 해 null 을 리턴해서 그랬던 것이 맞을까요?

react next.js react-query next-auth msw

답변 2

0

제로초(조현영)

npm i @auth/core@0.27 next-auth@5.0.0-beta.11 msw@2.1
이렇게 설치하고 .env에서 AUTH_URL을 지웁니다. 그리고 auth.ts에서 NEXT_PUBLIC_BASE_URL을 대신 씁니다. .env에 AUTH_URL을 쓰지 않는 게 핵심입니다.

const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, {

아직 msw@2.2의 버그는 해결하지 못했습니다.
https://github.com/mswjs/msw/issues/1658#issuecomment-1953599080
이런
식으로 버그 제기를 하고는 있으나 언제 고쳐질 지는 모르겠습니다. 해결되는대로 다시 공유드리겠습니다.

0

제로초(조현영)

@auth/core도 0.18 버전으로 내려보세요. 현재 버그가 있습니다.

0

비가싫어요

@auth/core 0.18 버전으로 낮추니 이상한 에러들 사라지고 정상적으로 회원가입도 되고, /home으로 리다이렉트도 됩니다!

한 가지 더 궁금한 것은 제가 가입한 아이디, 비밀번호, 사진이 아니라 제로초님 이름, 이미지가 뜨는 것은 mocking 하는 handler에서 /api/login 에 대해서 미리 그렇게 해놔서 그런 것이 맞을까요?

1

제로초(조현영)

네 이건 모킹이라서 나중에 실제 서버 사용할 때 실제 데이토로 바뀝니다.

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

0

76

2

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

0

113

2

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

0

98

1

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

0

111

2

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

0

141

2

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

0

133

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

110

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

85

2