회원가입 후 자동 로그인

[sgoldenbird]

🎯 개선 목표 (What needs improvement?)

회원가입(signup) 및 로그인(signin) API 라우트에서 사용자 인증 성공 시 accessToken과 refreshToken을 일관된 방식으로 HTTP Only 쿠키로 설정하여, 사용자 경험을 향상하고 인증 플로우를 간소화하는 것을 목표로 합니다.

---

🧭 사용자 시나리오 (User scenario)

회원가입(api/auth/signup) 시나리오:

• 사용자가 회원가입 폼에 필요한 정보를 입력하고 제출합니다.
• 서버에서 회원가입이 성공적으로 처리된 후, 서버는 응답과 함께 accessToken과 refreshToken을 HTTP Only 쿠키로 설정하여 클라이언트에게 전송합니다.
• 클라이언트는 회원가입 완료 후 별도의 로그인 과정 없이 자동으로 로그인된 상태로 메인 페이지나 대시보드로 이동합니다.
• 개선점: 회원가입 후 즉시 서비스 이용이 가능하여 '자동 로그인'의 편리함을 제공하며, 사용자 전환 비용을 최소화합니다.

---

🔍 문제의 원인

기존에 signup 시 자동 로그인 처리가 미흡했을 경우 다음과 같은 문제가 발생할 수 있었습니다:

• 회원가입 후 사용자 불편: 회원가입 직후에도 사용자가 다시 로그인 페이지로 이동하여 이메일과 비밀번호를 입력해야 하는 번거로움이 발생합니다.

---

💡 개선 제안 (Suggested solution)

회원가입(src/app/api/auth/signup/route.ts) 및 로그인(src/app/api/auth/signin/route.ts) API 라우트 모두에서 인증 성공 시 서버 측에서 accessToken과 refreshToken을 HTTP Only, Secure 옵션이 적용된 쿠키로 설정합니다. 이를 위해 src/domain/Auth/utils/setAuthCookies.ts와 같은 공통 유틸리티 함수를 활용하여 쿠키 설정 로직을 중앙 집중화하고 일관성을 확보합니다.

---

🛠 구현 구조 요약 (How it was implemented)

쿠키 설정 유틸리티 (src/domain/Auth/utils/setAuthCookies.ts):
accessToken과 refreshToken을 받아 NextResponse 객체에 HTTP Only, Secure, Path, Max Age 등의 옵션을 적용하여 쿠키를 설정하는 함수를 정의합니다. 이 유틸리티는 각 인증 API 라우트에서 재사용됩니다.

// src/domain/Auth/utils/setAuthCookies.ts (예시)
import { NextResponse } from 'next/server';

export const setAuthCookies = (
  response: NextResponse,
  accessToken: string,
  refreshToken: string,
) => {
  // accessToken 유효 기간 (예: 1시간)
  response.cookies.set('accessToken', accessToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    path: '/',
    maxAge: 60 * 60, // 1시간
  });

  // refreshToken 유효 기간 (예: 7일)
  response.cookies.set('refreshToken', refreshToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    path: '/',
    maxAge: 7 * 24 * 60 * 60, // 7일
  });
};

회원가입 API 라우트 (src/app/api/auth/signup/route.ts):
회원가입 성공 후, 서버에서 발급받은 accessToken과 refreshToken을 setAuthCookies 유틸리티 함수를 통해 응답 객체에 쿠키로 설정합니다.

// src/app/api/auth/signup/route.ts (예시)
import { NextResponse } from 'next/server';
import { setAuthCookies } from '@/domain/Auth/utils/setAuthCookies'; // import 경로 확인
// ... 기타 임포트 및 로직

export async function POST(request: Request) {
  // ... 회원가입 로직 (데이터 검증, DB 저장 등)
  // 회원가입 성공 시
  const { accessToken, refreshToken } = { accessToken: 'new-access-token', refreshToken: 'new-refresh-token' }; // 실제 토큰 발급 로직

  const response = NextResponse.json({ message: '회원가입 성공', success: true }, { status: 200 });
  setAuthCookies(response, accessToken, refreshToken);
  return response;
}

---

✅ 개선 결과 및 성과 (Results)

• 원활한 온보딩 경험: 회원가입 후 즉시 서비스 이용이 가능하여 사용자 이탈률을 줄이고 초기 사용자 경험을 크게 향상시켰습니다.
• 인증 로직의 일관성 및 재사용성: setAuthCookies 유틸리티 함수를 통해 쿠키 설정 로직이 중앙 집중화되어 코드의 재사용성이 높아지고, 향후 유지보수가 용이해졌습니다.

---

🔗 참고자료 / 관련 이슈, PR

• src/app/api/auth/signup/route.ts
• src/app/api/auth/signin/route.ts
• src/domain/Auth/utils/setAuthCookies.ts
• src/middleware.ts (쿠키 기반 인증 상태 확인 및 갱신에 연관)
• src/shared/libs/apiClient.ts (쿠키를 통한 자동 인증 헤더 전송)