클라이언트: 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)로 쿠키를 직접 저장해주도록 하였다.