I have the following middleware:
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
const publicRoutes = [
'/',
'/browse',
'/sign-in(.*)',
'/sign-up(.*)',
];
const isPublicRoute = createRouteMatcher(publicRoutes);
export default clerkMiddleware(
(auth, request) => {
if (!isPublicRoute(request)) {
auth().protect();
}
},
{ debug: true }
);
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
};
Now, let's say that I have a protected route /dashboard
. My issue is that if I am signed in, and if I am on the /dashboard
page, and I click Sign Out via Clerk's built in <UserButton />
, for a fraction of a second I see a 404 (and there's a POST
request to /dashboard
as well) before I am redirected to /
.
Any suggestions? I understand why I'm getting the 404
but I fail to fix the issue.