Theo's Typesafe Cult•4d ago

Http cookies in next

Hi everyone! I'm trying to create a server-side component in Next.js that makes an API request and passes the data to child components. However, I'm running into an issue: The endpoint I'm making the request to is protected and requires authentication via HTTP-only cookies. When I make the request server-side, I get a 422 status code with an error saying there's no cookie. But when I add "use client" at the top of my file and run the request on the client side, it works, and I get the data successfully. I really want to understand these concepts. How can I correctly send HTTP-only cookies in a server-side component to authenticate my request? Any help would be greatly appreciated! Thanks in advance! 😊

7 Replies

peculiarnewbie•4d ago

Cookies are stored on the client (user's browsers) and they are sent with the requests. Most likely what's happening when you use server component here, is that the initial request to the server has the cookies, but then your component is run on said server and it makes a request to the api, but with no context of the request from the user. Meanwhile when you use client, the component make the request to the api from the client, therefore it will send the cookies with it So there's 2 solution to this: 1. You can manually get the cookies from the initial request, then forward those cookies when the server component make the request to the api 2. You can make separate auth on the api. Because generally you can trust requests coming from your own server, you can remove the cookie requirement if you know said request is coming from the server Wait i just realized something, do you control the api too? If not this is gonna be a different story

AshiBoyManOP•4d ago

No, I don't, but here's the thing—I’m already authenticated and have the token stored in the browser. However, I can't access it because it's HTTP-only. I'm trying this in my server component:

import { cookies } from "next/headers";

const cookieStore = cookies();
console.log(cookieStore.getAll());

import { cookies } from "next/headers";

const cookieStore = cookies();
console.log(cookieStore.getAll());

but it doesn’t include the cookie I need. If I make a request to an API that doesn’t require a cookie, it works fine. But for the protected endpoint, the request fails.

peculiarnewbie•4d ago

Yeah unfortunately the way http-only cookies work is that the browser will only send those cookies to the original source. So in this case, the browser has the cookies, but it knows that it comes from the api. So when the browser make a request to your next.js app, it will not send those cookies. But when you make the component client only, you're sending the request to the api from the browser, so the browser will send those cookies along with that request I don't know if there's a feasible way to keep that component as a server component without some crazy hacks like reverse proxying or something

AshiBoyManOP•4d ago

Yeah, I don't know either; maybe someone else does. Thanks for taking the time to answer! 😊

LuisLl•3d ago

What’s your Next.js version? I ask because in Next 15 cookies return a promise and need to be awaited. I would have thought you’d be able to access cookies and read them on the server as long as the page is dynamically rendered when the user requests it, since the user is requesting it from the client then the server has the cookies the user sent.

AshiBoyManOP•3d ago

my next is 14

LuisLl•3d ago

Is the page marked as dynamic? If it’s dynamic it means it has access to request-time data

Gaming

Programming

Http cookies in next

Did you find this page helpful?