clerk / clerk-next-app-router-starter

Get Started with Clerk and Next.js App Router
https://clerk-next-app-router-starter.clerkpreview.com
8 stars 2 forks source link

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 #2

Closed frasermarch closed 1 year ago

frasermarch commented 1 year ago

I've been getting this error on all of my Clerk projects. Even when I clone this repo and make no changes other than to put in my PK/SK.

Any tips or advice?

Things I've tried:

back-2-95 commented 1 year ago

I suddenly started to get this error after updating to Next.js 13.5

shahirulprojects commented 1 year ago

I also had the same issue: image (my error was in the server side as I wanted to use auth in a server component) I got the error when the middleware.tsx file was outside the 'src' directory. To fix this error I put the middleware.tsx file within the src directory but outside the app directory and it worked for me. image

This solution fixed it for me as well unbelievably. Cheers image

i did that but the error is still there.I have to change my middleware.ts codes as suggested by @aryanpachori .But now as i go along the project i face new errors and i figure it is from the modified middleware.ts.Can you show me your middleware.ts? @ajaytitus1386

ajaytitus1386 commented 1 year ago

I also had the same issue: image (my error was in the server side as I wanted to use auth in a server component) I got the error when the middleware.tsx file was outside the 'src' directory. To fix this error I put the middleware.tsx file within the src directory but outside the app directory and it worked for me. image

This solution fixed it for me as well unbelievably. Cheers image

i did that but the error is still there.I have to change my middleware.ts codes as suggested by @aryanpachori .But now as i go along the project i face new errors and i figure it is from the modified middleware.ts.Can you show me your middleware.ts? @ajaytitus1386

Sure, Try renaming the file between .ts and .tsx and see if that helps. middleware.ts

import { authMiddleware } from "@clerk/nextjs"

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
export default authMiddleware({
  publicRoutes: ["/", "sign-in", "sign-up", "/api/webhook"],
})

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
}
back-2-95 commented 1 year ago

Moving stuff under src fixed lot's of other warnings/erros on build but this error prevails. I tried renaming src/middleware.ts to src/middleware.tsx and back without change.

piclez commented 1 year ago

I'm also getting this error with /middleware.ts and Next 13.5.2!

damzobridge commented 1 year ago

Had the same issue in 13.5.1 & 13.5.2, so I temporarily renamed the pages directory to see if it was interfering with App Router middleware, and turns out it was. So I moved any existing api routes and pages over to the app router. No longer have the issue.

back-2-95 commented 1 year ago

I don't have both App and pages folders. Just App folder.

GuiBibeau commented 1 year ago

This can be easily reproduced on the latest versions of next.js and clerk. I tried the following:

back-2-95 commented 1 year ago

I found out a solution for me. I deleted the "loading.tsx" from the project and the error went away.

BRKalow commented 1 year ago

Hey y'all, it sounds like there might be a variety of root causes here.

If at all possible, please produce a minimal reproduction and open an issue in our javascript repository. A reproduction will allow us to isolate the issue and investigate further. 🙏

sojinsamuel commented 1 year ago

Hey @stephyswe, How did you solve this issue?

Haven't solved it. In production no error show and all working fine. I say it's a bug. be nice if clerk dev could look into this more.

Aaah, I am getting an error in production!

@zephyrus21 did you find any alternatives to Clark?

You could use Kinde. But if your region are far from their servers (you will be able to see 3 or 4 regions at the start of the onboarding process, which you can select of your own choice) then it could cause latency. if not then its the best options

Osmanity commented 1 year ago

I also had the same issue: image (my error was in the server side as I wanted to use auth in a server component)

I got the error when the middleware.tsx file was outside the 'src' directory. To fix this error I put the middleware.tsx file within the src directory but outside the app directory and it worked for me. image

NOTE!!: It is good thing to note that if you still get this error even if you correctly placed the middleware.ts, you will also get this error msg if you use auth() inside a route.ts api endpoint which you should not, instead use getAuth(req) to access it.

Documentation api routes: https://clerk.com/docs/quickstarts/nextjs#api-routes

LekoArts commented 1 year ago

Hello,

the starter https://github.com/clerkinc/clerk-next-app-router-starter works in its current form as-is. The Next.js docs say:

Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.

So if you're using the src folder, you need to move your Middleware file.

But those are issues in your code, not inside this starter. Thus we'll close this.

bryantbrock commented 1 year ago

As weird and bad as the error is (worst of all it's misleading), upgrading my node version to 20.4 was the only thing that fixed it. Obviously, have the file at the right level, but you may also need to upgrade your node version.

nvm use 20