Error: Cookies can only be modified in a Server Action or Route Handler.

[larsniet]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
    Binaries:
      Node: 18.16.0
      npm: 9.6.7
      Yarn: N/A
      pnpm: 8.6.0
    Relevant Packages:
      next: 13.4.8-canary.5
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      See reproduction repo

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/larsniet/server-actions-bug-report

To Reproduce

git clone https://github.com/larsniet/server-actions-bug-report
cd ./server-actions-bug-report
pnpm install && pnpm dev // or npm install && npm run dev

Go to localhost and you should see the error appear in the console.

Describe the Bug

Cookies are not available in server actions.

Using cookies().set() within a server action returns the error:
Cookies can only be modified in a Server Action or Route Handler.

This occurs when trying to implement a server action within any layout (root layout or nested layout). Simply adding the following function within a layout will return the error:

  async function deleteCookie(name: string) {
    "use server";

    try {
      cookies().set({
        name: name,
        value: "",
        expires: new Date("2016-10-05"),
        path: "/",
      });
    } catch (error) {
      console.error(`Error deleting cookie: ${name}`, error);
      throw error;
    }
  }
  await deleteCookie("test");

Expected Behavior

Cookies are handled within a server action, so the error should not occur.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[nmitic]

Isn't this by design?

From the docs:

The cookies function allows you to read the HTTP incoming request cookies from a Server Component or write outgoing request cookies in a Server Action or Route Handler.

source: https://nextjs.org/docs/app/api-reference/functions/cookies

[shuding]

This is expected, it is not allowed to directly edit the cookie during server rendering. Only cookies().get() is allowed (otherwise it's the same as directly calling cookies().set() in Server Components).

This ensures that server rendering doesn't cause side effects and the result can be properly cached.

[larsniet]

This is expected, it is not allowed to directly edit the cookie during server rendering. Only cookies().get() is allowed (otherwise it's the same as directly calling cookies().set() in Server Components).

This ensures that server rendering doesn't cause side effects and the result can be properly cached.

Would you be able to elaborate on that? How else could we manage state using cookies. This is my use case:

• If user has not set organisationID, we retrieve all organisations that the user is a part of and save the first organisation we find.
• If user has a saved organisationID, we have to check if the user is still a part of this organisation. If the user is not part of this organisation anymore, remove organisationID and check if the user has other organisations available. If an organisation is available, set the first one as active, otherwise redirect to 401.

As you can see there is a lot of getting and setting of this ID involved. How else could I implement this, maybe without using cookies?

-- EDIT

I should add that I would like to (serverSide) fetch data using this variable as a filter, so moving this to a client component would not be a fix.

[wkd-kapsule]

I have the same problem. How can we set cookies other than in the middleware? Can someone show an example on how to set a cookie from a route handler as said possible in the docs? This became a life-or-death matter to me, I've been stuck for 2 days trying to figure out how I can manage to create a simple cookie...

[0-don]

I understand that it's not intended to use cookies like that, but I would want to take the risk of not having any caching for that layout because it's a very useful functionality.

[AnasSafi]

The only workaround that worked for me was to call the server function inside useEffect as shown below:

useEffect(() => {
    deleteCookie().then();
}, []);

[Rykuno]

I ran into this exact same issue. Its comical how managing cookies has become such a complex issue now. So in my Auth API route or Server Function, I cannot invalidate a session without performing a work around for something as simple as removing a cookie? On the server????

[fuma-nama]

Shuding has explained above. If you are trying to modify the cookies in a server component, it won't be working, and this behavior is expected.

Secondly, you can't call a server action in RSC because it's just a regular function on the server side. The server action must be invoked by the client in order to work. (the workaround mentioned by @AnasSafi)

[AnasSafi]

Shuding has explained above. If you are trying to modify the cookies in a server component, it won't be working, and this behavior is expected.

Secondly, you can't call a server action in RSC because it's just a regular function on the server side. The server action must be invoked by the client in order to work. (the workaround mentioned by @AnasSafi)

In my code, I pass the action from the server component to the client component, and then I use a workaround. It works for me and my project is now in production. I know this is not perfect, but I couldn't go to production without this workaround.

[marcelfahle]

What @SonMooSans and @AnasSafi said. To me the most important part of the docs, and I think this is where people get tripped up, is the Invocation part. You can't just call them like any other function, because then it's just a regular old function, as @SonMooSans said. Server Actions create an API route in the background, and the invocation is basically a POST request to that route, that's why you can't just call it like any old function, at least in server components.
I hope that helps!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.