Mastering Shopify App Proxy Components in Remix: A Beginner-Friendly Guide

When developing Shopify apps with Remix, you may wish your app to communicate with the storefront (such as the Online Store) — perhaps to render a custom widget, accept form submissions, or present dynamic content — without exposing your private app credentials.

Shopify’s App Proxy is here to help.

Shopify’s App Proxy can be thought of as a safe intermediary between your storefront and your app server.

Shopify also provides two handy React helpers in @shopify/shopify-app-remix/react to make life easier:

• AppProxyProvider – Validates requests coming from the App Proxy and handles security checks (HMAC validation) for you.
• AppProxyForm – Makes it easy to create forms that submit data through the proxy securely.

In this guide, we’ll build a simple example

Example of Shopify App Proxy

A contact form on your storefront that submits information to your app through App Proxy, saves it in your app’s database, and sends back a success message.

Step 1: Enable App Proxy in Shopify Admin

First, you need to tell Shopify how to forward storefront requests to your app.

• Navigate to your App Setup page in your Partner Dashboard.
• Scroll down to App proxy and click Configure.
• Fill in:

• Subpath prefix: apps
• Subpath: contact
• Proxy URL: https://your-app-domain.com/app-proxy
• Save your changes.

Now, if a customer visits:

https://yourstore.myshopify.com/apps/contact

Shopify will forward the request to your backend at:

https://your-app-domain.com/app-proxy

Step 2: Wrap Your App in AppProxyProvider

The AppProxyProvider ensures all proxy requests are validated before they hit your app’s logic.

app/root.jsx

import { AppProxyProvider } from "@shopify/shopify-app-remix/react";
import { Outlet } from "@remix-run/react";
export default function App() {
  return (
    <AppProxyProvider>
      <Outlet /> {/* All your app routes */}
    </AppProxyProvider>
  );
}

Step 3: Create the App Proxy Route in Remix

This is the backend route where Shopify will send the form data.

app/routes/app-proxy.jsx

import { json } from "@remix-run/node";
export async function action({ request }) {
  const formData = await request.formData();
  const name = formData.get("name");
  const email = formData.get("email");
  // Example: Save to database
  // await db.contactMessages.create({ name, email });
  return json({ success: true, message: "Thanks! We'll be in touch." });
}
export default function ProxyRoute() {
  return <p>Processing request...</p>;
}

Step 4: Create a Storefront Form Using AppProxyForm

The AppProxyForm helps to automatically:

• Redirect the submission to your app proxy route.
• Add the required security parameters for Shopify validation.

app/routes/storefront-contact.jsx

import { AppProxyForm } from "@shopify/shopify-app-remix/react";
export default function StorefrontContact() {
  return (
    <AppProxyForm method="post" action="/app-proxy">
      <label>
        Name:
        <input type="text" name="name" required />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" required />
      </label>
      <br />
      <button type="submit">Send Message</button>
    </AppProxyForm>
  );
}

Step 5: Test the Setup

1. Go to your storefront: https://yourstore.myshopify.com/apps/contact 
2. Submit the form.
3. Look in your app logs or database — you should be able to see the information that you submitted.

How It Works

1. Customer visits your storefront contact page.
2. The form sends a POST request via Shopify’s app proxy.
3. Shopify adds an HMAC signature for security.
4. AppProxyProvider validates the signature.
5. Your Remix backend processes the data.
6. A success message is sent back to the storefront.

Summary

Using AppProxyProvider and AppProxyForm together lets you:

• Securely connect your Shopify storefront to your app backend.
• Skip manual HMAC validation logic.
• Quickly build interactive, secure storefront features like contact forms, polls, and dynamic content.

With this setup, your storefront and backend communicate safely without exposing sensitive credentials.

FAQ

1. What is Shopify App Proxy?

A Shopify App Proxy is a secure route that allows access to an app’s server via your Shopify Storefront without revealing sensitive API keys. It is used for forwarding requests by passing through a storefront URL to your app, which also sends back some HTML, JSON, or other data.

2. Why should I use App Proxy with Remix?

Using Remix allows for server-side rendering and data loading bundles, App Proxy endpoints that are fast, secure, and SEO-friendly for custom storefront components.  Shopify App Proxies maximize a store’s ability to store dynamic content, and it is always secure.