javascript: Auth data is not present on serverside - NextJS App Router

Review the documentation: https://clerk.com/docs
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

@clerk/clerk-js
@clerk/clerk-react
@clerk/nextjs
@clerk/remix
@clerk/types
@clerk/themes
@clerk/localizations
@clerk/clerk-expo
@clerk/backend
@clerk/clerk-sdk-node
@clerk/shared
@clerk/fastify
@clerk/chrome-extension
gatsby-plugin-clerk
build/tooling/chore
other:

Dependencies + versions

{
  "name": "app-router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.23.1",
    "@clerk/themes": "^1.7.5",
    "@t3-oss/env-nextjs": "^0.3.1",
    "dotenv": "^16.3.1",
    "encoding": "^0.1.13",
    "next": "^13.4.12",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "superjson": "1.12.2",
    "svix": "^1.7.0",
    "zod": "^3.21.4"
  }
}

Browser/OS

node 18.16.1

Description

After logging in, all auth properties are null in the server component using the auth() function. Auth properties are present using a client component with useAuth(). If I try to log auth in the “afterAuth” middleware all properties are also null.

<SignedIn></SignedIn>

only works in client components.

demo project https://github.com/SimonHylander/next-app-router-clerk

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 16 (2 by maintainers)

Most upvoted comments

Okay, I did some more debugging and managed to make it work by deleting the __client_uat cookie.

For whatever reason, this cookie wasn’t being cleared or replaced correctly when I logged out. Its value was stuck at 0.

I’m still not sure why:

The cookie wasn’t reset when I logged out / in
This caused this failure

On (2), my suspicion is that it was triggering an invalid JWT handshake, which would explain why I was seeing a standard-signed-out reason in my logs. (This is confirmed here).

jamierumbelow on Dec 18, 2023

Clearing the cookies in local development cleared the issue of seeing null returned for auth() and currentUser() in a server component.

kellenproctor on Mar 13, 2024

i was having this same issue on chrome where where my middleware function kept redirecting to the sign-in even though i was authenticated in clerk. also debug mode showed that all auth fields were null. this was the case only in production and didnt happen while i was on localhost. i opened the prod deployment in chrome incognito mode and suprisingly this error was gone and everything worked fine. I stopped being redirected to sign-in even though im logged in. this hinted that the problem was cookies to do with cookies. So, i cleared my cookies for my production domain and then everything worked as originally intended.

tldr; clearing cookies fixed this same issue for me.

edanphillip on Feb 1, 2024

I also encounter this. getAuth() do return userId when I am on the localhost but not when I deployed it to vercel.

ethansnow2012 on Oct 8, 2023

Hi y’all! Using the provided reproduction I’m not able to see the issue. Immediately after login, I’m getting userId from auth() on the server. This is through an email link as well as other flows.

I’m going to close this, but if anyone is able provide clear reproduction steps we’d be happy to take another look.

BRKalow on Oct 6, 2023

Same issue with Firefox. @BRKalow could you reopen the issue? I believe it’s reproducible with Firefox, not Chrome.

wowjulian on Jan 7, 2024

I’m afraid I’m also seeing the same problem. Client side authenticates fine, server returns null for everything.

What’s weird is that it’s working on localhost so it’s very difficult to debug. Perhaps it’s something to do with Vercel’s serverless functions?

jamierumbelow on Dec 18, 2023

Hi!

I have noticed the same behavior. I use const { userId } = auth() in a server side component (a layout in this case) and const { userId } = useAuth() in a client component (the page at the same level as the layout).

When I authenticate using a magic link, I get redirected to my page with __clerk_status=verified and a __clerk_created_session, but the log in the server side return a null userId while in the client component I do have my proper userId. What is even weirder is that hard-refreshing the page in the browser fixes everything and I have my userId in both the server and client component

clementprevot on Aug 28, 2023