@gadgetinc/react-shopify-app-bridge 

npm config set @gadget-client:registry https://registry.gadget.dev/npm

npm install @gadget-client/example-app

npm install --save @gadgetinc/react-shopify-app-bridge @gadgetinc/react @shopify/app-bridge-react react

import { Client } from "@gadget-client/example-app";

export const api = new Client();

1// import the Gadget<->Shopify bindings that manage the auth process with Shopify
2import {
3  AppType,
4  Provider as GadgetProvider,
5  useGadget,
6} from "@gadgetinc/react-shopify-app-bridge";
7// import the instance of the Gadget API client for this app constructed in the other file
8import { api } from "../api";
9// import the useGlobalAction hook to help call your Gadget API
10import { useGlobalAction } from "@gadgetinc/react";
11
12export default function App() {
13  return (
14    // Wrap our main application's react components in the `<GadgetProvider/>` component
15    // to interface with Shopify. This wrapper sets up the Shopify App Bridge.
16    // It will automatically redirect to perform the OAuth authentication
17    // if the shopify shop doesn't yet have the store installed.
18    <GadgetProvider
19      type={AppType.Embedded}
20      shopifyApiKey={window.gadgetConfig.apiKeys.shopify}
21      api={api}
22    >
23      <SimplePage />
24    </GadgetProvider>
25  );
26}
27
28// An example component that uses the Gadget React hooks to work with data in the backend
29function SimplePage() {
30  const { loading, appBridge, isRootFrameRequest, isAuthenticated } = useGadget();
31
32  // makeSelections is a global action in this example
33  // it is called using Gadget's useGlobalAction hook
34  const [{ error }, makeSelections] = useGlobalAction(api.makeSelections);
35
36  return (
37    <>
38      {loading && <span>Loading...</span>}
39      {/* A user is viewing this page from a direct link so show them the home page! */}
40      {!loading && isRootFrameRequest && (
41        <div>Welcome to my cool app's webpage!</div>
42      )}
43      {error && <div>{error.message}</div>}
44      {!loading && isAuthenticated && (
45        <button
46          onClick={async () => {
47            if (appBridge) {
48              // open the App Bridge resource picker component
49              const selected = appBridge.resourcePicker({ type: "product" });
50              console.log({ selected });
51              // pass selections to a global action
52              await makeSelections({ selected });
53            }
54          }}
55        >
56          Open resource picker
57        </button>
58      )}
59    </>
60  );
61}

1import {
2  AppType,
3  Provider as GadgetProvider,
4  useGadget,
5} from "@gadgetinc/react-shopify-app-bridge";
6import { NavMenu } from "@shopify/app-bridge-react";
7import { useEffect } from "react";
8import {
9  Link,
10  Outlet,
11  Route,
12  RouterProvider,
13  createBrowserRouter,
14  createRoutesFromElements,
15  useLocation,
16  useNavigate,
17} from "react-router";
18import { api } from "../api";
19import Index from "../routes/index";
20
21function Error404() {
22  // use navigation hooks to handle 404 pages for undefined routes
23  const navigate = useNavigate();
24  const location = useLocation();
25
26  useEffect(() => {
27    const appURL = process.env.GADGET_PUBLIC_SHOPIFY_APP_URL;
28
29    if (appURL && location.pathname === new URL(appURL).pathname) {
30      navigate("/", { replace: true });
31    }
32  }, [location.pathname]);
33
34  return <div>404 not found</div>;
35}
36
37function App() {
38  // define routes
39  const router = createBrowserRouter(
40    createRoutesFromElements(
41      <Route path="/" element={<Layout />}>
42        <Route index element={<Index />} />
43        <Route path="*" element={<Error404 />} />
44      </Route>
45    )
46  );
47
48  // and return the router provider that defines the App component
49  return (
50    <>
51      <RouterProvider router={router} />
52    </>
53  );
54}
55
56function Layout() {
57  // use the Provider to handle auth, init App Bridge
58  return (
59    <GadgetProvider
60      type={AppType.Embedded}
61      shopifyApiKey={window.gadgetConfig.apiKeys.shopify}
62      api={api}
63    >
64      <AuthenticatedApp />
65    </GadgetProvider>
66  );
67}
68
69function AuthenticatedApp() {
70  // we use `isAuthenticated` to render pages once the OAuth flow is complete!
71  const { isAuthenticated, loading } = useGadget();
72  if (loading) {
73    return <>Loading...</>;
74  }
75  return isAuthenticated ? <EmbeddedApp /> : <UnauthenticatedApp />;
76}
77
78function EmbeddedApp() {
79  // use the Outlet, which renders the correct page given the current route
80  // and use the App Bridge NavMenu for Shopify embedded app nav
81  return (
82    <>
83      <Outlet />
84      <NavMenu>
85        <Link to="/" rel="home">
86          Shop Information
87        </Link>
88      </NavMenu>
89    </>
90  );
91}
92
93function UnauthenticatedApp() {
94  return <>App must be viewed in the Shopify Admin</>;
95}
96
97export default App;