http only 쿠키 관리를 위한 api routes

[KingNono1030]

이전 프로젝트에서의 코드

1. app/api/auth/signIn.ts

import { handleAuth } from '@/pages/api/auth/handleAuth';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function signInHandler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  return handleAuth(req, res, 'auth/signIn', '로그인에 성공했습니다.');
}

2. app/api/auth/handleAuth.ts

import instance from '@/api/instance/axios';
import { serialize } from 'cookie';
import type { NextApiRequest, NextApiResponse } from 'next';

export async function handleAuth(
  req: NextApiRequest,
  res: NextApiResponse,
  endpoint: string,
  successMessage: string
) {
  if (req.method === 'POST') {
    const data = req.body;

    try {
      const response = await instance.post(endpoint, data);

      const { user, accessToken, refreshToken } = response.data;
      res.setHeader('Set-Cookie', [
        serialize('accessToken', accessToken, {
          httpOnly: true,
          secure: process.env.NODE_ENV !== 'development',
          maxAge: 60 * 30,
          sameSite: 'strict',
          path: '/',
        }),
        serialize('refreshToken', refreshToken, {
          httpOnly: true,
          secure: process.env.NODE_ENV !== 'development',
          maxAge: 60 * 60 * 24 * 7,
          sameSite: 'strict',
          path: '/',
        }),
      ]);
      res.status(200).json({ message: successMessage, user });
    } catch (error: any) {
      const errorStatus = error.response?.status || 500;
      res.status(errorStatus).json(error.response?.data);
    }
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

재사용을 위해 파일을 두 개로 나누었지만, 핵심은 이거입니다.

• 클라이언트에서의 요청 -> 넥스트 api routes -> 백엔드 api
• 요청을 가로채서 중간에 헤더에서의 쿠키 설정을 제어합니다.

3. lib/api/auth.ts (실제 사용)

const signinUser = async (data: SignInRequestBody) => {
  const response = await axios.post('/api/auth/signIn', data, {
    headers: { 'Content-Type': 'application/json' },
  });
  return response.data;
};

• 요청을 base url + 엔드포인트가 아닌, 우리의 프로젝트에서 생성한 api routes 를 주소로 보냅니다.

우리 프로젝트에서의 활용

1. api routes (app/api/auth/signIn)
   
2. 실제 사용 예시
   

참고 자료

• https://www.youtube.com/watch?v=R-IAWcTpNO4
• https://handhand.tistory.com/280#%F0%9F%93%8C-api-routes-%EC%9D%98-%EC%A0%81%EC%9A%A9-%EC%82%AC%EB%A1%80
• https://velog.io/@eeeyooon/NextJS-v14-NextJS-API-Routes%EB%9E%80
• https://surviveasdev.tistory.com/entry/Next-js%EB%A1%9C-API-%EB%A7%8C%EB%93%A4%EC%96%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0API-routes