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

[frasermarch]

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:

• update all packages latest
• confirm middleware is being called with debug: true
• checked my computer time is correct for expiring jwts

[nebomilic]

Not sure this helps, but I have had this error when I accidentally exported both authMiddleware and middleware from my middleware file 😅

[ghost]

I have the same issue. We doing a "course" so we found an answer very soon.

Commit showing code changes that triggered the issue. Commit before had no issue. https://github.com/stephyswe/antonio-ecommerce-admin/commit/a9e97450bfabd70891f94feb035793540bdbe40f

What I tried install older version 4.13.3 - same issue. tools: node v16, node v20 env: ubuntu, windows

// another config tried. same issue.

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
import type { NextRequest } from 'next/server'

export default withClerkMiddleware((req: NextRequest) => {
  return NextResponse.next();
});

// Stop Middleware running on static files
export const config = { matcher:  '/((?!_next/image|_next/static|favicon.ico).*)'};

Im using middleware as following:

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware();

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

Error log

null
- error node_modules\@clerk\nextjs\dist\esm\server\getAuth.js (28:12) @ eval
- error Error: 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
    at DashboardLayout ([storeId]/layout.tsx:16:75)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
digest: "4227783618"
null

As always, any help appreciated! <3

[hireshBrem]

I also had the same issue: (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.

[Yaroslavoz]

I've got the same issue. I'm using middleware as shown in https://clerk.com/docs/quickstarts/get-started-with-nextjs Code works but an error always appears. I've got a warning inside my route.ts file as well, but don't know how to resolve it

Anyway, as I've mentioned it is working to make crud, but I'm afraid it can cause issues in production. Thanks in advance

[satpalsr]

I see this error while only signing out

Error: 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

I am using both next.js pages and app dir. Page only for api. All api endpoints are excluded as you can see in below code. So, you can think it of as app dir only.

My middelware.ts looks like

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
    publicRoutes: ["/contact",  "/api(.)*"]
});

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

Now in app dir, I created a page.tsx

'use client'
export const runtime = 'edge'
import { UserButton, SignOutButton } from "@clerk/nextjs";
import { useEffect, useState } from 'react';

export default function HomePage() {
const [signOutText, setSignOutText] = useState('Sign Out');

const handleSignOut = async () => {
      setSignOutText('Signing Out');
};

return  (
<div>
<SignOutButton signOutCallback={handleSignOut}>
                        {signOutText}
</SignOutButton>
</div>
)

}

[zephyrus21]

Hey @stephyswe, How did you solve this issue?

[ghost]

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.

[Yaroslavoz]

Is there any clerk devs?

[zephyrus21]

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!

[Yaroslavoz]

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?

[zephyrus21]

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?

I mean I can use Auth (Next Auth) instead of Clark, but I was trying this.

[ghost]

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?

I mean I can use Auth (Next Auth) instead of Clark, but I was trying this.

Clerk work well. it's just a console log message. everything still works so that's why I believe it's a bug 🐛 🙃

[hpsnagra]

Using Node v20.0.0 seems to have fixed this issue for me.

[devabdultech]

I am having this problem too but this seems to be a problem only when I import and use the import { SignedOut } from "@clerk/nextjs"; and the <SignedOut> element in my root page.ts, I have used the <SignedOut> element in other components and nothing seems to be wrong but when I use in the root page.ts file. It logs out this error. Please how can I fix this.

[devabdultech]

I am having this problem too but this seems to be a problem only when I import and use the import { SignedOut } from "@clerk/nextjs"; and the <SignedOut> element in my root page.ts, I have used the <SignedOut> element in other components and nothing seems to be wrong but when I use in the root page.ts file. It logs out this error. Please how can I fix this.

I have been able to fix this just now. Updating the @clerk/nextjs package seems to fix this issue

[Yaroslavoz]

I am having this problem too but this seems to be a problem only when I import and use the import { SignedOut } from "@clerk/nextjs"; and the <SignedOut> element in my root page.ts, I have used the <SignedOut> element in other components and nothing seems to be wrong but when I use in the root page.ts file. It logs out this error. Please how can I fix this.

I have been able to fix this just now. Updating the @clerk/nextjs package seems to fix this issue

I've just updated this package but it didn't help. The same error

[devabdultech]

I am having this problem too but this seems to be a problem only when I import and use the import { SignedOut } from "@clerk/nextjs"; and the <SignedOut> element in my root page.ts, I have used the <SignedOut> element in other components and nothing seems to be wrong but when I use in the root page.ts file. It logs out this error. Please how can I fix this.

I have been able to fix this just now. Updating the @clerk/nextjs package seems to fix this issue

I've just updated this package but it didn't help. The same error

Try restarting the server and also update your next version to see it it works

[Yaroslavoz]

I am having this problem too but this seems to be a problem only when I import and use the import { SignedOut } from "@clerk/nextjs"; and the <SignedOut> element in my root page.ts, I have used the <SignedOut> element in other components and nothing seems to be wrong but when I use in the root page.ts file. It logs out this error. Please how can I fix this.

I have been able to fix this just now. Updating the @clerk/nextjs package seems to fix this issue

I've just updated this package but it didn't help. The same error

Try restarting the server and also update your next version to see it it works

What Next version do you have?

[devabdultech]

I am having this problem too but this seems to be a problem only when I import and use the import { SignedOut } from "@clerk/nextjs"; and the <SignedOut> element in my root page.ts, I have used the <SignedOut> element in other components and nothing seems to be wrong but when I use in the root page.ts file. It logs out this error. Please how can I fix this.

I have been able to fix this just now. Updating the @clerk/nextjs package seems to fix this issue

I've just updated this package but it didn't help. The same error

Try restarting the server and also update your next version to see it it works

What Next version do you have?

13.4.11

[codewitham]

I also had the same issue: (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.

that works for me

[Yaroslavoz]

I also had the same issue: (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.

that works for me

I don't have a src dir 😕

[ghost]

Using clerk in a newer project. No Issue with this anymore. version.

"@clerk/nextjs": "^4.22.1", "next": "13.4.10",

[devabdultech]

Please does anyone know what causes "infinite redirect loop" and how can it be fixed, my server fails to successfully start.

[mixedfeelings13]

Using next 13.4.10 seems to have fixed the issue, currently using clerk 4.23.0

I got the error again, restarting my browser and vscode did the trick and I could work again.

[mixedfeelings13]

Keep getting the error again I'm not sure what to do anymore!

[Anurag2293]

I was also getting the same error. But I realised that it is just logging the error in my console and the server is still running. I was able to do other stuff just fine so I ignored the logged error 😅

[louisguitton]

I see a few comments on the topic of "upgrading to node v20 fixed the issue", and it is also what is mentioned here in this backup of a discord conversation https://www.answeroverflow.com/m/1110684440448995469

However, the latest LTS for node is node 18 not 20, and node 20 is also not supported on Vercel yet (ref: https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/node-js#node.js-version) which is where most Clerk customers will want to deploy their nextjs+clerk applications. So even if upgrading to node v20 fixes the issue, I don't think it's desirable.

Has anyone found a solution for this issue with node 18?

[louisguitton]

I have answered my own question.

I have created this minimal reproducible example https://github.com/louisguitton/clerk-bug-middleware where you can find my findings in the Readme. In the commit history, you will find

• the commit that introduces the issue https://github.com/louisguitton/clerk-bug-middleware/commit/ff0dd0ad3bac8170ddaaddd9367f5b67e2075a3f due to this line in my route:

  export const dynamic = "force-static";

• the commit that pseudo-fixes the issue https://github.com/louisguitton/clerk-bug-middleware/commit/ff0dd0ad3bac8170ddaaddd9367f5b67e2075a3f by adding "use client" at the top of the file

• the commit that shows a better fix https://github.com/louisguitton/clerk-bug-middleware/commit/aef3c38225a2c4859ee39266ac544321545f2bf0 which shows how to keep using BOTH static pages and clerk auth data

Hope you can find a way to adapt those learnings for your own issue.

[felixchambragne]

I had the same error. Until I realized that the redirect url to the page with the error was wrong. For the code with antonio video, the url is redirect(/${store.id}); those are braces.

[msyavuz]

Moving the middleware.ts file to the root of the project solved the issue (inside the src/if thats what you are using). This is stated both in Clerk docs and Nextjs docs.

[makileth]

To fix the problem:

1. Create a src directory
2. put the app folder and middleware.ts in there (they should be separate)
3. check your Routes. Deleting ignoredRoutes helped me solve the issue

authMiddleware({ publicRoutes: ['/', '/api/webhook/clerk'], ignoredRoutes: ['/', '/api/webhook/clerk'] });

bonus 4. make sure to update your nextjs and clerk 😁

[Yaroslavoz]

To fix the problem:

1. Create a src directory
2. put the app folder and middleware.ts in there (they should be separate)
3. check your Routes. Deleting ignoredRoutes helped me solve the issue

authMiddleware({ publicRoutes: ['/', '/api/webhook/clerk'], ignoredRoutes: ['/', '/api/webhook/clerk'] });

bonus 4. make sure to update your nextjs and clerk 😁

So the only solution is - restructure the project adding src wrapper-folder?! Kinda imperative way((

[CVE-2002-1215]

Hi Everyone if you gets this error for Antonio Project which is "Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL, 2023". I got the same issue. The problem is my typing fault. Check whether you made same fault , if yes fix the code then try to run project. Problem was in this file /components/modals/store-modal.tsx.

You should be using backticks ` in this part.

[BaibhavTiwari]

is there any other way of resolving it?

To fix the problem:

1. Create a src directory
2. put the app folder and middleware.ts in there (they should be separate)
3. check your Routes. Deleting ignoredRoutes helped me solve the issue

authMiddleware({ publicRoutes: ['/', '/api/webhook/clerk'], ignoredRoutes: ['/', '/api/webhook/clerk'] });

bonus 4. make sure to update your nextjs and clerk 😁

is there any other way?

[rohanrathodrepos]

irect(/${store.id})

Elaborate the solution please

[hugosimoesdev]

I also had the same issue: (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.

that works for me

Thanks, it helped me.

Just a correction, the file name is .ts not .tsx

[Akhil-Sharma-26]

I also had the same issue: (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.

Thanks buddy. It worked for me. I was struggling to solve this error for some time now, and then saw your issue here. Thanks again!

[oliwerhelsen]

I got this when I didn't payed attention to where I had put my middleware.ts. Middleware.ts should live on the same level as your "app"-folder. You don't need to use "src"-folder. Works fine without that as well.

Happy coding!

[Rick2807]

I just had the same issue, all I did was copy and paste this code

`import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware();

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

[kawtarzz]

For those following the Antonio tutorial, I was getting this error until I found a couple of mistakes: StoreSwitcher -

• pass items = Store: [ ] through StoreSwitcherProps (import {Store} from "@prisma/client"),
  • push route to /${store.value} in onStoreSelect

if that doesn't resolve the errors, check your api route.ts files and make sure each try and catch both return a json response / NextResponse.json(store)

[leo-paz]

I have answered my own question.

I have created this minimal reproducible example https://github.com/louisguitton/clerk-bug-middleware where you can find my findings in the Readme. In the commit history, you will find

• the commit that introduces the issue louisguitton/clerk-bug-middleware@ff0dd0a due to this line in my route:

  export const dynamic = "force-static";

• the commit that pseudo-fixes the issue louisguitton/clerk-bug-middleware@ff0dd0a by adding "use client" at the top of the file
• the commit that shows a better fix louisguitton/clerk-bug-middleware@aef3c38 which shows how to keep using BOTH static pages and clerk auth data

Hope you can find a way to adapt those learnings for your own issue.

Great investigation, this worked for me. It originally wasn't working on a page where I was also having

export const metadata = {
  title: 'My App'
}

EDIT Its broken again with this PR: https://github.com/louisguitton/clerk-bug-middleware/pull/1 adding "use client"; at the top of the file fixes the original error but gives me a hydration error:

[zhatongning]

I got this when I didn't payed attention to where I had put my middleware.ts. Middleware.ts should live on the same level as your "app"-folder. You don't need to use "src"-folder. Works fine without that as well.

Happy coding!

Thank @oliwerhelsen for your answer solving my problem.And Clerk docoment do mentions this:

Now that Clerk is installed and mounted in your application, it’s time to decide which pages are public and which need to hide behind authentication. We do this by creating a middleware.ts file at the root folder (or inside src/ if that is how you set up your app).

[aryanpachori]

Hey everyone I'm getting this error for Antonio tutorial Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023. Help would be appriciated.

[shahirulprojects]

Hey everyone I'm getting this error for Antonio tutorial Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023. Help would be appriciated.

same,does anyone know how to solve it?

[oliwerhelsen]

@aryanpachori or @shahirul444 can you please share your middleware.ts?

[shahirulprojects]

Here

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:["/api/uploadthing"] });

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

[shahirulprojects]

@oliwerhelsen do you have any ideas on how to solve this please,i've been stucked for hours :,)

[aryanpachori]

@shahirul444 this worked for me -

import { withClerkMiddleware } from "@clerk/nextjs/server"; import { NextResponse } from "next/server"; import type { NextRequest } from 'next/server'

export default withClerkMiddleware((req: NextRequest) => { return NextResponse.next(); });

// Stop Middleware running on static files export const config = { matcher: '/((?!_next/image|_next/static|favicon.ico).*)'};

[shahirulprojects]

is this in the middleware.ts?

if it is,then where do you put the "uploadthing" api

[ajaytitus1386]

I also had the same issue: (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.

This solution fixed it for me as well unbelievably. Cheers