@gadgetinc/react-bigcommerce 

The @gadgetinc/react-bigcommerce package provides a set of utilities to help you build single-click BigCommerce apps.

The package is available on GitHub.

Features 

When building single-click BigCommerce apps, the @gadgetinc/react-bigcommerce package provides the following features:

• Handles OAuth and access_token flow required for single-click BigCommerce apps
• Manages user sessions in the session model using an iframe-secure session with the Gadget backend

Installation 

For Gadget apps that have a BigCommerce connection, the @gadgetinc/react-bigcommerce package is automatically installed.

If you need to install the package manually, you can do so with yarn:

session-sh
Copy
yarn add @gadgetinc/react-bigcommerce

Usage 

To use @gadgetinc/react-bigcommerce in your app, you can import the <Provider /> and pass in your Gadget app API client as a prop. A useGadget() hook can be used to check when the OAuth request is loading and if the user isAuthenticated.

web/components/App.jsx
JavaScript
Copy
1import { Provider as GadgetProvider, useGadget } from "@gadgetinc/react-bigcommerce";
2import { api } from "../api";
3import { Outlet } from "react-router-dom";
4// ... other imports
5
6// ... router setup
7
8// ... additional components
9
10function Component() {
11  // pass your app's api client to the Provider
12  return (
13    <GadgetProvider api={api}>
14      <AuthenticatedApp />
15    </GadgetProvider>
16  );
17}
18
19function AuthenticatedApp() {
20  // the useGadget hook provides the `isAuthenticated` and `loading` booleans
21  const { isAuthenticated, loading } = useGadget();
22
23  // show a spinner if authentication is in progress
24  if (loading) {
25    return (
26      <div
27        style={{
28          display: "flex",
29          justifyContent: "center",
30          alignItems: "center",
31          height: "100%",
32          width: "100%",
33        }}
34      >
35        <ProgressCircle />
36      </div>
37    );
38  }
39
40  // if the user is authenticated, render the router Outlet
41  // otherwise show an unauthenticated app page
42  return (
43    <Box
44      marginHorizontal={{ mobile: "none", tablet: "xxxLarge" }}
45      marginVertical={{ mobile: "none", tablet: "xxLarge" }}
46    >
47      {isAuthenticated ? <Outlet /> : <UnauthenticatedApp />}
48    </Box>
49  );
50}

Reference 

Provider 

A Provider component that wraps your BigCommerce single-click app to authenticate the API client and generate a session toke..

Props 

• api: Client - The Gadget API client to use for the extension

useGadget() 

useGadget(): { loading: boolean, isAuthenticated: boolean }

A React hook that determines when the OAuth request is underway and if the user is authenticated.

Returns 

• loading: boolean - A boolean that is true when the OAuth request is in progress
• isAuthenticated: boolean - A boolean that is true when the user is authenticated