71 replies

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Hi there,

Recently, I was following Theo's T3 stack tutorial on YouTube. When attempting to use the Clerk

getAuth()

getAuth()

helper function in the

trpc.ts

trpc.ts

file of the T3 stack application, an error is thrown stating that the

withClerkMiddleware

withClerkMiddleware

function must be added to the Next.js

middleware.ts

middleware.ts

file. Prior to using the

getAuth()

getAuth()

helper function, Clerk was working fine and recognized that

withClerkMiddleware

withClerkMiddleware

had already been added to the

middleware.ts

middleware.ts

file.

Steps to Reproduce:
1. Follow Theo's T3 stack tutorial on YouTube.
2. At timestamp 1:21:28 in the tutorial, introduce the Clerk

getAuth()

getAuth()

helper function in the

trpc.ts file

trpc.ts file

to retrieve the authentication state for a user based on the

NextApiRequest

NextApiRequest

argument passed to it.
3. Run the application using

npm run dev

npm run dev

command from the project's root directory .
4. Observe the following error message (screenshot attached):

tRPC failed on <no-path>: You need to use "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

Expected Result:
The

getAuth()

getAuth()

helper function should be able to retrieve the authentication state for a user without causing any errors.

Actual Result:
An error message is thrown stating that the

withClerkMiddleware

withClerkMiddleware

function must be added to the

middleware.ts

middleware.ts

file, and to check that Clerk has been properly configured.

Fixes Attempted:
1. Deleted

.next

.next

and restarted Next.js dev server using

npm run dev

npm run dev

command.
2. Reinstalled

@clerk/nextjs

@clerk/nextjs

NPM package.
3. Reconfigured

middleware.ts

middleware.ts

from scratch based on example from Clerk's quickstart documentation for Next.js.

I'm kind of lost here and would appreciate any help/advice on how to fix the bug. Thanks!

YouTubeTheo - t3․gg

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

I've never worked this hard on a video before. I really hope y'all can benefit from this

GITHUB REPO https://github.com/t3dotgg/chirp
DEPLOYED APP https://xn--uo8h.t3.gg/
GET A JACKET IF YOU'RE COOL LIKE THAT https://shop.t3.gg/

ALL MY VIDEOS ARE POSTED EARLY ON PATREON https://www.patreon.com/t3dotgg
Everything else (Twitch, Twitter, Discor...

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

Next.js Overview | Clerk

Clerk is the easiest way to add authentication and user management to your Next.js application

TTC

Theo's Typesafe Cult•3y ago•

71 replies

roshen

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Hi there,

Recently, I was following Theo's T3 stack tutorial on YouTube. When attempting to use the Clerk

getAuth()

getAuth()

helper function in the

trpc.ts

trpc.ts

file of the T3 stack application, an error is thrown stating that the

withClerkMiddleware

withClerkMiddleware

function must be added to the Next.js

middleware.ts

middleware.ts

file. Prior to using the

getAuth()

getAuth()

helper function, Clerk was working fine and recognized that

withClerkMiddleware

withClerkMiddleware

had already been added to the

middleware.ts

middleware.ts

file.

Steps to Reproduce:
1. Follow Theo's T3 stack tutorial on YouTube.
2. At timestamp 1:21:28 in the tutorial, introduce the Clerk

getAuth()

getAuth()

helper function in the

trpc.ts file

trpc.ts file

to retrieve the authentication state for a user based on the

NextApiRequest

NextApiRequest

argument passed to it.
3. Run the application using

npm run dev

npm run dev

command from the project's root directory .
4. Observe the following error message (screenshot attached):

tRPC failed on <no-path>: You need to use "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

Expected Result:
The

getAuth()

getAuth()

helper function should be able to retrieve the authentication state for a user without causing any errors.

Actual Result:
An error message is thrown stating that the

withClerkMiddleware

withClerkMiddleware

function must be added to the

middleware.ts

middleware.ts

file, and to check that Clerk has been properly configured.

Fixes Attempted:
1. Deleted

.next

.next

and restarted Next.js dev server using

npm run dev

npm run dev

command.
2. Reinstalled

@clerk/nextjs

@clerk/nextjs

NPM package.
3. Reconfigured

middleware.ts

middleware.ts

from scratch based on example from Clerk's quickstart documentation for Next.js.

I'm kind of lost here and would appreciate any help/advice on how to fix the bug. Thanks!

YouTubeTheo - t3․gg

T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScrip...

I've never worked this hard on a video before. I really hope y'all can benefit from this

Next.js Overview | Clerk

Clerk is the easiest way to add authentication and user management to your Next.js application

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Similar Threads

Similar Threads

Similar Threads