setting cookie inside client component forward by router.refresh sometimes not avilable to server action

[Nader-CS]

Summary

setting cookie inside client component forward by router.refresh sometimes not avilable to server action

Additional information

i hvae this code 

'use server';

import {cookies} from 'next/headers';
import {defaultLocale} from './constants';

const baseFetch = async ({
  endPoint,
  method = 'GET',
  options = {},
  queryParams = {},
  body,
  url,
  headers = {},
}) => {
  try {
    const appCookies = await cookies();
    const publicToken = appCookies.get('token')?.value;
    const locale = appCookies.get('NEXT_LOCALE')?.value || defaultLocale;
    console.log('this is token : ', publicToken);

    const queryString = new URLSearchParams(queryParams).toString();
    const fullUrl =
      url ||
      `${process.env.NEXT_PUBLIC_API_URL}${endPoint}${
        queryString ? `?${queryString}` : ''
      }`;

    const response = await fetch(fullUrl, {
      method,
      headers: {
        ...(publicToken && {Authorization: `Bearer ${publicToken}`}),
        'Content-Type': 'application/json',
        'Accept-Language': locale,
        Accept: 'application/json',
        'User-Agent': 'Next.js Server',
        ...headers,
      },
      ...(body && {body: JSON.stringify(body)}),
      cache: 'no-store',
      ...options,
    });

    const text = await response.text();
    let json;
    try {
      json = text ? JSON.parse(text) : null;
    } catch {
      json = {error: text};
    }

    if (!response.ok) {
      return {
        ...json,
        status: response?.status,
        headers: Object.fromEntries(response.headers.entries()),
        endPoint,
      };
    }

    return {
      data: json,
      headers: Object.fromEntries(response.headers.entries()),
    };
  } catch (err) {
    return {
      error: err?.message || 'Unexpected error occurred',
    };
  }
};

export default baseFetch;

'use client';

import {generatePublicToken} from '@/services';
import {setCookie} from 'cookies-next';
import {useEffect, useState} from 'react';
import useRouter from './useRouter';
import useHandleAnalytics from './useHandleAnalytics';
import {useDispatch, useSelector} from 'react-redux';
import {getPublicToken} from '@/selectors/auth';
import {setPublicToken} from '@/slices';
import {ONE_MONTH_IN_SECONDS} from '@/lib';

const useHandlePublicToken = () => {
  const publicToken = useSelector(getPublicToken);
  const [isCreatingPublicToken, setIsCreatingPublicToKen] = useState(false);
  const dispatch = useDispatch();
  const [createPublicTokenError, setIsCreatePublicTokenError] = useState(null);
  const router = useRouter();
  const {logException} = useHandleAnalytics();

  const onCreatePublicToken = async () => {
    setIsCreatingPublicToKen(true);
    setIsCreatePublicTokenError(null);

    const publicTokenRequest = await generatePublicToken();
    if (publicTokenRequest?.data?.access_token) {
      dispatch(setPublicToken(publicTokenRequest?.data?.access_token));
      setCookie('token', publicTokenRequest?.data?.access_token, {
        maxAge: ONE_MONTH_IN_SECONDS,
      });
      router.refresh();
    } else {
      setIsCreatePublicTokenError({
        error: publicTokenRequest?.error || publicTokenRequest?.errors?.[0],
        requestId: publicTokenRequest?.headers?.['x-request-id'],
      });
      logException({
        description:
          publicTokenRequest?.error || publicTokenRequest?.errors?.[0],
        requestId: publicTokenRequest?.headers?.['x-request-id'],
        endpoint: publicTokenRequest?.endPoint,
      });
    }

    setIsCreatingPublicToKen(false);
  };

  useEffect(() => {
    if (!publicToken && !isCreatingPublicToken) {
      onCreatePublicToken();
    }
  }, [publicToken]);

  return {
    isCreatingPublicToken,
    createPublicTokenError,
    onRetry: onCreatePublicToken,
  };
};
export default useHandlePublicToken;

'use server';

import baseFetch from '@/lib/baseFetch';

export const generatePublicToken = async () => {
  const response = await baseFetch({
    endPoint: `oauth/token`,
    method: 'POST',
    body: {
      grant_type: 'client_credentials',
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
    },
  });
  return response;
};

for some users in mixpanel dashboard i can see sometimes const publicToken = appCookies.get('token')?.value; does not exist

Example

No response

[Nader-CS]

any update?

[KaloudasDev]

Hello! This is a common race condition issue between client-side cookie setting and server action execution. The problem occurs because router.refresh() doesn't guarantee immediate cookie propagation to subsequent server actions. Here are the solutions:

Solution 1: Implement Cookie Verification and Retry Logic

const baseFetch = async ({
  endPoint,
  method = 'GET',
  options = {},
  queryParams = {},
  body,
  url,
  headers = {},
  retryCount = 0
}) => {
  try {
    const appCookies = await cookies();
    let publicToken = appCookies.get('token')?.value;
    
    if (!publicToken && retryCount < 2) {
      await new Promise(resolve => setTimeout(resolve, 100));
      return baseFetch({
        endPoint,
        method,
        options,
        queryParams,
        body,
        url,
        headers,
        retryCount: retryCount + 1
      });
    }

    const locale = appCookies.get('NEXT_LOCALE')?.value || defaultLocale;
    console.log('this is token : ', publicToken);

  } catch (err) {
    return {
      error: err?.message || 'Unexpected error occurred',
    };
  }
};

Solution 2: Use Headers Instead of Cookies for Authentication

const onCreatePublicToken = async () => {
  setIsCreatingPublicToKen(true);
  setIsCreatePublicTokenError(null);

  const publicTokenRequest = await generatePublicToken();
  if (publicTokenRequest?.data?.access_token) {
    dispatch(setPublicToken(publicTokenRequest?.data?.access_token));
    setCookie('token', publicTokenRequest?.data?.access_token, {
      maxAge: ONE_MONTH_IN_SECONDS,
    });
    
    await makeAuthenticatedRequest(publicTokenRequest.data.access_token);
    router.refresh();
  }
};

Solution 3: Ensure Proper Cookie Configuration

setCookie('token', publicTokenRequest?.data?.access_token, {
  maxAge: ONE_MONTH_IN_SECONDS,
  path: '/',
  sameSite: 'lax',
  secure: process.env.NODE_ENV === 'production',
});

Solution 4: Add Server-Side Token Validation

const appCookies = await cookies();
let publicToken = appCookies.get('token')?.value;

if (!publicToken) {
  console.warn('Token missing in server action, generating new one');
  const newToken = await generateServerSideToken();
  if (newToken) {
    publicToken = newToken;
  }
}

The most reliable approach is Solution 1 with retry logic, as it accounts for the timing issue between client-side cookie setting and server action execution.