I'm currently experiencing an issue with the user sign out process. When a user signs out using the Clerk's UserButton component, they are correctly routed to the 'sign-in' URL, but the page does not refresh. As a result, even though the user is not logged in, they can still see the page content until a manual refresh (F5) is performed.

This behavior is not ideal as it can lead to confusion for the user and potential security concerns.

The expected behavior is that the page should automatically refresh when a user signs out, ensuring that they can no longer see any content until they sign back in.

I'm using the following middleware:

import { authMiddleware, redirectToSignIn } from "@clerk/nextjs";
import { NextResponse } from "next/server";

export default authMiddleware({
    publicRoutes: ["/sign-in"],
    afterAuth(auth, req) {
        // Handle users who aren't authenticated
        if (!auth.userId && !auth.isPublicRoute) {
            return redirectToSignIn({ returnBackUrl: req.url });
        }

        if (auth.userId && !auth.isPublicRoute) {
            return NextResponse.next();
        }
        // Allow users visiting public routes to access them
        return NextResponse.next();
    }
});

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