[shopify-app-remix] Form submissions redirects broken in proxied remix app #1073

vanceism7 · 2024-06-18T19:38:56Z

Issue summary

Before opening this issue, I have:

Upgraded to the latest version of the relevant packages
- @shopify/* package and version:
- Node version: v20.11.0
- Operating system: Windows 10
Found a reliable way to reproduce the problem that indicates it's a problem with the package
Looked for similar issues in this repository

I'm working on a shopify remix app, which is using the shopify proxy on the store front side of things to add some additional functionality. In my work, I think I've discovered that form submission actions seem to be broken because of the proxy url rewrites.

Here's my minimal reproduction

export async function loader({ request }: LoaderFunctionArgs) {
  return json({ appUrl: process.env.SHOPIFY_APP_URL });
}

const FooPage = () => {
  const { appUrl } = useLoaderData<typeof loader>();
  
  return (
    <AppProxyProvider appUrl={appUrl}>
      <main>
        // You can also use plain `Form` here, the result is the same
        <AppProxyForm action="/apps/proxy/foo" method="post">
          <button type="submit">Click me</button>
        </AppProxyForm>
      </main>
    </AppProxyProvider>
  );
};

export default FooPage;

export async function action({ request }: ActionFunctionArgs) {
  return null;
  // or return redirect("/")
  // Really you can return anything here, the result is the same
}

Expected behavior

If I'm returning null, I expect the page to remain unchanged
If I'm returning redirect("/") - I expect the page to go back to my store front url, e.g: foo.myshopify.com
If I return redirect("/apps/proxy/foo") - I expect the page to redirect to foo.myshopify.com/apps/proxy/foo - i.e: the url should be unchanged

Actual behavior

In all of the above expected scenarios, instead of the page remaining unchanged or redirecting properly, the store url always gets rewritten to the url of my actual app.

E.g: (If my app url is myapp.com)

returning null redirects me to myapp.com/apps/proxy/foo (the url is unchanged except foo.myshopify.com becomes myapp.com)
returning redirect("/") redirects me to myapp.com instead of foo.myshopify.com
returning redirect("/apps/proxy/foo") redirects me to myapp.com/apps/proxy/foo instead of foo.myshopify.com/apps/proxy/foo

Other notes

This issue seems to specifically happen with form submission actions.

For example, the following loader function works as expected

export const loader: LoaderFunction = async () => {
  return redirect("/")
};

This function will successfully redirect me to foo.myshopify.com.

Also, if I call the action function manually using a fetch call, this also gets back the response fine without any redirection.

But any call within the context of a form submission redirects away from the shopify store over to my app's direct url. This is specifically a big issue when using libs like conform, which use the form action to run validation on the server side, causing the form to break immediately on tabbing from one form input to another

The text was updated successfully, but these errors were encountered:

matteodepalo · 2024-07-02T10:02:51Z

Hi @vanceism7, thank you for opening this issue, the team will take a look.

Xmaster6y · 2024-07-04T12:08:02Z

Seconding this. To complement:

I observe the same behaviour with the AppProxyLink component
The routing works fine with the loader and action only, e.g. by throwing liquid responses containing a similar form or link.
The form and link components are not properly integrated into the theme (from the docs idk if it's expected)

anasdevv · 2024-07-22T08:23:00Z

Any progress with the findings? This really gives me headaches..

github-actions · 2024-09-21T01:59:33Z

We're labeling this issue as stale because there hasn't been any activity on it for 60 days. While the issue will stay open and we hope to resolve it, this helps us prioritize community requests.

You can add a comment to remove the label if it's still relevant, and we can re-evaluate it.

github-actions · 2024-11-23T02:03:35Z

We're labeling this issue as stale because there hasn't been any activity on it for 60 days. While the issue will stay open and we hope to resolve it, this helps us prioritize community requests.

You can add a comment to remove the label if it's still relevant, and we can re-evaluate it.

lizkenyon · 2024-12-03T19:24:27Z

Hi there 👋

Sorry for the delay on this. A couple of things

seem to be broken because of the proxy url rewrites

Yes, this is a known issue with Remix unfortunately. At this time there are a couple of options.

Ensure that the URL you are are on for your app proxy page ends in a trailing slash. Like described here.
If you don't need to use the resulting data, and just want to kick off a form submission you can use the navigate prop on the Remix form component.

 return (
      <AppProxyProvider appUrl={appUrl}>
        <AppProxyForm action="/apps/appProxy" navigate={false} method="post">
          <input type="text" name="field" defaultValue="Enter text here" />
  
          <input type="submit" name="Submit 2" />
        </AppProxyForm>
      </AppProxyProvider>
    );

returning redirect("/") redirects me to myapp.com instead of foo.myshopify.com

Yes, because you are using the Remix redirect it is redirecting based on your app URL.

I will create a ticket for us to explore adding a redirect helper to the App Proxy context (similar to what we do for the Admin context), that could allow for specifying redirects how you describe in the expected.

For the time being if you want to redirect to a different URL on the shop, you will need to specify the entire path.

I will be making some updates to the documentation with some more of this context.

anasdevv · 2024-12-04T13:28:14Z

 return (
      <AppProxyProvider appUrl={appUrl}>
        <AppProxyForm action="/apps/appProxy" navigate={false} method="post">
          <input type="text" name="field" defaultValue="Enter text here" />
  
          <input type="submit" name="Submit 2" />
        </AppProxyForm>
      </AppProxyProvider>
    );

One more thing i'd like to discuss , As clearly mentioned in the docs , merchants can change the url this means the form will break. Is there any way to get the proxy URL?

lizkenyon · 2024-12-04T15:07:23Z

I don't believe at this time there is a way. I would recommend you ask that question in the Community Forums. That will route the question the to the team that owns the App Proxy feature in the platform, and go into their tracking.

anasdevv · 2024-12-04T17:18:30Z

This question was asked 10 years ago and still gets attention today. It would be great to improve this, as the app proxy experience isn't very good right now.
https://community.shopify.com/c/online-store-and-theme/getting-proxy-url-from-an-installed-shop/td-p/170166

lizkenyon · 2024-12-04T17:25:26Z

I agree this is something that there should be a better experience. If you create a new question in the new developer community I can try to bump that with the team that owns App Proxy.

vanceism7 changed the title ~~Form submissions redirects broken in proxied remix app~~ [shopify-app-remix] Form submissions redirects broken in proxied remix app Jun 18, 2024

github-actions bot added the Stale label Sep 21, 2024

matteodepalo removed the Stale label Sep 23, 2024

github-actions bot added the Stale label Nov 23, 2024

lizkenyon self-assigned this Nov 28, 2024

github-actions bot removed the Stale label Nov 29, 2024

This was referenced Dec 3, 2024

[Docs] Update App Proxy Form documentation #1822

Open

Add a redirect helper to AppProxy context #1823

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[shopify-app-remix] Form submissions redirects broken in proxied remix app #1073

[shopify-app-remix] Form submissions redirects broken in proxied remix app #1073

vanceism7 commented Jun 18, 2024 •

edited

Loading

matteodepalo commented Jul 2, 2024

Xmaster6y commented Jul 4, 2024 •

edited

Loading

anasdevv commented Jul 22, 2024

github-actions bot commented Sep 21, 2024

github-actions bot commented Nov 23, 2024

lizkenyon commented Dec 3, 2024 •

edited

Loading

anasdevv commented Dec 4, 2024

lizkenyon commented Dec 4, 2024

anasdevv commented Dec 4, 2024 •

edited

Loading

lizkenyon commented Dec 4, 2024

[shopify-app-remix] Form submissions redirects broken in proxied remix app #1073

[shopify-app-remix] Form submissions redirects broken in proxied remix app #1073

Comments

vanceism7 commented Jun 18, 2024 • edited Loading

Issue summary

Expected behavior

Actual behavior

Other notes

matteodepalo commented Jul 2, 2024

Xmaster6y commented Jul 4, 2024 • edited Loading

anasdevv commented Jul 22, 2024

github-actions bot commented Sep 21, 2024

github-actions bot commented Nov 23, 2024

lizkenyon commented Dec 3, 2024 • edited Loading

anasdevv commented Dec 4, 2024

lizkenyon commented Dec 4, 2024

anasdevv commented Dec 4, 2024 • edited Loading

lizkenyon commented Dec 4, 2024

vanceism7 commented Jun 18, 2024 •

edited

Loading

Xmaster6y commented Jul 4, 2024 •

edited

Loading

lizkenyon commented Dec 3, 2024 •

edited

Loading

anasdevv commented Dec 4, 2024 •

edited

Loading