인프런 커뮤니티 질문&답변

네 다른 분 케이스도 본 적이 거의 없고, 저 자체는 액세스토큰을 안 씁니다. 저는 쿠키/세션으로 로그인을 해서요.

전체적인 흐름은 문제가 없어 보이는데, 개별 과정에서 잘못되고 있는 것이 아닌지 궁금하네요.

반대로 리프레시토큰/액세스 토큰을 정상적으로 발급하고 있다면 정상적으로 발급하는 로그는 백엔드에 있지 않나요?

네 백엔드 로그에서는

POST /api/users/new-access-token 200 6.438 ms - 524
POST /api/users/new-access-token 200 6.438 ms - 524

이런식으로 잘 요청이 들어옵니다.

next도 말씀하신 대로 수정해보고 미들웨어 코드를 함수 분리 안하고 다 작성해보면

export async function middleware(request: NextRequest) {
  const { pathname, searchParams } = request.nextUrl;
  const { accessToken, refreshToken } = getTokenValues(request);
  let response = null;

  if (!accessToken && refreshToken) {
    const res = await getNewAccessToken(refreshToken);
    if (res && res.newAccessToken) {
      response = NextResponse.next();

      response.cookies.set('accessToken', res.newAccessToken, COOKIE_CONFIG.access_token);

      response.headers.set('X-NewAccessToken', res.newAccessToken);
    }
  }

  return response || NextResponse.next(); 

이런식으로 초기에 null 값을 줬다가 후에 액세스 토큰 값이 없으면 그때 next()를 호출하는 식으로 바꾸어보았습니다.

현재 이래도 작동은 하는 상황인데, 이런식의 구현을 말씀하신것이 맞으실까요 ?

아뇨 middleware의 구현은 크게 문제는 아닐 것 같습니다. 지금 제일 문제는 문제가 정확하게 뭔지를 모르는 건데요. 액세스 토큰이 재발급되고 있는게 아니라는 걸 어떻게 파악하시는 건가요?

액세스 토큰은 재발급해서 값은 제대로 가져오는 상태입니다.

미들웨어 단에서 콘솔로 확인해보고 백엔드 로그도 확인해보면 정상적으로 값은 보내줍니다.

  if (!accessToken && refreshToken) {
    const res = await getNewAccessToken(refreshToken);
    if (res && res.newAccessToken) {
      response = NextResponse.next();

      console.log(res.newAccessToken) // 값 제대로 나옴

      response.cookies.set('accessToken', res.newAccessToken, TOKEN_COOKIE_OPTION.access_token);

      response.headers.set('X-NewAccessToken', res.newAccessToken);
    }
  }

근데 이제 맨 처음 유저 로그인 후에, 즉 맨 처음 로그인때 리프레시토큰과 액세스 토큰을 제대로 받아오고 그 후에 액세스 토큰이 만료 된후에도 꾸준히 재발급이 됩니다.

하지만 리프레시 토큰과 액세스 토큰이 다 만료되어서 재로그인을 하면 저 콘솔 값은 제대로 나오지만 F12로 확인해보면 액세스 토큰이 쿠키에 제대로 심어지지 않고 있는 상황입니다.

https://stackoverflow.com/questions/78206726/next-14-how-to-set-cookie-in-middleware-and-get-it-in-root-layout

이 이슈는 보셨었나요? 넥스트 최신버전이신가요?

혼자서 이것저것 또 해보다가 아직도 안되어서 이렇게 글 남깁니다..

네 14.2 버전 사용중입니다.

해당 글은 미들웨어에서 쿠키를 set해주고 layout.tsx에서 헤더를 통해 쿠키 값을 가져온다는 내용 같은데..

저 같은 경우 아예 미들웨어 단에서 set.cookie가 안되는 문제 같아서요ㅠ

export async function middleware(request: NextRequest) {
  const { pathname, searchParams } = request.nextUrl;
  const { accessToken, refreshToken } = getTokenValues(request);
  let response = NextResponse.next();

  if (!accessToken && refreshToken) {
    const newAccessToken = await getNewAccessToken(refreshToken); // 콘솔 값 잘 찍힘
    setCookieOfToken(response, 'accessToken', newAccessToken);
  }

  return response;
}

export const config = {
  matcher: ['/', '/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

- setCookieOfToken.ts

const setCookieOfToken = (response: NextResponse, type: string, token: string) => {
  const cookieConfig =
    type === 'accessToken' ? TOKEN_COOKIE_OPTION.access_token : TOKEN_COOKIE_OPTION.refresh_token;

  response.cookies.set(type, token, cookieConfig);
};

영상을 보시면 임의로 액세스 토큰을 삭제하고 새로고침을 하면, 액세스 토큰은 재발급이 되었지만 로그인한 회원 정보는 풀려있습니다.

또 다시 새로고침을 해야지만 회원정보를 받아오고 있구요..

전체 코드 다시 첨부해봅니다.

네 에러 로그도 안남습니다.. 정상적으로 응답까지 받는 상황입니다.

리프레시토큰이 만료됐을 때는 사용자가 수동으로 프론트에서 다시 로그인하는 건가요?

네 맞습니다. 리프레시토큰까지 만료됐을때는 사용자가 수동으로 다시 로그인해주어야합니다.

이건 일단 정확하게

1. 리프레시토큰 만료 후, 재발급 이후부터 에러가 난다는 확증이 필요하고,

2. 리프레시토큰 재발급이 제대로 되는 건지,

3. 아니면 재발급 후 액세스토큰이 문제인건지

이런식으로 단계별로 좁혀가셔야할 것 같네요.

근데 궁금한게 NextResponse.next() 호출 후 cookie set해도 쿠키가 적용되나요?

https://nextjs.org/docs/app/api-reference/functions/next-response#next

저는 항상 next 안에서 쿠키 세팅을 했어서요.

https://nextjs.org/docs/app/building-your-application/routing/middleware#using-cookies

이 미들웨어에서 보면, 아예 NextReponse.next()를 reponse 변수에 담아주고 set을 해주고 있는데 차이점이 있을까요?