Next.js middleware를 활용한 jwt 구현

 

사이드 프로젝트에서 로그인 처리를 jwt를 활용하여 진행하였다.

 

Next.js에서 middleware를 제공하고있기에 매 fetch 마다 검증하고 갱신하는게 아닌

middleware matcher에 해당되는 부분에만 jwt를 걸기로 했다.

 

 

---

 

내가 작성한 jwt의 플로우는 아래와 같다.

 

1. 로그인 요청시 access,refresh 토큰을 저장한다. (당연히 refresh는 httponly)

 

2. middleware에서 matcher에 해당되는 페이지가 있다면 refresh 토큰이 있는지 확인 

 

3. refresh가 없다면 로그인 페이지 / 있다면 refresh 토큰 검증 로직 진행

 

4. 검증 결과가 200이라면 아래의 5번 로직을 따름 / 아닐 경우는 만료이거나 잘못되었을 경우이기에 login 페이지로 이동

 

5. access 토큰이 있다면 기존페이지로 / 없다면 access 토큰 업데이트 하는 로직 진행

 

 

코드로 구현한다면 아래와 같다.

 

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

import getAccessTokenUpdate from "./components/getAccessTokenUpdate";

export async function middleware(request: NextRequest) {
  let accessCookie = request.cookies.get("access_token")?.value;
  let refreshCookie = request.cookies.get("refresh_token")?.value;

  if (!refreshCookie) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  const verifyResult = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/login/verify/`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ token: refreshCookie }),
    }
  );
  if (verifyResult.status === 200) {
    if (accessCookie) {
      return NextResponse.next();
    }
    const getAccessTokenResult = await getAccessTokenUpdate();
    const response = NextResponse.next();
    response.cookies.set("access_token", getAccessTokenResult.access, {
      maxAge: 1800,
    });
    return response;
  } else {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}
export const config = {
  matcher: ["/cart"],
};

 

 

 로그아웃시에 refresh 토큰을 삭제하면 위와 같이 matcher에 해당하는 부분 접속시 /login으로의 이동!

 

 

배운점.

 

프론트와 서버 두개의 코드를 작성해보았는데

 

jwt access , refresh 토큰에 대해 많이 알게되었다.

 

각각 토큰의 유효기간을 잘 설정해야하며 httponly를 통한 xss 공격에 대한 방지도 중요하다.!

 

Next.js middleware를 통한 유저의 정보를 다루는곳에서만 fetch를 진행한다면

fetch마다 인증 프로세스를 거치고 콜백으로 받아서 처리하거나

access token 만료시간 이전에 setTimeout을 안써도 되지않을까??

 

 

ps.
기존의 middleware없이 사용하던 부분에서 middleware를 적용시킨 코드다보니 잘못된 방법을 사용했을수도 있습니다...

잘못된 부분이 있다면 언제든 태클 걸어주시면 감사하겠습니다.!!!!