Cookies available on RSC are not available to the middleware

[rawnly]

I'm writing a proxy endpoint to inject the jwt on in the requests sent to our API. Atm the jwt is stored inside a cookie, but even tho this is available via cookies(), when I fetch the proxy (which is inside the middleware) I cannot access any cookie via request.cookie.getAll() (it returns [])

The request is sent via fetch as the following

// inside my RSC /page.tsx
console.log( cookies().getAll() ) // prints all the cookies
const userRes = await fetch(process.env.NEXT_PUBLIC_URL + '/v1/users/me', {
  credentials: 'include', // send cookies?
});

Proxy code:

/** 
* proxy the given request to the API
**/
async function proxy(request: NextRequest) {
    const url = new URL(process.env.API_URL);
    url.pathname = req.nextUrl.pathname

    const raw_tokens = req.cookies.get('auth-tokens-' + process.env.NODE_ENV)?.value;
    const tokens = LoginResponse.decode(JSON.parse(raw_tokens ?? '{}'));

     console.log(req.cookies.getAll()); // prints []

    if (isLeft(tokens)) {
      console.debug('Invalid tokens', PathReporter.report(tokens));


      // let the api handle the auth error
      return NextResponse.rewrite(url);
    }

    const TOKEN_LEEWAY = 300; // 5m
    const TIMESTAMP = Date.now();

    let accessToken = tokens.right.accessToken;
    const exp = parseInt((tokens.right as any).exp) * 1000;
    const isExpired = exp < TIMESTAMP + TOKEN_LEEWAY;

    // check if the accessToken is expired, if so try to refresh
    if (isExpired) {
      // handle expiration
    }

    return NextResponse.rewrite(url.href, {
      headers: {
        authorization: `Bearer ${accessToken}`,
      },
    });
}

EDIT: by adding headers: headers() to the fetch request seems to fix this behavior, but (at least for me) this feels wrong.

Am I doing something wrong? (maybe with the credentials stuff?)

[tobidemski]

Sounds like the same problem I have right now. Discussion: #49252

[rawnly]

Uh i missed that! Yeah is the same, I'm wondering if it's worth opening an issue

[rawnly]

I got into this while replacing axios with fetch.
In axios we have an interceptor that handles token injection and rotations. Now using fetch with the proxy seems buggy. If you need a temporary fix you can do the following:

import { headers } from 'next/server'

await fetch(url, { 
  credentials: 'same-origin',
  headers: headers(),
})

[tobidemski]

Ya my workaround is to retrive the "set-cookie" from the headers. After that I parse the cookies and search for the cookie name and retrieve its value from it to use it in my serverside rendering

[rawnly]

in my case req.headers returns an empty object :/ seems like nothing is sent from the rsc other than the request itself

[tobidemski]

I found a solution how I can work with cookies which are sent via the middleware.

Solution:

middleware.ts

import { NextRequest, NextResponse } from "next/server";
import { v4 as uuidv4 } from "uuid";

export function contactMiddleware(
  request: NextRequest,
  response: NextResponse
) {
  if (request.nextUrl.pathname == "/contact") {
    const csrfToken = uuidv4();

    const cookieOptions = {
      name: "csrfToken",
      value: csrfToken,
      httpOnly: true,
      maxAge: 0,
      secure: true,
    };

    response.cookies.set(cookieOptions);

    return response;
  }
}

page.tsx

import { ResponseCookies } from "next/dist/compiled/@edge-runtime/cookies";
import { headers } from "next/headers";

export default function Page(props: any) {
  const headersStore = headers();
  const responseCookies = new ResponseCookies(headersStore as Headers);

  const csrfTokenCookie = responseCookies.get("csrfToken");
  const csrfToken = csrfTokenCookie ? csrfTokenCookie.value ?? "" : "";

  return (<>{csrfToken}</>
  );
}

[jatinder-singh221]

middleware.ts

else if (!access && refresh && device_id && !is_limited_session) {
const formData = new FormData();
formData.append('device_id', device_id);
const api = await apiRequest('/session-refresh/', 'POST', formData, '_refresh_token');
const response = NextResponse.next();
const apiRes = await api.json();
switch (api.status) {
    case 200:
        const { access, refresh } = apiRes.detail;
        response.cookies.set('_access_token', access, {
            maxAge: OneDay, httpOnly: true, sameSite: 'strict'
        });

        response.cookies.set('_refresh_token', refresh, {
            maxAge: TenDays, httpOnly: true, sameSite: 'strict'
        });
        return response;

    case 403:
        response.cookies.delete('_refresh_token');
        response.cookies.delete('_device_id');
        break;

    case 400:
        if (isSecuredRoute) {
            const url = new URL('/login', req.url);
            return NextResponse.redirect(url);
        }
        return response;

    default:
        break;
}

}

app/layout.tsx

const  token  =  getCookies("_access_token")

getCookie

export  const  getCookies  = (name:  string) => {

const  cookiesStore  =  cookies()

if (cookiesStore.has(name))

return  cookiesStore.get(name)?.value

}

still unable to get cookie in layout.tsx that i updated in middleware.ts