(/* GraphQL */ `
20 | #graphql
21 | query Shop {
22 | shop {
23 | name
24 | }
25 | }
26 | `);
27 | return {
28 | data,
29 | errors,
30 | };
31 | } catch (error) {
32 | shopify.utils.log.error("app.index.loader.error", error);
33 |
34 | if (error instanceof ShopifyException) {
35 | switch (error.type) {
36 | case "GRAPHQL":
37 | return { errors: error.errors };
38 |
39 | default:
40 | return new Response(error.message, {
41 | status: error.status,
42 | });
43 | }
44 | }
45 |
46 | return data(
47 | {
48 | data: undefined,
49 | errors: [{ message: "Unknown Error" }],
50 | },
51 | 500,
52 | );
53 | }
54 | }
55 |
56 | export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
57 | const data = await serverLoader();
58 | return data;
59 | }
60 |
61 | export default function AppIndex({
62 | actionData,
63 | loaderData,
64 | }: Route.ComponentProps) {
65 | const { data, errors } = loaderData ?? actionData ?? {};
66 | console.log("app.index", data);
67 |
68 | const { t } = useTranslation();
69 |
70 | useEffect(() => {
71 | const controller = new AbortController();
72 |
73 | fetch(`shopify:admin/api/${API_VERSION}/graphql.json`, {
74 | body: JSON.stringify({
75 | query: /* GraphQL */ `
76 | #graphql
77 | query Shop {
78 | shop {
79 | name
80 | }
81 | }
82 | `,
83 | variables: {},
84 | }),
85 | method: "POST",
86 | signal: controller.signal,
87 | })
88 | .then<{ data: ShopQuery }>((res) => res.json())
89 | .then((res) => console.log("app.index.useEffect", res))
90 | .catch((err) => console.error("app.index.useEffect.error", err));
91 |
92 | return () => controller.abort();
93 | }, []);
94 |
95 | const shopify = useAppBridge();
96 |
97 | return (
98 |
99 |
100 |
107 |
108 |
109 | {errors ? JSON.stringify(errors, null, 2) : data?.shop?.name}
110 |
111 |
112 |
113 | );
114 | }
115 |
116 | export async function clientAction({ serverAction }: Route.ClientActionArgs) {
117 | const data = await serverAction();
118 | return data;
119 | }
120 |
121 | export async function action(_: Route.ActionArgs) {
122 | const data = {};
123 | return { data };
124 | }
125 |
126 | export { headers } from "./app";
127 |
--------------------------------------------------------------------------------
/app/routes/app.tsx:
--------------------------------------------------------------------------------
1 | import { NavMenu, useAppBridge } from "@shopify/app-bridge-react";
2 | import { AppProvider, type AppProviderProps } from "@shopify/polaris";
3 | import polarisCss from "@shopify/polaris/build/esm/styles.css?url";
4 | import type { LinkLikeComponentProps } from "@shopify/polaris/build/ts/src/utilities/link";
5 | import { useEffect } from "react";
6 | import { useTranslation } from "react-i18next";
7 | import { Link, Outlet, useNavigation } from "react-router";
8 |
9 | import { APP_BRIDGE_URL } from "~/const";
10 | import { createShopify } from "~/shopify.server";
11 | import type { Route } from "./+types/app";
12 |
13 | export async function loader({ context, request }: Route.LoaderArgs) {
14 | try {
15 | const shopify = createShopify(context);
16 | shopify.utils.log.debug("app");
17 |
18 | await shopify.admin(request);
19 |
20 | return {
21 | appDebug: shopify.config.appLogLevel === "debug",
22 | appHandle: shopify.config.appHandle,
23 | apiKey: shopify.config.apiKey,
24 | appUrl: shopify.config.appUrl,
25 | };
26 | // biome-ignore lint/suspicious/noExplicitAny: catch(err)
27 | } catch (error: any) {
28 | if (error instanceof Response) return error;
29 |
30 | return new Response(error.message, {
31 | status: error.status,
32 | statusText: "Unauthorized",
33 | });
34 | }
35 | }
36 |
37 | export default function App({ loaderData }: Route.ComponentProps) {
38 | const { appHandle, apiKey } = loaderData;
39 |
40 | const { t } = useTranslation(["app", "polaris"]);
41 | const i18n = {
42 | Polaris: t("Polaris", {
43 | ns: "polaris",
44 | returnObjects: true,
45 | }),
46 | } as AppProviderProps["i18n"];
47 |
48 | return (
49 | <>
50 |
51 |
52 |
53 |
54 |
55 | {t("app")}
56 |
57 |
61 | {t("pricingPlans")}
62 |
63 |
64 |
65 |
66 |
67 |
68 | );
69 | }
70 |
71 | function AppOutlet() {
72 | const shopify = useAppBridge();
73 | const navigation = useNavigation();
74 | const isNavigating = navigation.state !== "idle" || !!navigation.location;
75 | useEffect(() => {
76 | shopify.loading(isNavigating);
77 | }, [isNavigating, shopify]);
78 |
79 | return ;
80 | }
81 |
82 | export function ErrorBoundary(error: Route.ErrorBoundaryProps) {
83 | if (
84 | error.constructor.name === "ErrorResponse" ||
85 | error.constructor.name === "ErrorResponseImpl"
86 | ) {
87 | return (
88 |
95 | );
96 | }
97 |
98 | throw error;
99 | }
100 | ErrorBoundary.displayName = "AppErrorBoundary";
101 |
102 | export function headers({
103 | parentHeaders,
104 | loaderHeaders,
105 | actionHeaders,
106 | errorHeaders,
107 | }: Route.HeadersArgs) {
108 | if (errorHeaders && Array.from(errorHeaders.entries()).length > 0) {
109 | return errorHeaders;
110 | }
111 |
112 | return new Headers([
113 | ...(parentHeaders ? Array.from(parentHeaders.entries()) : []),
114 | ...(loaderHeaders ? Array.from(loaderHeaders.entries()) : []),
115 | ...(actionHeaders ? Array.from(actionHeaders.entries()) : []),
116 | ]);
117 | }
118 |
119 | function LinkComponent({ url, ...props }: LinkLikeComponentProps) {
120 | return ;
121 | }
122 |
123 | export const links: Route.LinksFunction = () => [
124 | { href: "https://cdn.shopify.com", rel: "preconnect" },
125 | { as: "script", href: APP_BRIDGE_URL, rel: "preload" },
126 | {
127 | href: "https://cdn.shopify.com/static/fonts/inter/v4/styles.css",
128 | precedence: "default",
129 | rel: "stylesheet",
130 | },
131 | { href: polarisCss, precedence: "high", rel: "stylesheet" },
132 | ];
133 |
134 | export const meta: Route.MetaFunction = ({ data }: Route.MetaArgs) => [
135 | data?.appDebug ? { name: "shopify-debug", content: "web-vitals" } : {},
136 | { name: "shopify-experimental-features", content: "keepAlive" },
137 | ];
138 |
--------------------------------------------------------------------------------
/app/routes/index.browser.test.tsx:
--------------------------------------------------------------------------------
1 | import { expect, test } from "vitest";
2 | import { render } from "vitest-browser-react";
3 |
4 | import Index from "./index";
5 |
6 | test("loads and displays h1", async () => {
7 | const screen = render();
8 | const heading = screen.getByTestId("h1");
9 | await expect.element(heading).toHaveTextContent("ShopFlare");
10 | });
11 |
--------------------------------------------------------------------------------
/app/routes/index.e2e.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "@playwright/test";
2 |
3 | test("loads", async ({ page }) => {
4 | await page.goto("/");
5 | await expect(page).toHaveTitle(/ShopFlare/);
6 | });
7 |
--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from "react-router";
2 |
3 | import type { Route } from "./+types/index";
4 |
5 | export async function loader({ request }: Route.LoaderArgs) {
6 | const url = new URL(request.url);
7 | if (url.searchParams.has("shop")) {
8 | return redirect(`/app?${url.searchParams.toString()}`);
9 | }
10 |
11 | const data = { ok: true };
12 | return { data };
13 | }
14 |
15 | export default function Index() {
16 | return (
17 |
26 |
ShopFlare
27 |
28 | );
29 | }
30 |
31 | export async function action(_: Route.ActionArgs) {
32 | const data = { ok: true };
33 | return { data };
34 | }
35 |
--------------------------------------------------------------------------------
/app/routes/proxy.index.e2e.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "@playwright/test";
2 |
3 | test("loads", async ({ page }) => {
4 | await page.goto("/apps/shopflare");
5 | await expect(page).toHaveTitle(/ShopFlare/);
6 | await expect(page.getByRole("heading", { name: "Ops!" })).toBeVisible();
7 | });
8 |
--------------------------------------------------------------------------------
/app/routes/proxy.index.tsx:
--------------------------------------------------------------------------------
1 | import { useTranslation } from "react-i18next";
2 |
3 | import { Form } from "~/components/proxy";
4 | import { createShopify } from "~/shopify.server";
5 | import type { Route } from "./+types/proxy.index";
6 |
7 | export async function loader({ context, request }: Route.LoaderArgs) {
8 | const shopify = createShopify(context);
9 | shopify.utils.log.debug("proxy.index");
10 |
11 | await shopify.proxy(request);
12 |
13 | const data = {};
14 | return { data };
15 | }
16 |
17 | export default function ProxyIndex() {
18 | const { t } = useTranslation("proxy");
19 |
20 | return (
21 |
30 |
{t("proxy")}
31 |
36 |
37 | );
38 | }
39 |
40 | export async function action(_: Route.ActionArgs) {
41 | const data = {};
42 | return { data };
43 | }
44 |
--------------------------------------------------------------------------------
/app/routes/proxy.server.test.ts:
--------------------------------------------------------------------------------
1 | import { env } from "cloudflare:test";
2 | import type { AppLoadContext } from "react-router";
3 | import { describe, expect, test } from "vitest";
4 |
5 | import { ShopifySession } from "../shopify.server";
6 | import type { Route } from "./+types/proxy";
7 | import { loader } from "./proxy";
8 |
9 | const context = {
10 | cloudflare: { env: { ...env, SHOPIFY_APP_LOG_LEVEL: "error" } },
11 | } as unknown as AppLoadContext;
12 |
13 | describe("loader", () => {
14 | test("error on param missing", async () => {
15 | const url = new URL("http://localhost");
16 | const request = new Request(url);
17 | const response = (await loader({
18 | context,
19 | request,
20 | } as Route.LoaderArgs)) as Response;
21 |
22 | expect(response).toBeInstanceOf(Response);
23 | expect(response?.ok).toBe(false);
24 | expect(response?.status).toBe(400);
25 | expect(await response?.text()).toBe("Proxy param is missing");
26 | });
27 |
28 | test("error on proxy timestamp is expired", async () => {
29 | const url = new URL("http://localhost");
30 | url.searchParams.set("signature", "123");
31 | url.searchParams.set("timestamp", `${Math.trunc(Date.now() / 1_000 - 91)}`);
32 | const request = new Request(url, { method: "POST" });
33 | const response = (await loader({
34 | context,
35 | request,
36 | } as Route.LoaderArgs)) as Response;
37 |
38 | expect(response).toBeInstanceOf(Response);
39 | expect(response?.ok).toBe(false);
40 | expect(response?.status).toBe(400);
41 | expect(await response?.text()).toBe("Proxy timestamp is expired");
42 | });
43 |
44 | test("error on encoded byte length mismatch", async () => {
45 | const url = new URL("http://localhost");
46 | url.searchParams.set("signature", "123");
47 | url.searchParams.set("timestamp", `${Math.trunc(Date.now() / 1_000)}`);
48 | const request = new Request(url, { method: "POST" });
49 | const response = (await loader({
50 | context,
51 | request,
52 | } as Route.LoaderArgs)) as Response;
53 |
54 | expect(response).toBeInstanceOf(Response);
55 | expect(response?.ok).toBe(false);
56 | expect(response?.status).toBe(401);
57 | expect(await response?.text()).toBe("Encoded byte length mismatch");
58 | });
59 |
60 | test("error on invalid hmac", async () => {
61 | const url = new URL("http://localhost");
62 | url.searchParams.set(
63 | "signature",
64 | "548e324a5420c20bffa1d81318b5790de43731c278d0435108e5bcdbdc20795d",
65 | ); // NOTE: changed
66 | url.searchParams.set("timestamp", `${Math.trunc(Date.now() / 1_000)}`);
67 | const request = new Request(url, { method: "POST" });
68 | const response = (await loader({
69 | context,
70 | request,
71 | } as Route.LoaderArgs)) as Response;
72 |
73 | expect(response).toBeInstanceOf(Response);
74 | expect(response?.ok).toBe(false);
75 | expect(response?.status).toBe(401);
76 | expect(await response?.text()).toBe("Invalid hmac");
77 | });
78 |
79 | test("error on no session access token", async () => {
80 | const timestamp = Math.trunc(Date.now() / 1_000).toString();
81 |
82 | const url = new URL("http://localhost");
83 | url.searchParams.set("signature", await getHmac({ timestamp }));
84 | url.searchParams.set("timestamp", timestamp);
85 |
86 | const request = new Request(url, { method: "POST" });
87 | const response = (await loader({
88 | context,
89 | request,
90 | } as Route.LoaderArgs)) as Response;
91 |
92 | expect(response).toBeInstanceOf(Response);
93 | expect(response?.ok).toBe(false);
94 | expect(response?.status).toBe(401);
95 | expect(await response?.text()).toBe("No session access token");
96 | });
97 |
98 | test("success", async () => {
99 | const shop = "test.myshopify.com";
100 |
101 | const session = new ShopifySession(context.cloudflare.env.SESSION_STORAGE);
102 | await session.set({
103 | accessToken: "123",
104 | id: shop,
105 | scope: "read_products",
106 | shop,
107 | });
108 |
109 | const timestamp = Math.trunc(Date.now() / 1_000).toString();
110 |
111 | const url = new URL("http://localhost");
112 | url.searchParams.set("signature", await getHmac({ shop, timestamp }));
113 | url.searchParams.set("timestamp", timestamp);
114 | url.searchParams.set("shop", shop);
115 |
116 | const request = new Request(url, { body: "{}", method: "POST" });
117 | const response = await loader({
118 | context,
119 | request,
120 | } as Route.LoaderArgs);
121 |
122 | expect(response).toStrictEqual({
123 | appUrl: context.cloudflare.env.SHOPIFY_APP_URL,
124 | });
125 |
126 | await session.delete(shop);
127 | });
128 | });
129 |
130 | async function getHmac(searchParams: object) {
131 | const params = Object.entries(searchParams)
132 | .filter(([key]) => key !== "signature")
133 | .map(
134 | ([key, value]) =>
135 | `${key}=${Array.isArray(value) ? value.join(",") : value}`,
136 | )
137 | .sort((a, b) => a.localeCompare(b))
138 | .join("");
139 |
140 | const encoder = new TextEncoder();
141 | const key = await crypto.subtle.importKey(
142 | "raw",
143 | encoder.encode(context.cloudflare.env.SHOPIFY_API_SECRET_KEY),
144 | {
145 | name: "HMAC",
146 | hash: "SHA-256",
147 | },
148 | true,
149 | ["sign"],
150 | );
151 | const signature = await crypto.subtle.sign(
152 | "HMAC",
153 | key,
154 | encoder.encode(params),
155 | );
156 | const hmac = [...new Uint8Array(signature)].reduce(
157 | (a, b) => a + b.toString(16).padStart(2, "0"),
158 | "",
159 | ); // hex
160 | return hmac;
161 | }
162 |
--------------------------------------------------------------------------------
/app/routes/proxy.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router";
2 |
3 | import { Provider } from "~/components/proxy";
4 | import { createShopify } from "~/shopify.server";
5 | import type { Route } from "./+types/proxy";
6 |
7 | export async function loader({ context, request }: Route.LoaderArgs) {
8 | try {
9 | const shopify = createShopify(context);
10 | shopify.utils.log.debug("proxy");
11 |
12 | await shopify.proxy(request);
13 |
14 | return { appUrl: shopify.config.appUrl };
15 | // biome-ignore lint/suspicious/noExplicitAny: catch(err)
16 | } catch (error: any) {
17 | return new Response(error.message, {
18 | status: error.status,
19 | statusText: "Unauthorized",
20 | });
21 | }
22 | }
23 |
24 | export default function ProxyRoute({ loaderData }: Route.ComponentProps) {
25 | const { appUrl } = loaderData ?? {};
26 |
27 | return (
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/app/routes/shopify.auth.login.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AppProvider,
3 | type AppProviderProps,
4 | Button,
5 | FormLayout,
6 | Page,
7 | Text,
8 | TextField,
9 | } from "@shopify/polaris";
10 | import polarisCss from "@shopify/polaris/build/esm/styles.css?url";
11 | import { useState } from "react";
12 | import { useTranslation } from "react-i18next";
13 | import { Form, redirect } from "react-router";
14 |
15 | import { createShopify } from "~/shopify.server";
16 | import type { Route } from "./+types/shopify.auth.login";
17 |
18 | export async function loader({ context, request }: Route.LoaderArgs) {
19 | return action({ context, request } as Route.ActionArgs);
20 | }
21 |
22 | export default function AuthLogin({
23 | actionData,
24 | loaderData,
25 | }: Route.ComponentProps) {
26 | const { errors } = actionData ?? loaderData ?? {};
27 | const [shop, setShop] = useState("");
28 |
29 | const { t } = useTranslation(["app", "polaris"]);
30 | const i18n = {
31 | Polaris: t("Polaris", {
32 | ns: "polaris",
33 | returnObjects: true,
34 | }),
35 | } as AppProviderProps["i18n"];
36 |
37 | return (
38 |
47 |
48 |
49 |
70 |
71 |
72 |