Struggling with refresh token strategy in middleware for server components

[arsicdejan]

Hi everyone,

I've spent many days trying to implement a proper token refresh mechanism in Next.js 14 for an application that heavily uses Server Components fetching data during the page render.
Despite trying multiple strategies, I keep facing serious race conditions that invalidate the whole authentication flow and result in users being redirected to login even when their session should be extendable.

---

Problem Summary

• I have protected routes where access tokens might expire.
• My plan was to detect if the token is about to expire in middleware, and if so, redirect the user to a custom /api/refresh endpoint.
• The refresh endpoint would then request a new access token + refresh token from the backend, set new cookies, and redirect the user back.
• However, because middleware runs in parallel for every server component that initiates a request, if the token is about to expire, multiple parallel refresh requests happen at the same time.
• This leads to only one refresh succeeding (the first one), while the others are based on old cookies that are already invalidated by the first refresh.
• Result: most of the components get 401s and the user is forcefully redirected to login.

---

Detailed Flow

1. Middleware runs.
2. Middleware sees that the access token is about to expire.
3. Middleware redirects to /api/refresh.
4. Multiple server components trigger the middleware in parallel ➔ multiple /api/refresh calls at once.
5. First refresh call succeeds, rotates cookies.
6. All other refresh calls use old cookies ➔ fail ➔ force logout.

---

Question

Is there any Next.js 14+ recommended strategy to handle token refresh?

• How can we make sure that only one refresh happens and the others wait or reuse the new token?
• Or should token refresh not be handled in middleware at all and if so, where would be the correct place in a server-components-heavy app?

---

Relevant Code

Middleware (middleware.ts)

import { jwtDecode } from "jwt-decode";
import createIntlMiddleware from "next-intl/middleware";
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";

const TOKEN_COOKIE = "token";

export default async function middleware(request: NextRequest, event: NextFetchEvent) {
  const requestHeaders = new Headers(request.headers);

  const token = request.cookies.get(TOKEN_COOKIE)?.value;

 if (token) {
    try {
      const decoded: { exp: number } = jwtDecode(token);
      const isExpiringSoon = decoded.exp - Math.floor(Date.now() / 1000) < 60;

      if (isExpiringSoon) {
        const redirectUrl = new URL("/api/auth/refresh", request.url);
        redirectUrl.searchParams.set("returnTo", request.nextUrl.pathname);

        return NextResponse.redirect(redirectUrl);
      }
    } catch (e) {
      console.error("Error decoding token", e);
    }
  }

  const handleI18nRouting = createIntlMiddleware({
    locales: ["en", "dk"],
    defaultLocale: "dk",
    localePrefix: "as-needed",
  });

  const response = handleI18nRouting(request);

  return response;
}

export const config = {
  matcher: ["/((?!api|_next|.*\\..*).*)"],
};

Refresh API Route (/api/auth/refresh/route.ts)

import { cookies } from "next/headers";
import { NextRequest, NextResponse } from "next/server";

const ACCESS_TOKEN_COOKIE = "token";
const REFRESH_TOKEN_COOKIE = "refresh_token";

export async function GET(req: NextRequest) {
  const cookieStore = cookies();
  const refreshToken = cookieStore.get(REFRESH_TOKEN_COOKIE);
  const accessToken = cookieStore.get(ACCESS_TOKEN_COOKIE);

  const returnTo = req.nextUrl.searchParams.get("returnTo") || "/";

  if (!refreshToken || !accessToken) {
    const res = NextResponse.redirect(new URL("/login", req.url));
    res.cookies.delete(ACCESS_TOKEN_COOKIE);
    res.cookies.delete(REFRESH_TOKEN_COOKIE);
    return res;
  }

  const backendResponse = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/auth/refresh`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_API_AUTH_KEY}`,
      Userauthorization: `Bearer ${accessToken.value}`,
      Cookie: `${REFRESH_TOKEN_COOKIE}=${refreshToken.value}`,
    },
    cache: "no-store",
  });

  if (!backendResponse.ok) {
    const res = NextResponse.redirect(new URL("/login", req.url));
    res.cookies.delete(ACCESS_TOKEN_COOKIE);
    res.cookies.delete(REFRESH_TOKEN_COOKIE);
    return res;
  }

  const body = await backendResponse.json();
  const res = NextResponse.redirect(new URL(returnTo, req.url));

  res.cookies.set(ACCESS_TOKEN_COOKIE, body.token, {
    secure: true,
    httpOnly: true,
    sameSite: "strict",
    path: "/",
  });

  const setCookieHeader = backendResponse.headers.get("set-cookie");
  const newRefresh = extractRefreshCookie(setCookieHeader);

  if (newRefresh) {
    res.cookies.set(REFRESH_TOKEN_COOKIE, newRefresh.value, {
      httpOnly: newRefresh.httpOnly,
      secure: newRefresh.secure,
      sameSite: newRefresh.sameSite,
      path: newRefresh.path,
      domain: newRefresh.domain,
      maxAge: newRefresh.maxAge,
    });
  }

  return res;
}

function extractRefreshCookie(setCookie: string | null) {
  if (!setCookie) return undefined;

  const parts = setCookie.split(";").map((p) => p.trim());
  const [nameValue, ...attributes] = parts;

  const [name, value] = nameValue.split("=");

  if (name !== REFRESH_TOKEN_COOKIE) return undefined;

  const cookieOptions: any = { value };

  for (const attr of attributes) {
    const [key, val] = attr.split("=");

    switch (key.toLowerCase()) {
      case "path":
        cookieOptions.path = val;
        break;
      case "domain":
        cookieOptions.domain = val;
        break;
      case "max-age":
        cookieOptions.maxAge = Number(val);
        break;
      case "httponly":
        cookieOptions.httpOnly = true;
        break;
      case "secure":
        cookieOptions.secure = true;
        break;
      case "samesite":
        cookieOptions.sameSite = val.toLowerCase();
        break;
    }
  }

  return cookieOptions;
}

Project Setup

{
  "dependencies": {
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18",
    "next-intl": "^3.2.0",
    "axios": "^1.6.2",
    "jwt-decode": "^4.0.0",
    "cookie": "^1.0.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.0.3"
  }
}


Any help, ideas, or pointers would be immensely appreciated! 🙏 Thank you so much in advance!

[JulianKingman]

I happen to be working on this at this exact moment. Here are a couple thoughts:

First, you probably don't want to do this in middleware. There are reasons, but the shortest is NextJS docs advise against session management in middlware. Theo has a video on youtube that goes into more detail.

Second, are your refresh tokens rotating or static? I.e. when you use a refresh token, is it expended (not reusable), or can it be used again for its duration?

If it's not rotating, you can create a slim wrapper around fetch just for fetching your endpoints. You can get the session via getSession and/or await auth() (assuming you're using authjs/next-auth). Create a lock ("mutex") to ensure that subsequent API calls wait until the token is refreshed, something like:

// rough idea...
let refreshingLockByUserId = {}; // keyed by userId so server-side refreshes don't block each other
if (shouldRefresh) {
  refreshingLockByUserId[userId] = refreshTheToken() // returns a promise
}
await refreshingLockByUserId[userId]; // now all promises will wait until the first is resolved
fetch(thingYouWanted)

The reason this doesn't work for rotating refresh tokens is you could have a race where client and server try to refresh at the same time. If you only use one environment, that makes things easier. I ended up creating a wrapper that works on both client and server, since I make requests from both, but there's that possible race that I don't like :(

If you figure out how to do it with rotating refresh tokens, without a shared memory storage like redis, let me know!

[JulianKingman]

Actually, I was wrong. If you're using authjs, use the callbacks, they have examples here for JWT and database strategies here: https://authjs.dev/guides/refresh-token-rotation

The above might be useful for someone not using AuthJS, maybe making something more from scratch, so I'll leave it there.