NextJS 14.0.2 Server Action 로그인 시 cookie가 저장되지 않는 문제

◾️ 문제상황

클라이언트: NextJS 14.0.2 서버: ExpressJS

express-session와 passport를 사용해서 서버의 세션로그인을 구현했으며, NextJS의 서버액션을 사용하여 클라이언트에서 로그인을 구현했다.

포스트맨에서 로그인 시 쿠키를 정상적으로 저장하는 반면, NextJS에서 로그인 시, session 쿠키가 브라우저에 저장되지 않는다.

◾️ 문제원인

로그인 시 NextJS의 서버액션(authenticate)을 사용하고 있는데, 때문에 Next(server)에만 쿠키가 저장되고 Next(client)에는 쿠키가 저장되지 않게 된다.

◾️ 해결방안

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { authConfig } from './auth.config';
import { cookies } from 'next/dist/client/components/headers';

export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      async authorize(credentials) {
        if (credentials) {
          const response = await fetch(`${API ... }/auth/login`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: credentials.username, password: credentials.password }),
          });
          const data = await response.json();
          // set Next cookie
          const cookieList = response.headers.getSetCookie().map((v) => v.slice(0, v.indexOf(' ') - 1).split('='));
          cookieList.forEach((v) => cookies().set(v[0], decodeURIComponent(v[1])));
          return data.data;
        }
        return null;
      },
    }),
  ],
});

cookies().set(v[0], decodeURIComponent(v[1])) 와 같이 Next의 cookies를 사용해서 Next(server)에서 Next(client)로 쿠키를 직접 저장해주도록 하였다.