Using auth() or currentUser() inside a server action, in nextjs 14.1.0, produces build errors.

[aasmal97]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs
• I have searched for existing issues: https://github.com/clerk/javascript/issues
• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://github.com/aasmal97/Clerk-Authentication-Dynamic-Server-Usage-Error

Publishable key

pk_test_bGVhZGluZy1kb2Jlcm1hbi00MC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Issue:

Using auth() or currentUser() inside a server action, that is imported into a page.tsx file, results in the following build error:

[Error]: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

This would cause/force the page to be client-rendered, potentially defeating the purpose of using nextjs. Though this goes away when the entire server action is defined within the page itself, this creates duplicate code when the same actions need to be re-used.

Steps to reproduce:

1. Create a page.tsx file
2. Create a create a action.ts file, and create a server action, that calls auth() or currentUser() within it.
3. Import server action into page.tsx
4. Run npm run build
5. View log error in command line

Expected behavior:

• No build errors that indicate dynamic rendering

Actual behavior:

The following build error arises.

[Error]: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

Potential Patch
Have an optional cookies param, that allows cookies to be passed directly into auth(), so that we can define the context. This would allow us to call cookies inside the server action, similar to this supabase issue.

Environment

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Memory: 22.67 GB / 47.95 GB
  Binaries:
    Node: 18.18.0 - C:\nodejs\node.EXE
    npm: 8.3.0 - C:\nodejs\npm.CMD
  Browsers:
    Chrome: 121.0.6167.139
    Edge: Chromium (121.0.2277.83)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @clerk/nextjs: ^4.29.5 => 4.29.5
    @types/node: ^20 => 20.11.16
    @types/react: ^18 => 18.2.51
    @types/react-dom: ^18 => 18.2.18
    autoprefixer: ^10.0.1 => 10.4.17
    eslint: ^8 => 8.56.0
    eslint-config-next: 14.1.0 => 14.1.0
    next: 14.1.0 => 14.1.0
    postcss: ^8 => 8.4.33
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    tailwindcss: ^3.3.0 => 3.4.1
    typescript: ^5 => 5.3.3

[JacobJaffe]

The issue here isn't with Clerk. Your example page must be dynamic if you are trying to use the client session for a cached http request -- for any kind of authentication pattern. If you want (some of) the page itself cached, you should be creating client components which the root server component consumes.

What you're doing here is akin to trying to use useSession() or useUser() within the static build phase of nextjs.

The use case for serer actions is more relevant in client-initiated flows, such as a form submission, where auth does work as expected.

[panteliselef]

Hey @aasmal97 thanks for reaching out and for using Clerk.

Not sure if what @JacobJaffe propose will fix the issue because I have not understand the use-case or what your are trying to achieve in your repo.

It feels like this is caused because of incorrect usage of the Next.js framework and its patterns. To verify this you can simply drop the usage of auth and replace it with the cookies function exported from Nextjs.

Basically you should avoid calling server actions directly in the body of a Server component. As a solution:

1. either use auth() directly in the Server component
2. or use the server action for submitting a form
3. or delete the serve action and use it a simple async function.

[aasmal97]

@panteliselef and @JacobJaffe Thanks for your replies :) !

Your reasoning makes sense.

I decided to simply replace the auth() function, with the next js cookies() and parse it for the info like you suggested @panteliselef.

I'll close the issue!

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.