[Next13/App] Can middleware still opt-out of preflight cache?

[hjaber]

I am running a middleware auth check to a /protected route using Nextjs 13 and the App directory.

Currently, when <Link href="/protected'>Protected</Link> on a navbar preforms it's prefetch on the root layout render, middleware will not run again. So if the auth session changes, middleware will not detect a change in the session as the prefetch from the <Link> is cached which is default behavior and one of the benefits of <Link>.

When adding prefetch={false} on the <Link href="/protected">, middleware will detect every session change which is my goal behavior.

#32767 Added a feature to opt-out of preflight cache on middleware but I'm unable to reproduce this behavior with Nextjs13 using the following example:

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === "/") {
    const redirectUrl = Math.random() > 0.5 ? "/about" : "/contact";
    const response = NextResponse.redirect(new URL(redirectUrl, request.url));
    response.headers.set("x-middleware-cache", "no-cache"); // Disables middleware caching
    return response;
  }
}

This example will always route to one route repeatedly as the x-middleware-cache: no-cache seems to be ignored. Middleware will only change the route if the root layout is refreshed (manual refresh).

[davidebriscese]

I too am interested in this issue, to be able to opt-out of preflight cache on middleware in Nextjs13
I need the middleware to run on every request

[tobidemski]

Someone found a solution to that?

Already tried this for all routes but its only called once.

export function middleware(request: NextRequest) {
  let response = NextResponse.next();

  console.log("Set middleware-cache to no cache");
  response.headers.set("x-middleware-cache", "no-cache");

  return response;
}

[frimoldi]

I'm having the same issue. I'm unable to add authentication logic to my middleware.ts because the redirect is cached.

[frimoldi]

@hjaber did you find any workaround?

[hjaber]

@hjaber did you find any workaround?

No, I completely changed my logic so I wouldn't have to rely on opting out of preflight cache unfortunately

[frimoldi]

Oh man that sucks. I tried upgrading to the latest NextJS version but x-middleware-cache is still being ignored (if my understanding of what is supposed to do is correct).

Authentication checks is one of the things NextJS docs lists as one of the use cases for middlewares. I'm not sure if this is a bug on their end or me not understanding how things are supposed to work.

[ArmanAryanpour]

This issue also breaks localization according to nextjs internationalization docs. For example after changing the locale, clicking a link with absolute path: /profile/xxx will take you to whatever that was cached (disregarding the cookie).

[Jsfumato]

I solved the issue by bypassing it in the following way

Currently my project is checking jwt token in middleware.
When an unauthorized user accesses a protected route, middleware redirects it to a public route such as the main page.

Added a router.refresh() function call to the redirected page so that middleware could be triggered again
I hope this will be of some help to those who are experiencing similar difficulties.

[speedylama15]

Did you convert the entire redirected page into a client component and place router.refresh there or did you place router.refresh in the client components that were placed within the redirected page?

[fracuci]

@speedylama15 I followed this and @KamranV21 suggestion and I finally ended up with this:

on middleware.ts I just check for session token

export default function middleware(request: NextRequest) {
  try{
    const jwt = request.cookies.get('sessionToken')?.value
   
    if ( jwt === undefined ){
        return NextResponse.redirect(new URL('/auth/login', request.url))
      }
  
      const jwtDecoded = jwt_decode<JWT>(jwt)
  
      if ( Date.now()/1000 >= jwtDecoded['exp'] ){
        return NextResponse.redirect(new URL('/auth/login', request.url))
      } else {
        return NextResponse.next()
      }

  } catch (error){
      console.error(error);
      return NextResponse.redirect(new URL('/auth/login', request.url))
  }; 

  }

whilst on Login page.js put router.refresh() before pushing to main page

export default function LoginPage(request) {

    const router = useRouter();
    const username = useRef();
    const password = useRef();
  
    const [error, setError] = useState(false);

    async function handleSubmit(e) {
      
      e.preventDefault();

      const form = e.target;

      const username = form.username.value;

      const password = form.password.value;

      fetch('/auth/api/login', {method: 'POST', body: JSON.stringify({'user': username, 'password': password})})
      .then(async (response) => {
        var responseJson = await response.json();
        if ( responseJson.status === 200 ){
          router.refresh();
          router.push('/');
        } else {
          setError(true);
        }
      });
    };

[ ... ]

Note that my login page.js use 'use client' directive

[avijitroy-urelaa]

thanks its save my time

[KamranV21]

Found a solution that works fine for me. Just run router.refresh() to clear a Router cache.

[KamranV21]

Do you run router.refresh() in a logout function? Doesn't it delete prefetch data?

[Gunlek]

I understand how you can handle manual logout by doing router.refresh() to flush router's cache but in the case of session expiration, you must do the check for the valid session on each page loading (or there is something that I don't understand, which is effectively possible)

[browynlouis]

I understand how you can handle manual logout by doing router.refresh() to flush router's cache but in the case of session expiration, you must do the check for the valid session on each page loading (or there is something that I don't understand, which is effectively possible)

Haven't tried this though, but I'm thinking it should work.

If you're listening to a user's session in your app and your listener gets a 401 or 403 or unauthenticated error you could call router.refresh() to invalidate the cached pages.

You could do this in a Provider that wraps tour application.

[KamranV21]

Unfortunately Next.js 13 caching is far from perfect. And there are not too many options to revalidate a cache at the moment.

First, you can set a "prefetch" property to false for all Link components that navigate to sensitive pages. Or you can move a session check logic to the client side as was already mentioned. Although these solutions do not seem to be too elegant.

But I can also think of this scenario. Let's say that some user's session has expired, but due to Next.js caching, he still can visit some protected pages in your app (of course unless he refreshes a page). But is it really that critical? Route cache lives up to 5 minutes. If some page was cached that means the user's session was valid just a few moments ago. And then in case he tries to make a new HTTP request you will check his session on the server anyway and then you can throw an error, redirect the user, and that it.

Please keep in mind that I'm not aware of the needs of your exact project, so these ideas may not be valid to you.

[browynlouis]

Yea you're right.

Although I would prefer not setting prefetch to false so as to still benefit from it and instead depend on router.refresh() when there's an update that needs the fresh data/page

[Bluzzi]

Has anyone found a solution directly in the middleware? This problem seems so important to me

[ferbin17]

Is setting 'x-middleware-cache' as 'no-cache' in headers working for anyone?
I am using middleware to implement authentication (using next-auth) and multi-subdomain support.

Here is how it is implemented was implemented earlier,

  const redirectPathname = await shouldRedirect(request);
  if (redirectPathname) {
    request.nextUrl.pathname = redirectPathname;

    return NextResponse.redirect(request.nextUrl);
  }

with this approach, redirects were getting cache so I had to use router.refresh() to solve it.

I also tried implementing it in this way,

const redirectPathname = await shouldRedirect(request);
  if (redirectPathname) {
    request.nextUrl.pathname = redirectPathname;

    const response = NextResponse.rewrite(request.nextUrl, {
      headers: { "x-middleware-cache": "no-cache" },
    });

    return response;
  }

This didn't make any change to the earlier working (without router.refresh()).
If anyone has any idea why the headers are not working or any other approach I can fix this in the middleware itself.

[kkx64]

Still no answer at the middleware-level? This is causing chaos for internationalisation.

[NickDelta]

This is causing us real issues at applying authorization to our frontend (with next-auth middleware). It's been over a year, please fix this.

[kkx64]

I recently found that in my case, the Redirects with status 308 (Permanent Redirect) get cached while the 307s (Temporary Redirect) do not. Might help someone out in a hurry...

[root-zero-o]

You saved my life. Thanks 😂

[BenjaOliva]

Didn't work for me :(

if (
    currentUser &&
    (request.nextUrl.pathname.startsWith('/login') ||
      request.nextUrl.pathname.startsWith('/register'))
  ) {
    const redirectResponse = NextResponse.redirect(
      new URL('/dashboard', request.url),
      redirectCode
    );

    return redirectResponse;
  }

No changes here, no redirection made and I have the session cookie set on my browser. Matcher gets triggered and the logs of the middleware are called

[saman2007]

Hello guys.
I am using next js pages router and i had this problem with my private pages after authenticating users. In my event handler, i added this line exactly before router.push(path):

await router.prefetch(path, path, {priority: true})

And it worked and it fixed the problem with my private pages after authenticating users in sign in form.
So in App router, there is a router.prefetch method too. I didnt test it, but it may work for your situation if you test that.

[prakhart111]

Did anyone get any middleware-level solution for this? Can't we disable this caching?

[MohamedOsamaDev]

I worked very hard to come up with this solution. It's not the smartest, but this is what I got to.

"use client";
import { getSession, handleLogout } from "@/_lib/auth";
import useCart from "@/hooks/useCart";
import { useRouter } from "next/navigation";
import React, {
  createContext,
  useContext,
  useEffect,
  useLayoutEffect,
  useState,
} from "react";
const AuthContext = createContext("AuthContext");
export const AuthProvider = ({ children }) => {
  const [session, setSession] = useState(null);
  const { connectCart } = useCart();
  const [isLoading, setIsLoading] = useState(true);
  const [islogingOut, setIsLoggingOut] = useState(false);
  const router = useRouter();
  const logOut = async ({ newRoute = "/" } = {}) => {
    setIsLoggingOut(true);
    try {
      await handleLogout();
    } catch (error) {
    } finally {
      router.replace(newRoute);
      router.refresh();
      connectCart([]);
      setIsLoggingOut(false);
      setSession(null);
    }
  };
  const signIn = async ({ profile, cart = null, next = "/profile" }) => {
    if (cart) connectCart(cart?.items);
    setSession(profile); // profile data email user name ...
    router.replace(next);
    router.refresh();
  };
  useEffect(() => {
    const checkSession = async () => {
      try {
        setIsLoading(true);
        const { profile = null, cart = null } = await getSession();

        if (cart) connectCart(cart?.items);
        setSession(profile);
      } catch (error) {
        logOut();
      } finally {
        setIsLoading(false);
      }
    };
    checkSession();
  }, []);
  return (
    <AuthContext.Provider
      value={{
        session,
        isLoading,
        islogingOut,
        signIn,
        logOut,
      }}
    >
      <>{children}</>
    </AuthContext.Provider>
  );
};

export const useAuth = ({ withRefresh = false } = {}) => {
  if (!withRefresh) return useContext(AuthContext);
  const { refresh } = useRouter();
  useLayoutEffect(() => {
    refresh();
  }, []);
  return useContext(AuthContext);
};
//export const useAuth = () => useContext(AuthContext);

and this is my middleware logic

import { NextResponse } from "next/server";
import { AuthRoutes, adminRoutes, unAuthRoutes } from "./routes";
import isIncludes from "./utils/isIncludes";
import decodeToken from "./utils/decodeToken";

export async function middleware(request) {
  const { pathname, search = "/profile" } = request.nextUrl;
  const isAuth = await decodeToken(request.cookies.get("token")?.value);
  const isAdmin = isAuth?.role === "admin";
  if (isIncludes(pathname, AuthRoutes) && !isAuth) {
    return NextResponse.redirect(
      new URL(`/sign-up?next=${pathname.toString()}${search}`, request.nextUrl)
    );
  }
  if (isIncludes(pathname, unAuthRoutes) && isAuth && !isAdmin) {
    return NextResponse.redirect(new URL("/profile", request.nextUrl));
  }
  if (isIncludes(pathname, adminRoutes) && !isAdmin) {
    return NextResponse.rewrite(new URL(`/not-found`, request.url));
  }
  if (!isIncludes(pathname, adminRoutes) && isAdmin) {
    return NextResponse.redirect(new URL("/dashboard", request.nextUrl));
  }

  return NextResponse.next();
}

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

[eddie-hopeharbor]

Is Next js 15 gonna fix this given its changes to the caching behavior?

[mauvpark]

I found a solution.

/** @type {import('next').NextConfig} */
const nextConfig = {
	experimental: {
		staleTimes: {
			dynamic: 0,
		},
	},
};

export default nextConfig;

I guess router's cache statleTime is 30s as default. You can set 0 in next.config.mjs.

#66039 is breaking change in Next 15, so you don't need to this option when you start with Next 15.