Running graphql on Shopify Flow action

[Hirano_00]

Has anyone tried to run a Graphql query on Shopify Flow action?

Below is from action.jsx code:

export const action = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const body = await request.json();
  return json({body});
}

I got status 410 error.

I need to validate a request, but I don't know how to do that.
https://shopify.dev/docs/apps/flow/actions/create-an-action#verifying-requests

[Hirano_00 · Accepted solution]

The following code could be used to do this.

Note that the route of the process to be called should be under app.

Example: app-directory/app/routes/app/api/action.js

Otherwise, Graphql will not be authenticated and the error "[API] Invalid API key or access token (unrecognized login or wrong password)" will occur.

import { unauthenticated } from "~/shopify.server";
// Includes crypto module
const crypto = require("crypto");

export const action = async ({ request }) => {
  // Hmac validation
  const rawBody = await request.text();
  const hmacHeader = request.headers.get("X-Shopify-Hmac-SHA256");
  const hmac = await crypto.createHmac("sha256", process?.env?.SHOPIFY_API_SECRET);
  const hash = await hmac.update(rawBody, "utf8").digest("base64");
  // console.log("signature match : " + (hash == hmacHeader));
  if(hash !== hmacHeader) {
    return new Response(undefined, {
      status: 401,
      statusText: 'Unauthorized'
    });
  }

  const data = JSON.parse(rawBody);
  if(data.handle !== "handle") {
    return new Response(undefined, {
      status: 405,
      statusText: 'Method Not Allowed'
    });
  }

  const { admin } = await unauthenticated.admin(data.shopify_domain);
  const response = await admin.graphql(
   `#graphql
      query {
        shop{
         name
        }
      }
  }`);
  const responseJson = await response.json();
  console.log(responseJson);
  return null;
};

[Hirano_00 · Accepted solution]

The following code could be used to do this.

Note that the route of the process to be called should be under app.

Example: app-directory/app/routes/app/api/action.js

Otherwise, Graphql will not be authenticated and the error "[API] Invalid API key or access token (unrecognized login or wrong password)" will occur.

import { unauthenticated } from "~/shopify.server";
// Includes crypto module
const crypto = require("crypto");

export const action = async ({ request }) => {
  // Hmac validation
  const rawBody = await request.text();
  const hmacHeader = request.headers.get("X-Shopify-Hmac-SHA256");
  const hmac = await crypto.createHmac("sha256", process?.env?.SHOPIFY_API_SECRET);
  const hash = await hmac.update(rawBody, "utf8").digest("base64");
  // console.log("signature match : " + (hash == hmacHeader));
  if(hash !== hmacHeader) {
    return new Response(undefined, {
      status: 401,
      statusText: 'Unauthorized'
    });
  }

  const data = JSON.parse(rawBody);
  if(data.handle !== "handle") {
    return new Response(undefined, {
      status: 405,
      statusText: 'Method Not Allowed'
    });
  }

  const { admin } = await unauthenticated.admin(data.shopify_domain);
  const response = await admin.graphql(
   `#graphql
      query {
        shop{
         name
        }
      }
  }`);
  const responseJson = await response.json();
  console.log(responseJson);
  return null;
};

[Alicia_P · Accepted solution]

If anyone else is having this issue, I found this link in the shopify remix docs which solved all my problems with authenticating flow request: https://shopify.dev/docs/api/shopify-app-remix/v2/authenticate/flow
This wasn't linked on the flow action extension docs anywhere so it was  a bit withheld.