#Server Component

1 messages · Page 1 of 1 (latest)

wispy oar
#

so i have am using two cookies refreshtoken and access token both store jwt so when i fetch from a express protected route and as i am not using client component i have to add both cookies to my request i did that i can access my route till my access token is valid but after its gets expired i have a axios interceptor set in place to that use refreshtoken to regen access token but it seems my refresh token is not being sended only access token is goin but i have added both to my cookies header

terse terraceBOT
#

Hi @wispy oar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your issue—where only one cookie (typically the last one) is sent in the request header when using Axios in a Next.js Server Component or middleware—is a known problem, especially with Next.js 15 and Axios. The root cause is that Axios does not handle multiple Set-Cookie headers correctly in this context; it only sends the last cookie, even if you set both access and refresh tokens in the header.

This behavior has been observed and documented by others. For example, in Next.js 15, when making requests from middleware using Axios, only the last Set-Cookie header is received, while fetch works as expected and sends all cookies. Downgrading to Next.js 14 resolves the issue, or switching from Axios to fetch is a reliable workaround in Next.js 15.1.x and above. Here’s a summary from a relevant issue:

when doing request from middleware via Axios in NextJS 15, Set-Cookie are incorrect, only received last out of 5 cookies in a request
when doing request from middleware via Fetch in NextJS 15, Set-Cookie are correct
Downgrading to NextJS 14 and using Axios/Fetch, Set-Cookie are correct
Only workaround for now to either downgrade to next 14.2.22, or avoid using axios in favor of fetch for next 15.1.3
NextJS 15/Axios incompatibility has incomplete Set-Cookies header

Additionally, another user confirmed that changing the order of setting cookies on the backend only changes which single cookie is received, not that both are sent.

What you should do:

#
  • If you must use Axios, consider downgrading to Next.js 14.
  • The recommended solution is to use fetch instead of Axios for server-side requests in Next.js 15+ when you need to handle multiple cookies.
  • Always ensure you are setting cookies in a Route Handler or Server Action, not directly in a Server Component, as mutation is not allowed there and will throw an error. You can only read cookies in Server Components, not set them.
    Understanding Cookie Behavior in Server Components

Summary:
This is a limitation of Axios with Next.js 15 middleware/server context. Use fetch for these requests to ensure both access and refresh tokens are sent and received as cookies.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wispy oar Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wispy oar
#

@terse terrace o if i use fetch and i send both the cookies lets say my access token gets expried then would my axios intecreptor work with it to refresh access token

terse terraceBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

If you use fetch to send both cookies (access token and refresh token) from your Next.js Server Component or middleware, the cookies will be sent correctly to your backend, as fetch handles multiple cookies properly in this context. However, regarding the use of an Axios interceptor to refresh the access token:

  • The main issue is not with the interceptor logic itself, but with how cookies are handled in the server environment. Axios, when used in Next.js middleware or server components, does not always handle multiple Set-Cookie headers correctly—only the last cookie may be sent or received. This means that if you rely on Axios to send both cookies, you may run into issues where only one is sent, which can break your refresh logic. This problem does not occur with fetch, which handles multiple cookies as expected in Next.js 15+ middleware/server context NextJS 15/Axios incompatibility has incomplete Set-Cookies header.

  • If you switch your server-side requests to use fetch (instead of Axios), your refresh logic should work as long as your backend expects both cookies and your refresh endpoint is implemented correctly.

  • If you are using Axios interceptors on the client side (browser), and the cookies are set correctly in the browser, the interceptor will work as expected because the browser manages cookies and sends them with requests automatically.

  • On the server side, if you use fetch and manually set the Cookie header with both tokens, your refresh logic should work, but you should avoid using Axios for this purpose in Next.js 15+ due to the Set-Cookie header limitation.

#

Summary:
If you use fetch on the server to send both cookies, your refresh logic (even if implemented with Axios interceptors on the client) will work, provided the cookies are present and valid. The key is to avoid Axios for server-side requests in Next.js 15+ when handling multiple cookies, as it does not handle them correctly NextJS 15/Axios incompatibility has incomplete Set-Cookies header.

If you need to refresh the access token on the server, do it with fetch, not Axios. On the client, Axios interceptors will work as long as the browser has the correct cookies.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: