I’m working with Next.js and using JWT tokens for authentication. After logging in, I set the token in cookies. It works perfectly on localhost, but after deployment on the server, it’s not functioning as expected. It works fine on the domain when using “use client,” but not with “use server.”

Any suggestions?

Is there any implementation from backend just like cors?

i m sharing code with dummy api url

Working code in localstorage

"use server";

import { cookies } from "next/headers";
import Details from "../Account-Closure/details";

const fetchDummyDataWithToken = async () => {
  try {
    const cookieStore = cookies(); // Direct call without await
    const token = (await cookieStore).get("token")?.value;

    if (!token) {
      throw new Error("Token not found in cookies");
    }

    const response = await fetch(
      "https://api.co.in",
      {
        method: "GET",
        headers: {
          Authorization: Bearer ${token}, 
          "Content-Type": "application/json", // Optional: add content type
        },
      }
    );

    if (!response.ok) {
      throw new Error(Failed to fetch data. Status: ${response.status});
    }

    return response.json();
  } catch (error) {
    console.error("Error fetching data:", error);
    return null;
  }
};

const DummyApiPage = async () => {
  const apiResponse = await fetchDummyDataWithToken();

  if (!apiResponse) {
    return <div>Error fetching data. Please try again later.</div>;
  }
  console.log(apiResponse);
  const { result, data } = apiResponse;
  const { basic_details, dp_details } = data;

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>API Response</h1>
      <pre>{JSON.stringify(apiResponse, null, 2)}</pre>
      <section>
        <h2>Result</h2>
        <p>Flag: {result.flag}</p>
        <p>Message: {result.flag_message}</p>
      </section>
      <section>
        <h2>Basic Details</h2>
        <ul>
          <li>UCC Code: {basic_details.ucc_code}</li>
          <li>PAN: {basic_details.pan}</li>
          <li>Account Status: {basic_details.account_status}</li>
          <li>Date of Birth: {basic_details.date_of_birth}</li>
        </ul>
      </section>
      {/* DP Details Section */}
      <section>
        <h2>DP Details</h2>
        <ul>
          {dp_details.map((dp: any, index: any) => (
            <li key={index}>
              <strong>Depository:</strong> {dp.depository} <br />
              <strong>BO ID:</strong> {dp.bo_id} <br />
              <strong>Client ID:</strong> {dp.client_id} <br />
              <strong>Status:</strong> {dp.dp_status} <br />
              <strong>Primary Flag:</strong> {dp.primary_flag}
            </li>
          ))}
        </ul>
      </section>
    </div>
    // <>adasdahsdahsd</>
  );
};

export default DummyApiPage;