Problem getting cookie in API route

[gabrielgrs]

Summary

I'm implementing an authentication flow where I can save a cookie, see it in storage and manipulate it through a server component.
However, I'm having trouble getting this cookie in a route API, all my attempts return an undefined or null.

The code to set cookie

(Using cookies from next/headers)

Showing stored cookie

The result in API Route

Working in server component

Additional information

No response

Example

No response

[devjiwonchoi]

Could you provide a repro? The GET handler should be able to get the token cookie.

[gabrielgrs]

I want to get the cookie via /api/me and I always got undefined.

[devjiwonchoi]

Referencing username fr4s0r from Discord:

this is one of the reasons why consuming your own route handlers in a server component is anti-pattern
if it's absolutely necessary to consume your own route handler in a server component, you could try setting a header that is sent to the route handler with the same cookie value and in the route handler you check for either cookie or header

because when you consume your own endpoint from a server component and use cookies(), it's looking for cookies of the server component request
as far as the route handler is concerned, the browser request doesn't exist when the request comes from the server component
so you either need to pass it as say a header or just not do this at all and call the functions you need directly

tldr:
When you try to use cookies() within route handlers, it looks for cookies specific to the server component's request, not the original browser request. Therefore do not use this method in order to get existing cookies via route handler.

[gabrielgrs]

I find it unusual for this to work on the pages version and not the app version, while next auth lib can manages to capture this session. But it really seems like a security issue to me.

Thank you very much! :)

[tim-hub]

Referencing username fr4s0r from Discord:

this is one of the reasons why consuming your own route handlers in a server component is anti-pattern
if it's absolutely necessary to consume your own route handler in a server component, you could try setting a header that is sent to the route handler with the same cookie value and in the route handler you check for either cookie or header

because when you consume your own endpoint from a server component and use cookies(), it's looking for cookies of the server component request
as far as the route handler is concerned, the browser request doesn't exist when the request comes from the server component
so you either need to pass it as say a header or just not do this at all and call the functions you need directly

tldr: When you try to use cookies() within route handlers, it looks for cookies specific to the server component's request, not the original browser request. Therefore do not use this method in order to get existing cookies via route handler.

I found this make sense.

[tim-hub]

Referencing username fr4s0r from Discord:

this is one of the reasons why consuming your own route handlers in a server component is anti-pattern
if it's absolutely necessary to consume your own route handler in a server component, you could try setting a header that is sent to the route handler with the same cookie value and in the route handler you check for either cookie or header

because when you consume your own endpoint from a server component and use cookies(), it's looking for cookies of the server component request
as far as the route handler is concerned, the browser request doesn't exist when the request comes from the server component
so you either need to pass it as say a header or just not do this at all and call the functions you need directly

tldr: When you try to use cookies() within route handlers, it looks for cookies specific to the server component's request, not the original browser request. Therefore do not use this method in order to get existing cookies via route handler.

I found this make sense.

I would suggest nextjs update the documentation to mention this part, so that it is less confusing.

[Panhara28]

I think the cookies().get('token') is getting from the client (browser cookie jaw).

[devjiwonchoi]

As I stated earlier the cookies inside the Route Handlers read off from the request, not client side. Lmk if I'm wrong!

[Panhara28]

When utilizing a Server Action and configuring the cookie, it is pertinent to determine the appropriate location for setting the cookie: Server, Client, or Both?
Code Ablow

import { LOGIN_MUTATION } from "@/graphql";
import axios, { AxiosError } from "axios";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { clientRequireToken } from "../apollo/client";

export default function Page() {
  async function create(formData: FormData) {
    "use server";

    const payload = {
      username: formData.get("username"),
      password: formData.get("password"),
    };

    const client = clientRequireToken("");

    const {
      data: { loginUser },
    } = await client.mutate({
      mutation: LOGIN_MUTATION,
      variables: {
        input: {
          ...payload,
        },
      },
    });
    if (loginUser) {
      cookies().set("token", loginUser, {
        secure: true,
        httpOnly: true,
        maxAge: 5000000,
      });
      redirect("/application");
    }
  }

  return (
    <form action={create}>
      <input name="username" type="text" placeholder="Username" />
      <br />
      <input name="password" type="password" placeholder="Password" />
      <br />
      <button type="submit">Login</button>
    </form>
  );
}

[kamit6337]

cookies().getAll() does not work in Route Handler, IF AND ONLY you make request from the SERVER COMPONENT.
If you make request to route Handler from CLIENT COMPONENT, you will definitely get cookies by cookies().getAll() .

However, if you want to use SERVER COMPONENT then no need to make request to route handler, you can get directly cookies() itself, make use of this cookies to do whatever authentication you need to do.

I also have the same problem, this is how i am able to solve my problem

[ananducherakkal]

Thanks... That makes sense. But is there any way we can set cookies from SERVER COMPONENT.
When setting from server components it shows error to use Route handler to set cookies but in Route handler we can only modify cookies from client side.

[KoolP]

@ananducherakkal so you mean we can set cookies for example with response.cookies.set toward client component but not server component. Here it seems possible: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options Tho there is a good to know: Good to know: HTTP does not allow setting cookies after streaming starts, so you must use .set() in a Server Action or Route Handler. so is it a server action that has to be used, that feels wrong tho to use server-action in server comp🤔 But is it not the fact that a cookie should be changed on the client, it lives on a client so it needs to be set on a client?

[KoolP]

@kamit6337 does this mean we can use cookies().getAll() but not not const cookieStore = cookies()
const theme = cookieStore.get('theme') I seem to have that problem in a client component parented by a server page.
EDIT - might have been some flakyness in my local dev, seems to work now with cookieStore.get('theme')

[ananducherakkal]

@KoolP Sorry for late reply. The only way I have found to set cookies from server component is using the middleware. Even if we use server action from server component it will throw the same error.

In my use case I was trying to update access token based on refresh token on load of the application. Using middleware I was able to update the access token on server component.

[YogiDhingani27]

@KoolP Sorry for late reply. The only way I have found to set cookies from server component is using the middleware. Even if we use server action from server component it will throw the same error.

In my use case I was trying to update access token based on refresh token on load of the application. Using middleware I was able to update the access token on server component.

@ananducherakkal

Can you share how you have implemented the refresh token mechanism using middleware?

[mohasinakonda]

I found one hacky solution which is works for me
Though cookie is working on the server component I grave cookie and than pass it to the request headers

Server action

 const cookieStore = await cookies()
  const sessionId = cookieStore.get('cart_session')?.value
  const response = await fetch(`/api/cart`, {
    headers: {
      'Cookie': sessionId ?? ''
    }
  })

now route handler I can get from header

export const GET = async (request: NextRequest) => {
  const headerList = request.headers
  const sessionId= headerList.get('cookie')
}