Auth data is not present on serverside - NextJS App Router

[SimonHylander]

• 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

[dimkl]

Hello @SimonHylander thank you for reporting this.
I ran the example application and after sign-in 3 requests were executed to reload the components using RSC. Of the 3 requests, 2 are for the same component. The first 2 requests were executed without session data, but the 3rd was executing (2nd request for the 1 component) is executed with the session populated.
Even though it's not optimal it seems that the demo works. I will take a better look at it and come back to you.

[clementprevot]

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

[brkalow]

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.

[ethansnow2012]

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

[Indu-Chandana]

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

I have similar issue

[pnwatin]

i experience the same issue but after some debugging it seems to only affect Firefox.
Brave, Safari and Chrome are working as expected.

In Firefox i got the following warning in the console Cookie “__client_uat” has been rejected for invalid domain. It doesn't appear on other browsers.

EDIT: this seems to only affect dev environment on localhost

[santagar]

I have same problem in production environment. Localhost always works fine. I am using following lines to check auth in API service and userId is always null on server side. My app also print user info in another client pages and there is OK.

const { userId } = auth(); if (!userId) { return new NextResponse("Unauthorized", { status: 401 }); }

[eob]

I'm also encountering this bug. Similar to @clementprevot, immediately after login I get a null auth state on the server-side but a non-null auth state on the client side.

This prevents redirecting to a "post-login" SSR page that performs a few required account-update activities before redirecting the user to their eventual destination

For me this problem:

• DOES happen with OAuth login
• Does NOT not happen with magic link login

[jamierumbelow]

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?