Next.js 15와 Spring 협업 시, 소셜 로그인(카카오 로그인)은 Route Handler를 꼭 써야 할까?

김현준·2025년 4월 5일
0

넥스트JS 이모저모

목록 보기
6/23

Next.js 15에서 Spring 백엔드와 협업하면서 카카오 로그인 같은 소셜 로그인을 구현할 때,
Route Handler는 필수는 아니지만, 사용하는 상황이 분명히 존재한다.

소셜 로그인 구조는 보통 두 가지로 나뉜다

1. 백엔드(Spring)가 모든 인증을 처리하는 구조

  • 사용자가 로그인 버튼 클릭 → 프론트에서 Spring 백엔드의 로그인 URL로 리다이렉트
  • 백엔드가 카카오 인증 → JWT 발급 → 클라이언트로 리다이렉트하면서 토큰 전달

특징

  • 프론트에서는 복잡한 인증 처리 X
  • Next.js에서 Route Handler를 사용할 필요 없음
 [사용자] → [Next.js] → [Spring: 카카오 로그인 처리] → [Next.js로 JWT 전달]

2. 프론트(Next.js)가 인가 코드 또는 액세스 토큰을 처리하는 구조

  • 카카오 로그인 후, 인가 코드가 프론트에 전달됨
  • 프론트가 Route Handler를 통해 이 코드를 Spring 백엔드에 전달
  • Spring이 토큰 발급 후 응답 → 프론트에서 쿠키 저장 등 처리

특징

  • 프론트에서 인가 코드나 인증 상태를 처리해야 함
  • Next.js에서 Route Handler 사용 권장
[사용자] → [카카오 로그인] → [Next.js (인가 코드 처리)] → [Spring: 토큰 발급] → [Next.js: 쿠키 저장 등]

Route Handler 사용하는 예시

app/api/auth/kakao/route.ts

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const code = searchParams.get("code");

  const res = await fetch(`${process.env.BACKEND_URL}/auth/kakao/callback?code=${code}`);
  const data = await res.json();

  return new Response(null, {
    status: 302,
    headers: {
      Location: "/",
      "Set-Cookie": `accessToken=${data.accessToken}; Path=/; HttpOnly;`,
    },
  });
}

요약

  • 백엔드(Spring)가 로그인 전부 처리
    필요 없음, 프론트는 리다이렉트만

  • 프론트가 인가 코드 또는 액세스 토큰을 다룸
    필요함, 쿠키 저장 등 프론트에서 처리

profile
기록하자

0개의 댓글