I have a Liquid file in Shopify with a form on it. When the form is submitted, I make a request to a route in my Remix app:

fetch('', {
  method: 'post',
  body: JSON.stringify({...}),
  headers: {
    'Content-Type': 'multipart/form-data',
  }
});

If I don't use authenticate in my route, this works fine.

export const action = async ({ request }: ActionFunctionArgs) => {
  // set headers
  const headers = new Headers();
  headers.set('Access-Control-Allow-Origin', '*');

  // preflight
  if (request.method === 'OPTIONS') {
      return new Response(null, {
      headers,
    });
  }

  if (request.method === 'POST') {
    const body = await request.json();

    return new Response(
      JSON.stringify({
        status: 200,
        data: body,
      }),
      {
        headers,
      }
    );
  }
});

If I include authenticate, the route is redirected to /auth/login.

// server
import { authenticate } from 'app/shopify.server';

export const action = async ({ request }: ActionFunctionArgs) => {
  // this will cause the route to redirect to /auth/login
  const { admin } = await authenticate.admin(request);
}

I understand that the fetch() request in Liquid is not sending any Authorization header, so the request is not authenticated. How can I add authentication to the fetch() request from the Liquid theme?

I have a Liquid file in Shopify with a form on it. When the form is submitted, I make a request to a route in my Remix app:

fetch('https://my-proxy-url.trycloudflare/api/entrants', {
  method: 'post',
  body: JSON.stringify({...}),
  headers: {
    'Content-Type': 'multipart/form-data',
  }
});

If I don't use authenticate in my route, this works fine.

export const action = async ({ request }: ActionFunctionArgs) => {
  // set headers
  const headers = new Headers();
  headers.set('Access-Control-Allow-Origin', '*');

  // preflight
  if (request.method === 'OPTIONS') {
      return new Response(null, {
      headers,
    });
  }

  if (request.method === 'POST') {
    const body = await request.json();

    return new Response(
      JSON.stringify({
        status: 200,
        data: body,
      }),
      {
        headers,
      }
    );
  }
});

If I include authenticate, the route is redirected to /auth/login.

// server
import { authenticate } from 'app/shopify.server';

export const action = async ({ request }: ActionFunctionArgs) => {
  // this will cause the route to redirect to /auth/login
  const { admin } = await authenticate.admin(request);
}

I understand that the fetch() request in Liquid is not sending any Authorization header, so the request is not authenticated. How can I add authentication to the fetch() request from the Liquid theme?

• authentication
• shopify
• liquid
• shopify-app

1 Answer 1

If you want the most secure way to authenticate your request, using an App Proxy is the best option. It provides high security and is ideal for Shopify apps, though it requires some setup.

If you're working with an embedded Shopify app, a JWT Token is a decent option, offering medium security and complexity.

However, if you're looking for a quick and easy solution, passing a token through the URL is the simplest method, but it's not very secure and should only be used temporarily or in low-risk situations.

Steps to Set Up Shopify App Proxy:

1. Go to Shopify Admin > Apps > Manage Private Apps (or create a new app).

2. Enable an App Proxy:

   • Prefix: /apps/my-proxy

   • Proxy URL: https://my-proxy-url.trycloudflare/api/entrants

3. Use the Proxy in Liquid:

<script>
fetch('/apps/my-proxy', {
    method: 'POST',
    body: JSON.stringify({...}),
    headers: {
        'Content-Type': 'application/json',
    }
}).then(response => response.json())
  .then(data => console.log(data));
</script>

Modify the Remix Action to Validate the Request: Shopify will send an X-Shopify-Shop-Domain header in the request. Your Remix app should validate this to allow only legitimate Shopify requests.

import { verifyShopifyRequest } from 'app/shopify.server';

export const action = async ({ request }: ActionFunctionArgs) => {
    const headers = new Headers();
    headers.set('Access-Control-Allow-Origin', '*');

    // Validate request
    const shopDomain = request.headers.get('X-Shopify-Shop-Domain');
    if (!verifyShopifyRequest(shopDomain)) {
        return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 });
    }

    // Process POST request
    if (request.method === 'POST') {
        const body = await request.json();
        return new Response(JSON.stringify({ status: 200, data: body }), { headers });
    }
};