CODEWITHSUNDEEP
next.jsnext.js13
gndy Br
gndy Br

Reputation: 121

Next.js 13 Cookie value not retrieved from Route Handler

I am currently trying to request and receive a cookie value to test the route handler in Next.js 13, but an error occurs.

Even though cookies are normally present in the network window and application, cookies are not retrieved from the Route Handler.

what is the problem ?

export default async function Home() {
  const cookieStore = cookies();
  const accessTokenObj = cookieStore.get("accessToken");
  const refreshTokenObj = cookieStore.get("refreshToken");
  const accessToken = accessTokenObj?.value;
  const refreshToken = refreshTokenObj?.value;

  // it works well
  console.log("Page Component refreshToken : ", refreshToken);
  const getTestMessage = await fetch("http://localhost:3000/api/test");

  const data = await getTestMessage.json();

  console.log("getTestMessage : ", data);

export async function GET(request: NextRequest) {
  const cookieStore = cookies();
  const accessTokenObj = cookieStore.get("accessToken");
  const refreshTokenObj = cookieStore.get("refreshToken");

  // it doesn't works
  console.log("refreshToken : ", refreshTokenObj);
  const accessToken = accessTokenObj?.value;
  const refreshToken = refreshTokenObj?.value;

  return NextResponse.json({ refreshToken: refreshToken });
}

enter image description here

enter image description here

Upvotes: 1

Views: 2100

Answers (2)

AlnEstrd
AlnEstrd

Reputation: 11

To include cookies in Next 13 server-side fetch:

Read the request cookies with the cookies function

Add Cookie header to the server-side fetch request

import { cookies } from "next/headers";

async function getData() {
  const response = await fetch(process.env.API_ENDPOINT, {
    headers: { Cookie: cookies().toString() },
  });
  return await response.json();
}

Upvotes: 1

Ron McCranie
Ron McCranie

Reputation: 144

I was able to replicate this on my machine using this code:

/app/api/test/route.ts

'use server'

import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'

export async function GET(request: NextRequest) {
  const cookieStore = cookies();
  const accessTokenObj = cookieStore.get("accessToken");
  const refreshTokenObj = cookieStore.get("refreshToken");

  // it doesn't works
  console.log("refreshToken : ", refreshTokenObj);
  const accessToken = accessTokenObj?.value;
  const refreshToken = refreshTokenObj?.value;

  return NextResponse.json({ refreshToken: refreshToken });
}

Make sure to update your next.config.js to enable the experimental 'use server'.

experimental: {
    serverActions: true,
  },

for example:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

In your front-end component, you have to pass the cookie values. I'm not sure why, but for some reason the Nextjs fetch is not sending the cookie data by default.

  const getTestMessage = await fetch("http://localhost:3000/api/test",
    {
      cache: 'no-store',
      headers: { cookie: `accessToken=${accessToken}; refreshToken=${refreshToken}` }
    });

Upvotes: 0

Related Questions