# `@gadgetinc/react-bigcommerce` 

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

The package source code is available on [GitHub](https://github.com/gadget-inc/js-clients/tree/main/packages/react-big-commerce).

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

```bash
yarn add @gadgetinc/react-bigcommerce
```

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`.

```tsx
import { Provider as GadgetProvider, useGadget } from "@gadgetinc/react-bigcommerce";
import { Box, Link, Panel, ProgressCircle, Text } from "@bigcommerce/big-design";
import { api } from "../api";
import { Outlet } from "react-router";

export default function App() {
  // pass your app's api client to the Provider
  return (
    <GadgetProvider api={api}>
      <AuthenticatedApp />
    </GadgetProvider>
  );
}

function AuthenticatedApp() {
  // the useGadget hook provides the `isAuthenticated` and `loading` booleans
  const { isAuthenticated, loading } = useGadget();

  // show a spinner if authentication is in progress
  if (loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          width: "100%",
        }}
      >
        <ProgressCircle />
      </div>
    );
  }

  // if the user is authenticated, render the router Outlet
  // otherwise show an unauthenticated app page
  return (
    <Box marginHorizontal={{ mobile: "none", tablet: "xxxLarge" }} marginVertical={{ mobile: "none", tablet: "xxLarge" }}>
      {isAuthenticated ? <Outlet /> : <UnauthenticatedApp />}
    </Box>
  );
}

function UnauthenticatedApp() {
  return (
    <Panel description="App must be viewed in the BigCommerce control panel">
      <Text>
        <Link target="_blank" href={`/edit/${process.env.GADGET_PUBLIC_APP_ENV}`}>
          {"Edit this app"}
        </Link>
      </Text>
    </Panel>
  );
}
```

## 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