Next.js Discord

Discord Forum

Cookie disappears on redirection

Unanswered
American Shorthair posted this in #help-forum
Open in Discord
Avatar
American ShorthairOP
I send user to external payment page and that page sends me back to my site but I can not find cookie present in application
and I get error on paymentStatusPage. But keep this in mind, it works on localhost not on production

cookie settings are these
1) sameSite None
2) Secure true
3) Domain - backend domain

Both backend and frontend have same domain but they are seperated with subdomains, something like this

site.example.com
siteapi.example.com

Also if I use useClient and send request with axios it works both in production and in localhost it is extremly weird,
so axios gets the cookie but fetch request does not on serveride

2 Replies

Avatar
American ShorthairOP
import { cookies } from "next/headers";
import { getDictionary } from "../../lib/dictionary/dictionary";
import { Locale } from "../../types/global.types";
import StatusDisplay from "../components/StatusDisplay/StatusDisplay";

async function getPaymentStatus(token: string) {
  const cookieStore = cookies();

  const response = await fetch(
    `${process.env.API_URL}/user/check_payment_status`,
    {
      headers: {
        "x-casco-hash": token,
        Cookie: cookieStore.toString(),
      },
      cache: "no-store",
      credentials: "include",
    }
  );

  if (!response.ok) {
    throw new Error("Payment status check failed");
  }

  return response.json();
}

async function getUserToken() {
  const cookieStore = cookies();

  console.log("Cookie:", cookieStore.toString());

  const response = await fetch(`${process.env.API_URL}/user/get_user_data`, {
    cache: "no-store",
    credentials: "include",
    headers: {
      Cookie: cookieStore.toString(),
    },
  });

  if (!response.ok) {
    throw new Error("Failed to get user token");
  }

  return response.json();
}

export default async function PaymentStatus({
  params: { lang },
}: {
  params: { lang: Locale };
}) {
  const dict = await getDictionary(lang);

  try {
    const {
      payload: { token },
    } = await getUserToken();
    console.log("Token:", token);
    const { payload: policyNO } = await getPaymentStatus(token);

    return (
      <StatusDisplay
        initialStatus="success"
        policyNO={policyNO}
        token={token}
        dict={dict}
      />
    );
  } catch (error) {
    console.error("Payment Status Error:", error);
    return (
      <StatusDisplay initialStatus="error" policyNO="" token="" dict={dict} />
    );
  }
}
Avatar
Black imported fire ant
I can't speak to a lot of the specifics of your situation, but on our project we deal with cookies across subdomains. In order for those to work, we have to set them like so:

  domain: '.domain.tld',
  path: '/',
  expires: 'however long you want',
  sameSite: 'none',
  secure: true,