Billing API Request Call Gives 401 Error On Remix App With Single Fetch Enabled

[mrgarcia1998]

It seems that enabling remix's v3_singleFetch future flag in vite.config causes a 401 unauthorized return from billing.request() when placing it in an action function or a loader that is fetched without a full page refresh. Refreshing a page that calls billing.request() in the loader does successfully call the billing.request() function. Any later calls made without a page refresh gets a 401 response. Single Fetch will be the default in react router v7.

Steps to reproduce in remix app:

1. enable v3_singleFetch in vite.config:

future: {
        v3_singleFetch: true,
      },

2. Add a paid plan to shopify.server:

export enum Plans {
  starter = "starter",
}

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  apiVersion: ApiVersion.October24,
  scopes: process.env.SCOPES?.split(","),
  appUrl: process.env.SHOPIFY_APP_URL || "",
  authPathPrefix: "/auth",
  sessionStorage: new PrismaSessionStorage(prisma),
  distribution: AppDistribution.AppStore,
  billing: {
    [Plans.starter]: {
      lineItems: [
        {
          amount: 9.99,
          currencyCode: "USD",
          interval: BillingInterval.Every30Days,
        },
      ],
    },
  },
  future: {
    unstable_newEmbeddedAuthStrategy: true,
    removeRest: true,
  },
  ...(process.env.SHOP_CUSTOM_DOMAIN
    ? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] }
    : {}),
});

3. In a route file, make a button that triggers a post request to call the remix action function:

export default function route() {
  const submit = useSubmit()
  const upgradePlan = () => submit({}, { method: "post" })
  return (
    <Page>
      <BlockStack>
        <Layout>
          <Layout.Section>
            <Card>
              <button variant={"primary"} onClick={upgradePlan}>
                UPGRADE PLAN
              </button>
            </Card>
          </Layout.Section>
        </Layout>
      </BlockStack>
    </Page>
  )
}

3. Make a billing request in the action function of the route file:

export const action = async ({ request }: ActionFunctionArgs) => {
  const { billing, admin } = await authenticate.admin(request);

  await billing.request({
    plan: Plans.starter,
    isTest: true
  })
}

When this button is clicked after starting the app with shopify app dev, a 401 response is given and the page shows "Handling response"

[lizkenyon]

Hi thanks for flagging!👋

We are currently aware of the limitations of v3_singleFetch and we are working on a solution.

Please see this ticket for more information.