@authentified/react-widget

This is the Authentified React widget, which is an alternative to Authentified's customer UI extension. This is primarily designed for brands who have not yet migrated to Shopify's new customer accounts.

Installation
Usage
Styling
Docs
Changelog

Installation

Install the package via npm:

npm install @authentified/react-widget

Or with yarn:

yarn add @authentified/react-widget

Or with pnpm:

pnpm add @authentified/react-widget

Usage

The Authentified React Widget can be used in 2 different contexts:

Line item level
Order level

Line item level is the default setting for the Authentified React Widget, generally the button is placed on the same level as each item in a customer's order. The advantages of this are

Quicker consignment time, as the customer doesn't need to select which item in their order they want to consign
Real time feedback about the sold status of each item

Step 1. Add the Provider

Wrap your line items with the AuthentifiedProvider.

import { AuthentifiedProvider } from "@authentified/react-widget"
import { OrderListComponent } from "./orderList"

export const OrdersPage = ({ orders }) => {
  return (
    <AuthentifiedProvider>
      <OrderListComponent orders={orders} />
    </AuthentifiedProvider>
  )
}

Step 2. Add the button

Now that the AuthentifiedProvider is in place, you can add the button next to each line item in the customer's orders.

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

export const OrderListComponent = ({ orders }) {
  return (
    <section>
      {orders.map(order => (
        <article key={order.id}>
          <h2>{lineItem.product.name}</h2>
          <h3>#{order.id}</h3>
          <div>
            {order.lineItems.map(lineItem => (
              <AuthentifiedButton
                variantId={lineItem.id}
                productId={lineItem.product.id}
                orderId={order.id}
                shopId={process.env.SHOP_ID}
              />
            ))}
          </div>
        </article>
      ))}
    </section>
  )
}

⚠️ Warning
If you are using the Storefront API to output orders, the OrderLineItem does not come with an id property, so you will need to use the variantId instead

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

export const OrderListComponent = ({ orders }) {
  return (
    <section>
      {orders.map(order => (
        <article key={order.id}>
          <h2>{lineItem.product.name}</h2>
          <h3>#{order.id}</h3>
          <div>
            {order.lineItems.map(lineItem => (
              <AuthentifiedButton
                variantId={lineItem.variant.id}
                productId={lineItem.product.id}
                orderId={order.id}
                shopId={process.env.SHOP_ID}
              />
            ))}
          </div>
        </article>
      ))}
    </section>
  )
}

Line item level usage documentation

Order level

At an order level, the Authentified React Widget can be placed above or below the customer's order details. The advantages of this are:

Reduces unnecessary repetition
Can be surrounded by supplementary content about your relationship with Authentified

Order level usage documentation

Props

Prop	Type	Default	Description
productId	`string`		The ID of the product associated with the order.
orderId	`string`		The ID of the order.
customerId	`string`		The ID of the customer associated with the order.
lineItemId	`string`		The line item ID (used when `type` is "shopify")
variantId	`string`		The variant ID (used when `type` is "shopify" or "offline")
shopId	`string`		The shop ID that owns the order.
scope	`"lineItem"	"order"`	order
type	`"shopify"	"offline"`	shopify

Styling the button

We use CSS variables for button styling, if you want to customise the buttons colours/hover states, you can override the CSS properties yourself. Due to CSS specificity rules, add this after the <AuthentifiedProvider>...</AuthentifiedProvider> otherwise they will not override the internal default values.

Default style

Default hover style

Default CSS variables

[data-authentified-button] {
  --authentified-button-bg-color: #FFF; 
  --authentified-button-border-color: #000;
  --authentified-button-border-radius: 0px;
  --authentified-button-border-style: solid;
  --authentified-button-border-width: 1px;
  --authentified-button-color: #000;
  --authentified-button-max-width: 30em;
  --authentified-button-padding: 0.75em 2.5em 0.6em; 
  --authentified-button-transition: all ease-in 0.13s;

  --authentified-button-bg-color--hover: #000;
  --authentified-button-border-color--hover: #000;
  --authentified-button-color--hover: #FFF;

  --authentified-button-sold-bg-color: #FFF;
  --authentified-button-sold-border-color: rgba(0, 0, 0, 0.2);
  --authentified-button-sold-border-style: solid;
  --authentified-button-sold-border-width: 1px;
  --authentified-button-sold-color: "#525252";

  --authentified-button-sold-border-color--hover: #000;
  --authentified-button-sold-bg-color--hover: #000;
  --authentified-button-sold-color--hover: #FFF;
}

Docs

Docs can be found on our docs website

CHANGELOG

You can visit our Canny site to view our changelog.