fix(nextjs): Warn about misplaced middleware file when using auth or …

…getAuth (#1908) * fix(nextjs): Warn about misplaced middleware file when using auth or getAuth For NextJS 13 application, if the `/src` directory is used then the middleware file needs to be nested under it, otherwise the middleware will not run. This is a very common user error - this commit updates the error message to list moving middleware under /src as a potential fix. * Create selfish-pens-laugh.md * Update packages/nextjs/src/server/errors.ts Co-authored-by: Bryce Kalow <[email protected]> --------- Co-authored-by: Bryce Kalow <[email protected]>
clerk · Oct 18, 2023 · 6576ac4 · 6576ac4
1 parent 112b90b
commit 6576ac4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/selfish-pens-laugh.md b/.changeset/selfish-pens-laugh.md
@@ -0,0 +1,5 @@
+---
+"@clerk/nextjs": patch
+---
+
+Update the error thrown by auth() or getAuth() to indicate that if the /src directory exists, then the middleware.ts file needs to be placed inside it, otherwise the middleware will not run.
diff --git a/packages/nextjs/src/server/errors.ts b/packages/nextjs/src/server/errors.ts
@@ -28,11 +28,16 @@ Alternatively, you can set your own ignoredRoutes. See https://clerk.com/docs/ne
 (This log only appears in development mode)
 `;
 
-export const getAuthAuthHeaderMissing = () =>
-  'You need to use "authMiddleware" (or the deprecated "withClerkMiddleware") in your Next.js middleware file. You also need to make sure that your middleware matcher is configured correctly and matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs';
+export const getAuthAuthHeaderMissing = () => authAuthHeaderMissing('getAuth');
 
-export const authAuthHeaderMissing = () =>
-  "Clerk: auth() was called but it looks like you aren't using `authMiddleware` in your middleware file. Please use `authMiddleware` and make sure your middleware matcher is configured correctly and it matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs";
+export const authAuthHeaderMissing = (helperName = 'auth') =>
+  `Clerk: ${helperName}() was called but Clerk can't detect usage of authMiddleware(). Please ensure the following:
+- authMiddleware() is used in your Next.js Middleware.
+- Your Middleware matcher is configured to match this route or page.
+- If you are using the src directory, make sure the Middleware file is inside of it.
+
+For more details, see https://clerk.com/docs/quickstarts/get-started-with-nextjs.
+`;
 
 export const clockSkewDetected = (verifyMessage: string) =>
   `Clerk: Clock skew detected. This usually means that your system clock is inaccurate. Clerk will continuously try to issue new tokens, as the existing ones will be treated as "expired" due to clock skew.