Next.js Discord

Discord Forum

cookies cant be set unless in server actions or route handlers

Unanswered
Arinji posted this in #help-forum
Open in Discord
ArinjiOP
"use server";
import { cookies } from "next/headers";

export async function FormattedAuthCookie(token: string) {
  cookies().set("pb_auth", token);
}

I did add the use server thing on top, and whne i comment the cookies line the error fixes itself..

65 Replies

Clown
@Clown Click to see attachment
ArinjiOP
but its got the "use server" so it should be an action
Clown
What's the error then?
ArinjiOP
Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
thats the issue, why is it showing that error lol
the flow is like this
i have a page which i call from
const pb = await initPocketBase();


import "server-only";

import { cookies } from "next/headers";
import Pocketbase from "pocketbase";
import { FormattedAuthCookie } from "./functions";

export async function initPocketBase() {
  const pb = new Pocketbase(process.env.NEXT_PUBLIC_POCKETBASE_URL);

  const authCookie = cookies().get("pb_auth")?.value;

  pb.authStore.loadFromCookie(authCookie!);

  try {
    pb.authStore.isValid && (await pb.collection("users").authRefresh());
  } catch (_) {
    pb.authStore.clear();
  }

  pb.authStore.onChange(() => {
    FormattedAuthCookie(pb.authStore.exportToCookie());
  });

  try {
    pb.authStore.isValid && (await pb.collection("users").authRefresh());
  } catch (_) {
    pb.authStore.clear();
  }

  return pb;
}
@Clown Click to see attachment
ArinjiOP
will a page calling the server action not work as well?
Clown
Should work
ArinjiOP
ahhhh im so confused with this error lol
Clown
Im not sure if its because of some weird bug or some specific reason its not working with a event
@Clown Im not sure if its because of some weird bug or some specific reason its not working with a event
ArinjiOP
ikr.... uh im thinking of just making the set part an api route
cause server actions are still experimental
so maybe thats the issue?
Clown
You can try it
Im gonna suggest some weird thing but maybe... maybe... try adding a 'use server' inside the top of onChange()
ArinjiOP
kk one sec
Clown
:lolsob: :lolsob:
ArinjiOP
"use server"
  pb.authStore.onChange(() => {
    FormattedAuthCookie(pb.authStore.exportToCookie());
  });
this or inside the function?
Clown
No no, inside
ArinjiOP
pb.authStore.onChange(() => {
"use server";
FormattedAuthCookie(pb.authStore.exportToCookie());
});
@Clown No no, inside
ArinjiOP
⨯ unhandledRejection: TypeError: Cannot read properties of undefined (reading 'token')
Clown
Check if pb.authStore.exportToCookie() is undefined
Its supposed to return a token right?
ArinjiOP
ye
it dosent even log out :/
weird
ArinjiOP
removing the "use server" makes it log out again...
@Giant panda The way you call `FormattedAuthCookies` implies it doesn't have to a be a server action. So don't do it.
ArinjiOP
oh, so make FormattedAuthCookies not have the "use server"?
Giant panda
Correct
@Giant panda Correct
ArinjiOP
still ocurring :/
the only 2 places calling the function as well
Giant panda
I assume you are calling initPocketBase from your page? I haven't worked with manually set cookies, so the following is speculation: I can imagine the possibility that you cannot set cookies from the server as part of a GET request to a page.
ArinjiOP
ye im calling it from a page
so yeet it into an api?
your logic does make sense, cause doing it from a page is like a GET request
Giant panda
As I was saying, it's just a gut feeling and I'd have to test it out myself, but you should try out other options to see whether you can make it work that way.
ArinjiOP
i have no clue what other options exist lol, my only guess is the server actions dont like how im calling stuff
Giant panda
Since you removed the use server directive you don't have actions anymore
ArinjiOP
btw @Clown the use server blocks every console log.... for some reason?
riský
You could just use normal API routes
@Giant panda Since you removed the `use server` directive you don't have actions anymore
ArinjiOP
the initPocketbase still has it.. remove that as well?
Giant panda
Yeah
ArinjiOP
kk
Giant panda
It seems you don't know what server actions are. They are glorified API endpoints/route handlers that are called from the client-side, nothing else. You don't call a server action server-side.
And to add to that use server is not the opposite of use client.
You only use it when having actual server actions.
@Giant panda And to add to that `use server` is not the opposite of `use client`.
ArinjiOP
ye ik that, i just had the use server since i needed to access cookies
also removing it removes the error... but so does the cookies lol
wait my cookie got deleted, lemme re add it
Giant panda
I just got confirmation that cookies cannot be set as part of server component rendering just like I assumed.
ArinjiOP
uhhh elaborate pls :D
Giant panda
Which puts the "Good to know" into context.
ArinjiOP
oh so since we called it from a page.. we cant set cookies with a server action
Giant panda
cookies().set(...) only works in route handlers and server actions, basically whenever the client interacts with the exposed APIs and not the implicit server components.
ArinjiOP
sooo yeet the set cookie part into a route handler right
Giant panda
Which means you'd have to share in more detail what you are attempting in the first place to get help on figuring out a different approach of dealing with it.
ArinjiOP
oh i have a repo, one sec lemme revert all theese changes
Giant panda
You'd probably have to adjust the logic as you can only set a cookie within the middleware as I was reminded. Otherwise calling the route handler from server-side code would set the cookie for the server.
It's a bit unergonomic.
i removed the stuff we added in this thread