How to set cookies from server components via route handlers?

[danieljcksn]

Hey Next.js devs, I've run into an issue and wanted to see if anyone else has insight or experience with this.

The Situation:

1. I have a sign-in request in a client component, which sets HTTP-only secure cookies successfully.
2. I then have a Server Component in my Next.js app that makes a request to a Route Handler.
3. When this Server Component makes the request, I need to read those HTTP-only cookies and attach them as headers for subsequent requests.
4. The problem: The cookie doesn't show up in the browser when the Server Component makes the request, as the Set-Cookie header doesn't get sent to the client. However, if I make the same request directly from the browser (e.g., typing the URL in the address bar or using fetch in a client component), the cookie is set as expected.
5. An additional challenge: When the cookies are updated as part of my refresh/access token cycle, they can't be set in the browser because the request is made from a Server Component, preventing the Set-Cookie header from being part of the response that the browser receives.

Has Anyone Else Run Into This?

Is this expected behavior, or am I missing something? If this is normal, how should cookies be managed when requests are made from Server Components? Are there any best practices or workarounds for handling HTTP-only cookies, reading them, and ensuring they can be updated properly in these cases?

Steps to Reproduce:

1. Route Handler (app/api/set-cookie/route.ts)

   import { cookies } from 'next/headers'
   import { NextResponse } from 'next/server'
   
   export async function GET() {
     const cookieStore = cookies()
     cookieStore.set('my-cookie', 'cookie-value', {
       httpOnly: true,
       path: '/',
     })
   
     return NextResponse.json({ message: 'Cookie set successfully' })
   }

2. Server Component (app/page.tsx)

   import { cookies } from 'next/headers'
   
   async function setCookie() {
     const res = await fetch('http://localhost:3000/api/set-cookie', { cache: 'no-store' })
     return res.json()
   }
   
   export default async function Page() {
     const result = await setCookie()
     const cookieStore = cookies()
     const cookie = cookieStore.get('my-cookie')
   
     return (
       <div>
         <h1>Cookie Example</h1>
         <p>Route Handler Response: {result.message}</p>
         <p>Cookie Value (server-side): {cookie ? cookie.value : 'Not set'}</p>
       </div>
     )
   }

What's Happening:

When I open this server component, the cookie isn't set. But if I access the route handler directly (e.g., http://localhost:3000/api/set-cookie) or use a client-side request, the cookie gets set as expected.

---

I'd love to hear if anyone has experience with this or knows of a good solution. Thanks!

[ahmedpyarali2]

I am new to Next as well and running into the same problem. I have a page that renders both a server component and a client component. Both of my components need to update the cookies. If I call the route handler from a client component, the cookies are set and visible on the browser, however, when calling the route handler from a sever component, it gets lost in the middle. I am not sure if this is the right way to do it or not, but would really appreciate any help here.