Next.js Discord

Discord Forum

Next JS Server component not including cookie in fetch request

Unanswered
Cuban Crocodile posted this in #help-forum
Open in Discord
Cuban CrocodileOP
I am attempting to send an authenticated fetch request in a server component to load data needed for some of my components. I am using supabase for auth and supabase sets a cookie. I have used the next/headers cookie functionality to ensure that the cookie is present on the server component (which it is) however, when I send the following request

const resp = await fetch(`${process.env.BASE_URL}/api/tasks`, {
    credentials: "include",
  });


The cookie is not included. I feel like I must have a misunderstanding somewhere. Why would the cookie not attach to the request?

Edit: I tested with a client component and everything works as expected. Why are server components breaking this?

35 Replies

Arboreal ant
Client components run on the users browser, which automatically includes the cookies.
In your server components you'll need to do something like this:

const reqHeaders = new Headers();

const reqCookies = cookies();

reqHeaders.set('cookie', reqCookies.toString());

const resp = await fetch(`${process.env.BASE_URL}/api/tasks`, {
    headers: reqHeaders,
    credentials: "include", //  not sure if credentials still needed server side?
  });


This is because the server doesn't have it's own cookies locally, so you need to extract them from the incoming request and attach it to the outgoing request. Bit annoying, but it's manageable.
Cuban CrocodileOP
I actually just started down this path from reading about request context in Next JS 13 so, this confirms my suspicion. Thank you so much!
Also agreed this is a bit annoying hopefully this can be improved in the future.
const cookieStore = cookies();
  const authCookie = cookieStore.get("sb-projectid-auth-token");
  const resp = await fetch("http://localhost:3000/api/tasks", {
    headers: {
      cookie: `${authCookie?.name}=${authCookie?.value}`,
    },
  });
Ended up with this
@Cuban Crocodile Ended up with this
Arboreal ant
Awesome looks good 🙂 glad you got it sorted.
Gharial
@Gharial Hello, I am trying to get cookies in my server coponents, it works fine when the server api (node js) on localhost, however it will be empty when i connect it to the production server (depolyed on render), any solution? Tank you!
Arboreal ant
Is your next server and node server running on the same domain? If you check the cookies on the browser dev tools are they there? Do they get sent from the browser to the next server in the dev tools?
Also !code
Oh that doesn't work on this server. Use triple back ticks to embed code rather than screenshots
@Arboreal ant Is your next server and node server running on the same domain? If you check the cookies on the browser dev tools are they there? Do they get sent from the browser to the next server in the dev tools?
Gharial
My server is on render, and my front end is on localhost, when i check the browser, they only show when i try to make client side functions such login the appear with a red flag, so i assume they dont get sent from browser to the next js server actions
Arboreal ant
Also do you see a log with the cookie from that console log?
Arboreal ant
"My sever is on render" I don't know what that means. Are you trying to connect a frontend hosted on localhost to an api deployed on the internet?
@Arboreal ant Also do you see a log with the cookie from that console log?
Gharial
When i check the logs it is empty in the production server, can it be a problem with render platform, because it was working perfectly when the node js api was on localhost
Arboreal ant
That won't work
Cookies are (or at least should be) scoped to a specific origin domain
If you have a Facebook cookie, websites that aren't Facebook can't read it
@Arboreal ant That won't work
Gharial
even in production front end on vercel, it gives the same result, so should i try to deploy both to the same domain?
Arboreal ant
Yes
Check the origin on the cookie in the browser dev tools (assuming it gets set correctly), anything trying to access that cookie needs to be on that origin
Alternatively you could pass a jwt as a Bearer token if you must use cross site tokens. But its less secure.
@Arboreal ant Alternatively you could pass a jwt as a Bearer token if you must use cross site tokens. But its less secure.
Gharial
Here is what it shows, and then stright cleans out when i refresh.
@Arboreal ant Alternatively you could pass a jwt as a Bearer token if you must use cross site tokens. But its less secure.
Gharial
Yes, thats the problem, it is a subscription based website, so we need a better security approach
Arboreal ant
Ah it's a session cookie. Yeah you'll need to be on the same origin
Why are you trying to connect your local host app to a deployed server anyway?
@Arboreal ant Why are you trying to connect your local host app to a deployed server anyway?
Gharial
Trying to figurout the origin of the problem, because i firstly got it when i deployed teh next js to vercel,
@Arboreal ant Ah it's a session cookie. Yeah you'll need to be on the same origin
Gharial
So in that case we need the same domain right?
Arboreal ant
Yep. Same origin at least.
I.e auth.somesite.com and dashboard.somesite.com will both be able to see somesite.com cookies
Gharial
Got it! Thank you buzziebee for the assistance and your time.
Arboreal ant
No problem 🙂 glad I could help. Good luck solving the issue