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