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

네 위에 이미지 올려드린 것 처럼

응답헤더에 Set-Cookie 넣어놓고 있습니다!

아뇨 여기 말고 signin 함수 호출할 때의 네트워크탭을 봐야합니다. 거기가 프론트 next-auth.session-token 쿠키 넣는 곳입니다. 그게 없어서 로그인 유지가 안 되는 겁니다.

http.post('/api/login' 안에서는 console.log찍어서 로그인 시 출력되는지 확인해보시고, authorize 함수에서는 process.env.AUTH_URL 콘솔로그 찍어보세요.

/api/login 안에 console.log 찍을시에 정상출력되구요
authorize 함수에서 process url 경로 정상적으로 나옵니다

방금 이것저것 수정하다가 해결한 것 같아요

근데 해결하게 된 원인이 user 데이터에 nickname을 한글로 할 경우 next-auth.session-token 쿠키가 안쌓입니다..

하지만 영어로 할 경우는 쌓이네요 ..

답변 감사합니다 npm run mock 되어 있는 상태입니다

혹시 User[0] 데이터랑 signIn 호출하는 곳 import 는 뭐로 되어있나요?
session null 로 되는거 얼마전에 많이 경험했었는데 ,, 기억이 잘 안나네요

AUTH_URL이랑 auth.ts 부분도 전체 코드 올려주시면 좋을 것 같아요

답변 감사합니다 대원님

auth.ts 파일 전체 코드입니다

//==============================

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import KakaoProvider from 'next-auth/providers/kakao';

export const {
  handlers: { GET, POST } /** API 라우트 */,
  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 {
          id: user.id,
          name: user.nickname,
          image: user.image,
          ...user,
        };
      },
    }),
    // KakaoProvider({...})
  ],
});

//==============================

handlers.ts User[0] 넣는 곳 입니다

import { http, HttpResponse } from 'msw';
import ECOM from '/public/images/ecom.png';

const User = [
  {
    userId: 1,
    nickname: 'eden',
    id: 'eden',
    image: '/public/images/ecom.png',
  },
];

export const handlers = [
  http.post('/api/login', () => {
    return HttpResponse.json(User[0], {
      headers: {
        'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/',
      },
    });
  }),
  http.post('/api/logout', () => {
    return new HttpResponse(null, {
      headers: {
        'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0',
      },
    });
  }),
  http.post('/api/users', async ({ request }) => {
    console.log('회원가입');
    // return HttpResponse.text(JSON.stringify('user_exists'), {
    //   status: 403,
    // })
    return HttpResponse.text(JSON.stringify('ok'), {
      headers: {
        'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/;Max-Age=0',
      },
    });
  }),
];

signIn 호출하는 곳은 글 내용에 코드 캡쳐있습니다

클라이언트 컴포넌트라 next-auth/react 로 import 했습니다

authReponse 콘솔찍으면 { userId: 1, nickname: 'eden', id: 'eden', image: '/public/images/ecom.png', },

잘 들어가 있나요? signIn 호출하는 곳도 보여주세요! 글 내용에 없습니당

signIn 호출하는 LoginModal.tsx 파일 코드입니다

'use client';

import style from '@/app/(beforeLogin)/_component/login.module.css';
import { ChangeEventHandler, FormEventHandler, useState } from 'react';
import { useRouter } from 'next/navigation';
import { signIn } from 'next-auth/react';

export default function LoginModal() {
  const [id, setId] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');
  const router = useRouter();

  const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault();
    setMessage('');
    try {
      await signIn('credentials', {
        username: id,
        password,
        redirect: false,
      });
      router.replace('/home');
    } catch (err) {
      setMessage('아이디와 비밀번호가 일치하지 않습니다.');
    }
  };
  const onClickClose = () => {
    router.back();
  };

  const onChangeId: ChangeEventHandler<HTMLInputElement> = (e) => {
    setId(e.target.value);
  };

  const onChangePassword: ChangeEventHandler<HTMLInputElement> = (e) => {
    setPassword(e.target.value);
  };

  return (
    <div className={style.modalBackground}>
      <div className={style.modal}>
        <div className={style.modalHeader}>
          <button className={style.closeButton} onClick={onClickClose}>
            <svg
              width={24}
              viewBox="0 0 24 24"
              aria-hidden="true"
              className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03"
            >
              <g>
                <path d="M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z"></path>
              </g>
            </svg>
          </button>
          <div>로그인하세요.</div>
        </div>
        <form onSubmit={onSubmit}>
          <div className={style.modalBody}>
            <div className={style.inputDiv}>
              <label className={style.inputLabel} htmlFor="id">
                아이디
              </label>
              <input id="id" className={style.input} value={id} onChange={onChangeId} type="text" placeholder="" />
            </div>
            <div className={style.inputDiv}>
              <label className={style.inputLabel} htmlFor="password">
                비밀번호
              </label>
              <input
                id="password"
                className={style.input}
                value={password}
                onChange={onChangePassword}
                type="password"
                placeholder=""
              />
            </div>
          </div>
          <div className={style.message}>{message}</div>
          <div className={style.modalFooter}>
            <button className={style.actionButton} disabled={!id && !password}>
              로그인하기
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

authReponse 콘솔 찍으면 데이터가 user의 데이터가 안담겨있습니다,, ㅎㅎ

대원님 답변 감사했습니다

해결했어요

User 데이터에 한글을 넣어 handler.ts에 있는 HttpResponse 에 들어가면 원인은 모르지만 로그인이 정상적으로 쿠키가 생성이 되지 않더라구요...
위에 제로초님에게도 답변은 따로 드렸으나 찾아봐도 정확한 원인은 모르겠네요,, 감사했습니다