Redirect in middleware when request is a server action fails with "failed to forward action response"

[ehis]

Running: NextJS v14.2.3
Node: v20.5.1

Here's the permalink to the console.error in the action-handler.

Stack Trace on Vercel

failed to forward action response TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11731:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async r_ (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:4134)
    at async rP (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:7924)
    at async r5 (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:18:1139)
    at async es (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:26320)
    at async ei.responseCache.get.routeKind (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:1026)
    at async r3.renderToResponseWithComponentsImpl (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:508)
    at async r3.renderPageComponent (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5028)
    at async r3.renderToResponseImpl (/var/task/node_modules/.pnpm/next@14.2.3_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5615) {
  cause: Error
      at makeNetworkError (node:internal/deps/undici/undici:5002:35)
      at httpRedirectFetch (node:internal/deps/undici/undici:9994:16)
      at httpFetch (node:internal/deps/undici/undici:9954:28)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async schemeFetch (node:internal/deps/undici/undici:9854:18)
      at async node:internal/deps/undici/undici:9727:20
      at async mainFetch (node:internal/deps/undici/undici:9717:20)
}

[ehis]

hi @ztanner In our application, createForwardedActionResponse fetch request is failing when the middleware intercepts a server action request and based on some application logic (eg. invalid session) redirects the user to another page.

#64227

Example of condition and redirect in middleware.

const isMember = false

if (!isMember) {
   return NextResponse.redirect(new URL('/plans', request.url));
}

Hoping we can get a patch soon!

[ztanner]

Hi @ehis, thank you for the report! This should be fixed by #65097 which is available in v14.3.0-canary.27. Let me know if you're still seeing this behavior on/after this version.

[ehis]

@ztanner Thanks for the callout on getIsServerAction and only using to demonstrate behavior - not going to use in production code.

Correct, as presumed the end goal is for the middleware to intercept any server action triggered on /buy (including the forwarded action) and force redirect to the /plans page.

A practical use case for this flow could be the middleware intercepting an action and redirecting to the /login page because of an expired JWT.

If there's another recommended NextJS approach to doing the equivalent would love any suggestions 🙏🏾

[ztanner]

Hey @ehis --

I see, that makes sense! For the use-case you shared, some ideas/recommendations:

• Ensure your server action is performing the hard auth check, rather than solely relying on middleware (ex).
• If the user isn't logged in, your server action could trigger a redirect to the plans page, eg:

export const purchaseMe = async () => {
  const isLoggedIn = await verifyAuth()

  if (!isLoggedIn) {
    redirect('/plans')
  }

  return {
    foo: 'bar',
  }
}

• If you wanted to generalize this behavior, you could abstract it into a helper that's used on your non-public actions. e.g., await redirectIfUnauthorized())

[ehis]

@ztanner I see! If we perform the hard auth check in our server actions could we then exclude them from the middleware?

eg.

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    {
      source:
        '/((?!api|_next/static|_next/image|media|fonts|favicon.ico|favicon.png).*)',
      missing: [
        // Exclude Server Actions
        { type: 'header', key: 'next-action' },
      ],
    },
  ],
};

[ztanner]

@ehis, yep, no need to handle in middleware! You can think of it similar to an API route where you'd have the auth check at the top of the request handler.

[ehis]

thanks so much @ztanner and really appreciate the response to the help discussion!!