[Middleware] Next.js를 활용한 인증 로직 구현하기

Next.js에서 로그인 여부에 따라 특정 URL로 리디렉션을 처리하는 방법을 공유합니다. 이번 포스팅에서는 Middleware를 사용해 로그인 여부를 확인하고, HTTP-only 쿠키에서 JWT를 추출해 유저의 접근 권한을 관리하는 방법을 설명합니다.

 

■ 요구사항

 

• 로그인한 유저는 /, /login, /signup 경로로 접근 시 /share로 리디렉션합니다.
• 로그인하지 않은 유저는 /, /login, /signup 경로 외의 다른 경로에 접근하면 /로 리디렉션됩니다.
• JWT는 HTTP-only 쿠키에 저장되어 있으며, 브라우저는 이 쿠키의 내용을 직접 읽을 수 없지만, Next.js는 서버 측에서 동작하므로 이를 추출하여 사용할 수 있습니다.

 

■ 코드 구현

아래는 middleware.ts 파일에 작성한 코드입니다. 이 파일은 Next.js 프로젝트의 app/ 디렉토리 바로 아래에 위치해야 합니다.(공식문서에 아래와 같이 기술되어 있음. 공식문서 바로가기)

자세한 내용: https://nextjs.org/docs/app/api-reference/file-conventions/middleware

 

## middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('jwt-token'); // HttpOnly 쿠키에서 JWT 가져오기
  const excludedPaths = ['/', '/login', '/signup']; // 제외할 경로
  // 제외할 경로는 리디렉션을 건너뜀
  if (excludedPaths.includes(req.nextUrl.pathname)) {
    return token
      ? NextResponse.redirect(new URL('/share', req.url)) // 쿠키가 있으면 '/share'로 리디렉션
      : NextResponse.next(); // 쿠키가 없으면 진행
  }
  
  return token
    ? NextResponse.next() // 쿠키가 있으면 진행
    : NextResponse.redirect(new URL('/', req.url)); // 쿠키가 없으면 '/'로 리디렉션
}

export const config = {
  matcher: ['/((?!_next|favicon.ico).*)'], // 모든 경로를 포함하지만, Next.js 내부 경로는 제외
};

 

■ 주요 구현 내용

1. HttpOnly 쿠키에서 JWT 추출

req.cookies.get('jwt-token')를 사용하여 HTTP-only 쿠키에서 JWT를 추출합니다.
HTTP-only 쿠키는 보안상 브라우저에서 JavaScript로 접근할 수 없지만, Next.js의 middleware는 서버 측에서 실행되기 때문에 쿠키를 안전하게 읽을 수 있습니다.

2. 리디렉션 조건 설정

• excludedPaths: 리디렉션에서 제외할 경로 목록입니다. 이 경우 /, /login, /signup이 포함됩니다.
• 로그인 여부(token 존재 여부)에 따라 조건을 처리합니다.
  • 로그인한 유저는 excludedPaths에 포함된 경로로 접근할 경우 /share로 리디렉션됩니다.
  • 비로그인 유저는 excludedPaths에 포함되지 않은 경로로 접근할 경우 /로 리디렉션됩니다.

3. config.matcher

matcher 설정을 사용하여 Middleware가 실행될 경로를 지정합니다.

• matcher: ['/((?!_next|favicon.ico).*)']는 _next, favicon.ico와 같은 내부 경로를 제외한 모든 사용자 요청 경로에 대해 Middleware가 동작하도록 설정합니다.