this is in tutorials and in the clerk doc but this does not work on my project. Giving me the titled error: Property 'protect' does not exist on type 'ClerkMiddlewareAuth'.ts(2339)

I am not sure why its showing up in my project, how to solve it keeping the auth.protect() since its in their instructions. I guess its not updated with latest API changes.

further details.

code:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

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)(.*)',
  ],
}

tested with clerk version 5.3.2 and 5.7.

this is in tutorials and in the clerk doc but this does not work on my project. Giving me the titled error: Property 'protect' does not exist on type 'ClerkMiddlewareAuth'.ts(2339)

I am not sure why its showing up in my project, how to solve it keeping the auth.protect() since its in their instructions. I guess its not updated with latest API changes.

further details.

code:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) await auth.protect()
})

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)(.*)',
  ],
}

tested with clerk version 5.3.2 and 5.7.

• next.js
• clerk

1 Answer 1

The code you provided is from the official documentation (1) , however there are two methods you can use to protect routes based on authentication status:

1. Use auth.protect() if you want to redirect unauthenticated users to the sign-in route automatically
2. Use auth().userId if you want more control over what your app does based on user authentication status

Since you're getting a TypeScript error about auth.protect(), try modifying your code to use the second approach with auth():

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware(async (auth, req) => {
  const { protect } = await auth()
  if (isProtectedRoute(req)) await protect()
})

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
}

This approach uses the auth() helper which is documented to work with the latest versions of Clerk .