Form post action from within app proxy not working

Shopify Apps
,
1

Hello, i have a app proxy, which is embedded in block. It is properly shown inside a page. I have a form, but the action is not triggered. I assume the problem is that the post request is send to the proxied path and not directly to my app proxy. Any help?

import React from "react";
import { Form, useLoaderData, useActionData } from "react-router";
import { authenticate } from "../shopify.server";

/* ------------ loader ------------ */
export async function loader({ request }) {
  await authenticate.public.appProxy(request);

  const url = new URL(request.url);
  const shop = url.searchParams.get("shop") || "unknown";
  const customerId = url.searchParams.get("logged_in_customer_id") || "none";
  const actionUrl = `${url.pathname}${url.search}`;
  const pathName = url.pathname;
  const searchParams = url.search;

  return { shop, customerId, actionUrl };
}

/* ------------ action ------------ */
export async function action({ request }) {
  await authenticate.public.appProxy(request);

  const form = await request.formData();
  const message = form.get("message") || "No message";

  return {
    ok: true,
    message: `Form submitted. You sent: ${message}`,
  };
}

/* ------------ component ------------ */
export default function DashboardSimplePage() {
  const { shop, customerId, actionUrl } = useLoaderData();
  const actionData = useActionData();

  return (
    <div className="page-width">
      <div className="section section--padding">
        <div className="card card--standard">
          <div className="card__content">
            <h2 className="title title--primary">Care Recipients - Test</h2>
            <p className="card__text">Rendered by React.</p>
            <p className="card__text">Shop: {shop}</p>
            <p className="card__text">Customer: {customerId}</p>

            {actionData?.ok && (
              <p className="card__text" style={{ color: "green" }}>
                {actionData.message}
              </p>
            )}

            // not working <Form method="post" action={actionUrl}>
            <Form method="post"> // also not working
              <input type="hidden" name="customerId" value={customerId} />
              <div className="field">
                <input className="field__input" name="message" placeholder="Type something..." />
                <label className="field__label">Message</label>
              </div>
              <button type="submit" className="button button--primary">Submit Test</button>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}
2

You may check the value of actionUrl to see if it’s the relative path you configured in the app’s proxy, instead of your app’s URL.

I hardcode the App proxy’s path in my form action, and it works.