inflearn logo
강의

講義

知識共有

Next + React Query で SNS サービスを作成する

next-auth でログインする

server action 로그인 후 쿠키가 비어있어요

解決済みの質問

687

hyoloui

投稿した質問数 1

0

현재 java 로 서버 만들어둔게 있어서 next14 연습할 겸 백엔드는 기존 서버 유지한 상태에서 next project 진행중입니다.

문제사항은 제목과 같습니다
1. server action 로그인 후 쿠키 세팅 없음
2. 로그인 후 '/' 경로에서 어떠한 action
3. 세팅된 middleware 로 인해 '/login'으로 라우팅 처리


프론트 코드

server: LoginForm.ts
code.png- LoginForm 컴포넌트는 서버 컴포넌트인 '/login' 페이지에서 렌더링 됩니다.
- 당연히 signIn 함수는 '@/auth' 에서 가지고 왔습니다

import { signIn } from '@/auth';

 

auth.ts

code1.png- response는 임의로 설정할 수 없어, 토큰을 email과 image 에 넣어보았습니다

'/' server: page.tsx

server 콘솔에는 session 출력 되고 있는데,
if 문 만나면 바로 redirect 됩니다.

의심스러운 부분

첫 로그인페이지 렌더링 할 때 호출되는 network 탭입니다
session을 호출하는 곳은 middleware, dashboard (위 페이지) 딱 2곳입니다 그런데 session 호출이 많기도 하고 전부 응답이 null 입니다


middleware 에서도 session 출력 잘 되구요..

애플리케이션 -> 쿠키

이것 저것 시도해 보다가,
오늘 하루가 다가서 이렇게 질문 드립니다


 

환경

package.json


하드웨어:
  모델명: MacBook Pro

  모델 식별자: Mac14,9

  모델 번호: Z17G0005KKH/A

  칩: Apple M2 Pro

  총 코어 개수: 10(6 성능 및 4 효율)

  메모리: 32 GB

  시스템 펌웨어 버전: 10151.61.4

  OS 로더 버전: 10151.61.4

react next.js react-query next-auth msw

回答 3

1

hyoloui

원인 : AUTH_URL='https://~' (https 로 시작하는 도메인으로 요청)
해결 : cookies 옵션 설정image
참고 : https://next-auth.js.org/configuration/options#usesecurecookies

0

zerocho

이 문제는 ch4에서 해결합니다!

0

hyoloui

https://github.com/ZeroCho/next-app-router-z/blob/master/ch4/src/auth.ts#L52C9-L53C46

 

위 강의 소스코드와 같이 코드 작성하였으나 console에 set-cookie가 null이 나오고,
로그인 성공시에도 네트워크탭 응답헤더에는 있는것 같은데,
애플리케이션 탭에 쿠키가 하나도 없습니다

image

말씀하신대로 ch4 보고 해결 시도하였으나,
로그인 후 애플리케이션 탭에 쿠키가 안들어와서 진도를 못나가고 있습니다ㅠㅠ

0

zerocho

일단 쿠키가 있는지 여부는 강의 진도와 아무 관련이 없습니다. 저도 쿠키 없는 채로 그냥 쭉 했습니다.

쿠키 앞에 __Secure이 붙어있는데 이게 붙으면 안 됩니다. 뭔가 설정을 달리하신 게 있나요?

강의와 next-auth 버전이 다르긴 합니다.

1

zerocho

useSecureCookies 옵션 끄세요

0

hyoloui

따로 설정하지 않았습니다

image
이런 식으로 쿠키 옵션에서
custom 해서 secure를 변경해줬더니 secure 옵션 꺼지면서
이제 받아오네요..

image
강사님이 설정하신 .env 파일에서의
AUTH_URL 환경변수가 'http' 이고
제 AUTH_URL 환경변수는 'https' 인것의 차이 밖에 없는 것 같은데,

이건 next-auth 설정인듯 싶어요ㅠㅠ

0

zerocho

아.. auth url https면 배포모드로 설정되어서 secure 쿠키되네요.

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다.

로그인 후 쿠키가 비어있는 문제는 여러 가지 원인으로 발생할 수 있으며, 관련하여 더 자세한 내용을 찾고 계신 것 같습니다. 제로초님의 강의 중 쿠키 관련 문제에 대한 질문과 답변이 있으니 참고하시면 도움이 될 것 같습니다.

설명과 유사한 상황의 해결방안을 제공하고 있는 게시글 링크를 아래와 같이 안내드립니다.

위 링크들에서 유사한 문제 상황을 다루고 있으니, 해당 내용을 참고하여 문제 해결에 접근해 보시길 바랍니다.

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

0

74

2

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

0

113

2

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

0

98

1

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

0

109

2

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

0

140

2

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

0

130

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

169

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

184

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

108

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

102

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

131

2

next.js 에서 로그인에 관하여

0

138

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

97

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

227

2

fetch 캐싱과 revalidate 관련

0

84

2