Usage

The Authentified React Widget comes with 2 components: A provider, and a button. The provider wraps your order list, and provides the ability to check the resale status of items within it.

1. Add the Provider

Wrap your order component with the AuthentifiedProvider.

import { AuthentifiedProvider } from "@authentified/react-widget"
import { OrderComponent } from "./order"

export const OrderPage = ({ order }) => {
  return (
    <AuthentifiedProvider>
      <OrderComponent order={order} />
    </AuthentifiedProvider>
  )
}

2. Add the Button

Now that the AuthentifiedProvider is in place, you can add a single AuthentifiedButton with scope="order" above or below the order details. The customer picks which items to consign on the Authentified flow. Pick the tab below that matches how your shop integrates with Authentified — the props are the same, only source changes.

For shops that have installed the Authentified Shopify App, pass source="shopify" (the default) and the Shopify orderId.

import { AuthentifiedProvider, AuthentifiedButton } from "@authentified/react-widget"
import { OrderComponent } from "./order"

export const OrderPage = ({ order, customer, shop }) => {
  return (
    <AuthentifiedProvider>
      <AuthentifiedButton
        scope="order"
        source="shopify"
        orderId={order.id}
        shopId={shop.id}
        customerId={customer.id}
      />
      <OrderComponent order={order} />
    </AuthentifiedProvider>
  )
}