`@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:

terminal
yarn add @gadgetinc/react-bigcommerce

Package manager support

Gadget apps use yarn as the package manager.

If you are adding @gadgetinc/react-bigcommerce to a non-Gadget app, you can use the package manager of your choice.

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

React

1import { Provider as GadgetProvider, useGadget } from "@gadgetinc/react-bigcommerce";
2import { Box, Link, Panel, ProgressCircle, Text } from "@bigcommerce/big-design";
3import { api } from "../api";
4import { Outlet } from "react-router";
5
6export default function App() {
7  // pass your app's api client to the Provider
8  return (
9    <GadgetProvider api={api}>
10      <AuthenticatedApp />
11    </GadgetProvider>
12  );
13}
14
15function AuthenticatedApp() {
16  // the useGadget hook provides the `isAuthenticated` and `loading` booleans
17  const { isAuthenticated, loading } = useGadget();
18
19  // show a spinner if authentication is in progress
20  if (loading) {
21    return (
22      <div
23        style={{
24          display: "flex",
25          justifyContent: "center",
26          alignItems: "center",
27          height: "100%",
28          width: "100%",
29        }}
30      >
31        <ProgressCircle />
32      </div>
33    );
34  }
35
36  // if the user is authenticated, render the router Outlet
37  // otherwise show an unauthenticated app page
38  return (
39    <Box marginHorizontal={{ mobile: "none", tablet: "xxxLarge" }} marginVertical={{ mobile: "none", tablet: "xxLarge" }}>
40      {isAuthenticated ? <Outlet /> : <UnauthenticatedApp />}
41    </Box>
42  );
43}
44
45function UnauthenticatedApp() {
46  return (
47    <Panel description="App must be viewed in the BigCommerce control panel">
48      <Text>
49        <Link target="_blank" href={`/edit/${process.env.GADGET_PUBLIC_APP_ENV}`}>
50          {"Edit this app"}
51        </Link>
52      </Text>
53    </Panel>
54  );
55}

1import { Provider as GadgetProvider, useGadget } from "@gadgetinc/react-bigcommerce";
2import { Box, Link, Panel, ProgressCircle, Text } from "@bigcommerce/big-design";
3import { api } from "../api";
4import { Outlet } from "react-router";
5
6export default function App() {
7  // pass your app's api client to the Provider
8  return (
9    <GadgetProvider api={api}>
10      <AuthenticatedApp />
11    </GadgetProvider>
12  );
13}
14
15function AuthenticatedApp() {
16  // the useGadget hook provides the `isAuthenticated` and `loading` booleans
17  const { isAuthenticated, loading } = useGadget();
18
19  // show a spinner if authentication is in progress
20  if (loading) {
21    return (
22      <div
23        style={{
24          display: "flex",
25          justifyContent: "center",
26          alignItems: "center",
27          height: "100%",
28          width: "100%",
29        }}
30      >
31        <ProgressCircle />
32      </div>
33    );
34  }
35
36  // if the user is authenticated, render the router Outlet
37  // otherwise show an unauthenticated app page
38  return (
39    <Box marginHorizontal={{ mobile: "none", tablet: "xxxLarge" }} marginVertical={{ mobile: "none", tablet: "xxLarge" }}>
40      {isAuthenticated ? <Outlet /> : <UnauthenticatedApp />}
41    </Box>
42  );
43}
44
45function UnauthenticatedApp() {
46  return (
47    <Panel description="App must be viewed in the BigCommerce control panel">
48      <Text>
49        <Link target="_blank" href={`/edit/${process.env.GADGET_PUBLIC_APP_ENV}`}>
50          {"Edit this app"}
51        </Link>
52      </Text>
53    </Panel>
54  );
55}

Reference

`Provider`

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

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

@gadgetinc/react-bigcommerce