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

안녕하세요 next-auth로 토큰 갱신 로직을 개발하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다.

현재 클라이언트에서 api 요청을 하면 middleware에서 const token = await auth(); 이런식으로 세션 정보를 가져와 accessToken을 헤더에 삽입하는 방식을 구현하였습니다.

  if (request.nextUrl.pathname.startsWith("/gateway")) {
    const session = await auth();

    const accessToken = session?.accessToken;
    const { device } = userAgent(request);
    const localeFromCookie = cookieStore.get("dp_lang")?.value as string;
    const defaultLocale = getLanguageCodeFromLocale(localeFromCookie);

    request.headers.set("Accept", "*/*");
    request.headers.set("Authorization", `Bearer ${accessToken}`);
    request.headers.set("Access-Control-Allow-Origin", "*");
    request.headers.set("deviceType", "1");
    request.headers.set("deviceId", getDeviceIdFromCookie(cookieStore));
    request.headers.set("osType", getOsTypeFromCookie(cookieStore));
    request.headers.set("User-Agent", device.model ?? "");
    request.headers.set("locale", localeFromCookie);
    request.headers.set("language", defaultLocale);

    const response = NextResponse.next({
      request: {
        headers: request.headers,
      },
    });

    return response;
  } 

따라서 미들웨어에서 세션에 접근하는 순간에 jwt콜백이 실행되어 jwt 토큰에 저장되어 있는 토큰 expire 시간을 비교하여 만료여부를 판단 한 뒤에 토큰 갱신이 되도록 구현을 하였습니다.

 async jwt({ token, account, user }) {
        // Initial sign in
        if (account && user) {
          return {
            accessToken: user.accessToken,
            expiresAt: new Date(
              Date.now() + (user?.expiresIn ?? 0)
            ).toISOString(),
            refreshToken: user.refreshToken,
            serviceAvailable: true,
          };
        }

        // Return previous token if the access token has not expired yet
        if (
          new Date() <
          new Date(new Date(token.expiresAt as string).getTime() - 5000)
        ) {
          console.log("@@@@@@valid");
          return token;
        } else {
          if (token.error === "RefreshTokenInvalid") {
            return token;
          }
          // Access token has expired, try tㄴo update it
          try {
            console.log("@@@@@@expired");
            const refreshedTokens = await authApi.refreshAuthToken({
              refreshToken: token.refreshToken as string,
              accessToken: token.accessToken as string,
            });
            console.log("==========token refreshed========");
            // reissue token
            return {
              ...token,
              accessToken: refreshedTokens.accessToken,
              expiresAt: new Date(
                Date.now() + (refreshedTokens.expiresIn ?? 18000)
              ).toISOString(),
              refreshToken: refreshedTokens.refreshToken ?? token.refreshToken,
              error: null,
            };
          } catch (error) {
            console.error("Token refresh failed", error);
            if (error.status === RestApiErrorType.invalidTokenException) {
              return {
                ...token,
                error: "RefreshTokenInvalid",
              };
            }
            return { ...token, error: "RefreshAccessTokenError" };
          }
        }
      },

기존에는 세션에 접근을 할때 next-auth의 jwt 콜백이 돌고 값이 리턴되면 쿠키의 session-token값에 암호화된 값들이 업데이트 되는 걸로 알고 있었는데 찾아보니 현재 세션에 접근하고 갱신하는 부분이 서버단에 있어서 쿠키가 업데이트 되지 않는다고 합니다.

따라서 현재 토큰이 만료된 후 한번에 3가지의 api 콜을 요청했을때 첫번째 api요청에서는 정상적으로 토큰 refresh가 요청이 되며 middleware에서 세션에 접근해 갱신된 토큰이 가져와져 요청이 성공되나 그 뒤 요청부터는 쿠키에 업데이트가 되지 않아서인지 세션에서 갱신 전 토큰이 가져와지는 현상이 발생하고 있습니다.

클라이언트에서 세션 업데이트 후 세션에 접근을 해야 쿠키값이 갱신이 된다고 하는데 다른 방법이 있는지 문의드립니다.