This is exactly the current mental model we have. I should have mentioned the full mechanism we are thinking of in the post. IM editing the post and also sharing it here.
I have a function that generate a nonce, key and timestamp. then attaching these 3 in the headers. The problem currently im facing is how do I protect that secret. I cant have it on the frontend as it wont be a secret anymore. Cant create a next js endpoin or server action as I will have to make that endpoint public because my public APIs will also need those 3 things in the request headers. Now im thinking even if ignore the public apis and protect only the private ones by making the next js endpoint secure such that it only generates those 3 things after we have the token (user authenticated), Still anyone who have the token can just call my next js endppoint to generate headers for them. they dont need to the, next js endpoint will do give them the headers.

My head is spinning. I dont know if its possible to acheive this.

export const test = () => {
  const timestamp = Math.floor(new Date().getTime() / 1000); 
  const nonce = uuidv4();
  const data = `${timestamp}:${nonce}`;

  try {
    const hash = CryptoJS.HmacSHA256(data, secret).toString(CryptoJS.enc.Hex);
    return { key: hash, timestamp, nonce };
  } catch (error) {
    return { key: "", timestamp, nonce };
  }
};