Choose a version:

AppProxyForm

Sets up a Remix <Form> component that works when rendered on an app proxy page.

Supports any properties accepted by the <Form> component.

Because Remix doesn't support URL rewriting, any route using this component should match the pathname of the proxy URL exactly, and end in a trailing slash (e.g., https://<shop>/apps/proxy/), or set the Remix Form prop navigate to false.

Examples

/app/routes/apps/appProxy.ts

import {

AppProxyProvider,

AppProxyForm,

} from "@shopify/shopify-app-remix/react";

import { authenticate } from "~/shopify.server";

export async function loader({ request }) {

await authenticate.public.appProxy(request);

return json({ appUrl: process.env.SHOPIFY_APP_URL });

}

export async function action({ request }) {

await authenticate.public.appProxy(request);

const formData = await request.formData();

const field = formData.get("field")?.toString();

// Perform actions

if (field) {

console.log("Field:", field);

}

// Return JSON to the client

return json({ message: "Success!" });

}

export default function App() {

const { appUrl } = useLoaderData();

return (

</AppProxyForm>

</AppProxyProvider>

);

}

Examples

Description

Use an `AppProxyForm` within an `AppProxy` to create a form.

/app/routes/apps/appProxy.ts

import {
  AppProxyProvider,
  AppProxyForm,
} from "@shopify/shopify-app-remix/react";
import { authenticate } from "~/shopify.server";

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

  return json({ appUrl: process.env.SHOPIFY_APP_URL });
}

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

  const formData = await request.formData();
  const field = formData.get("field")?.toString();

  // Perform actions
  if (field) {
    console.log("Field:", field);
  }

  // Return JSON to the client
  return json({ message: "Success!" });
}

export default function App() {
  const { appUrl } = useLoaderData();

  return (
    <AppProxyProvider appUrl={appUrl}>
      <AppProxyForm action="/apps/appProxy" method="post">
        <input type="text" name="field" />

        <input type="submit" name="Submit" />
      </AppProxyForm>
    </AppProxyProvider>
  );
}

Anchor to RelatedRelated

Authenticating app proxy requests.authenticate.public.appProxy

Enable JavaScript in pages loaded through app proxies.AppProxyProvider

Was this page helpful?