@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
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> ); }
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

Was this page helpful?