How to get cookie in client and server components

[mfaridzia]

Summary

Hello, I am new to the world of App Router.

I have a Fetch API wrapper to create a new service with code like this:

import { cookies } from 'next/headers';
import { Auth } from '@auth-sdk';
import { AUTH_CLIENT_ID, AUTH_STAGE } from '@/config';
​
const auth = new Auth(AUTH_CLIENT_ID, AUTH_STAGE);

export const createService = (config: {
   baseUrl: string;
   //token: string;
   clientId: string;
   cache?: RequestCache | undefined;
   shouldIncludeAuthorization?: boolean;
}) => {

   // Get access token key
   const accessTokenKey = auth.getAccessTokenKey();
   // Get access token from cookies sent in the request
   const accessToken = cookies().get(accessTokenKey);

   const service = {
     request: async <T>(
       url: string,
       method: string,
       data: any | null = null,
       queryParams: Record<string, string> | null = null,
       cache?: RequestCache | undefined,
     ): Promise<T> => {
       const headers: Record<string, string> = {
         'X-Client-Id': config.clientId,
         'Content-Type': 'application/json',
       };

       if (config?.shouldIncludeAuthorization) {
         headers.Authorization = `Bearer ${accessToken}`;
       } else {
         headers['X-App-Token'] = accessToken;
       }

       const requestOptions: RequestInit = {
         method,
         headers,
         body: data ? JSON.stringify(data) : null,
         cache: cache || (config.cache ? config.cache : 'no-store'),
       };

       try {
         const urlWithParams = queryParams
           ? `${url}?${new URLSearchParams(queryParams).toString()}`
           : url;

         const response = await fetch(
           config.baseUrl + urlWithParams,
           requestOptions,
         );

         if (response.status === 401) {
           // Handle refresh token here
           const { accessToken } = auth.refreshToken()

           // Retry the original request with the new token
           if (config?.shouldIncludeAuthorization) {
             headers.Authorization = `Bearer ${accessToken}`;
           } else {
             headers['X-App-Token'] = accessToken;
           }
           const retryRequestOptions: RequestInit = {
             ...requestOptions,
             headers,
           };
           const retryResponse = await fetch(
             config.baseUrl + urlWithParams,
             retryRequestOptions,
           );

           return (await retryResponse.json()) as T;
         }

         if (!response.ok) {
           const errorMessage = await response.text();
           throw new Error(errorMessage);
         }

         return (await response.json()) as T;
       } catch (error) {
         throw new Error(error instanceof Error ? error.message : '');
       }
     },

     get: async <T>(
       url: string,
       queryParams?: Record<string, string> | null,
       cacheConfig?: Record<'cache', RequestCache>,
     ): Promise<T> =>
       service.request<T>(url, 'GET', null, queryParams, cacheConfig?.cache),
   };

   return service;
};

This is work well on App Router(RSC). But the problem is, coz my components don't all use server components (some use client components), I get an error regarding cookie headers(import { cookies } from 'next/headers') that can't be used in client components when i call createService wrapper in client components.

So is there a solution to this problem? Where can this createService function be used universally in RSC as well as client components? Thank You.

Additional information

• "next": "13.5.6",
• "react": "^18",

Example

No response

[icyJoseph]

Right, so you mean, that this createService function must be invoked from a client component? Because if not, you have to structure your imports/exports, so that this function is never included in client bundles.

[mfaridzia]

Yeps, createService can be used on server components and client components, depending on needs.

My example code like this:

// SERVER COMPONENTS
import { service } from '@/utils/createService/api';

export default async function Home({
  searchValue,
  page,
}: {
  searchValue: string;
  page: number;
}) {
  const LIMIT = 10;
  const { data } = await service.fetchData(
    LIMIT,
    page,
    searchValue,
  );

  console.log({data});

  return (
    /// show data from api...
  );
}

// CLIENT COMPONENTS  ============================== =============== 
/* createService cannot be used here since createService uses next/headers to read cookies */

// useFetchData.ts
export const useFetchData = () => {
  return useQuery<ResponseData, Error>({
    queryKey: ['/fetch-example'],
    queryFn: service.fetchData,
  });
};


// page.tsx
'use client'
import { service } from '@/utils/createService/api';

export default function ExampleComponent() {
  
  const {data} = useFetchData();
  console.log({data});

  return (
    /// show data from api...
  );
}

[icyJoseph]

Right, but there you are mixing concerns. This is not a very good idea, and the fact that you are running into this issue is a symptom.

You need to make sure your server code is not coupled to client code.

It is not the same API to read cookies server side, and neither are you guaranteed to read the same cookies in the browser, because they might have httpOnly set to true.

What could do, is try to parametrize, and make the cookie be a parameter, so that then the cookie extraction is a responsibility of the caller.

Another way would be to turn this into a Server Action, so that the client activates a server side function rather.

[mfaridzia]

Okay, so I can't use this reusable fetch wrapper for both server components and client components? I should separate the api calls running on this server component and client component into separate files?

[aziyatali]

I can't see any other way tho

[icyJoseph]

The problem is that cookies are not "normal" or "equal" in both environments. Cookies on the client have a very different API than on the server, and that has bubbled up to the top of your design.

[aziyatali]

You should check for middleware. It was explained in detail.

So, the way how you get cookie is

you create middleware file in the root folder as you are using nextJs > 13 version

export async function middleware(request) { const cookieName = request.cookies.get('cookieName'); }

You can check if cookie exist inside middleware by:

const isCookieExist = await request.cookies.has('somecookie');

[aziyatali]

Let's say if you use nookies, then you can set the cookie in the client-side.
In the server, you do as in the middleware.

[mfaridzia]

I've done this for page protection,

My problem now is how to set the cookie value that has been obtained to headers(Authorization) in my createService? This value will be used for requests to the backend

my code example
#57564 (reply in thread)

[samavia]

• I am experiencing the same issue, could you please share how you able to solve this probem?