Why is "const { userId } = await auth()" returning null using Clerk on a Next.js app?

Question

I'm encountering an issue where userId returned by Clerk's auth() helper is null, even though I'm wrapping my application with the ClerkProvider. Below are the details of my setup and code:

Docs: https://clerk.com/docs/references/nextjs/auth#use-auth-to-retrieve-user-id

export async function CreateProduct(unsafeData: z.infer<typeof productDetailsSchema>) {
    //this returns null
    const { userId }: { userId: string | null } = await auth()
    const { success, data } =  productDetailsSchema.safeParse(unsafeData)

    if (userId === null) {
        return { 
            error: true, 
            message: 'There was an error creating your product. userId is null' 
        }
    } else if (!success) {
        return { 
            error: true, 
            message: 'There was an error creating your product. Request was unsuccesful' 
        }
    }

    const { id } = await createProductDb({ ...data, clerkUserId: userId })

    redirect(`/dashboard/products/${id}/edit?tab=countries`)
}

This is my middleware setup:

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

const isPublicRoute = createRouteMatcher([
  '/', 
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api(.*)'
]) 

export default clerkMiddleware((auth, req) => {
  if (!isPublicRoute(req)) {
    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)(.*)',
  ],
};

Any help would be greatly appreciated!

Expected Behavior: The auth() helper should return the authenticated user's userId.

Actual Behavior: userId is always null.

Clerk and Next Versions: @clerk/[email protected] @clerk/[email protected] [email protected]

AbdQaadir · Accepted Answer · 2025-03-23 13:53:38Z

-1

You can use <ClerkLoaded /> and <ClerkLoading /> components in your dashboard's layout to ensure that clerk's resources are fully loaded before your component renders.

Link to resource: https://clerk.com/docs/components/control/clerk-loaded

answered Mar 23 at 13:53

AbdQaadir

1671 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is "const { userId } = await auth()" returning null using Clerk on a Next.js app?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related