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

Table of contents

• 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:

1. Line item level
2. 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 | The level at which the item is placed. Use order to consign all items, use lineItem to consign individual items | type | "shopify" | "offline" | shopify | Specifies whether the order is from Shopify or offline. |

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

• Installation
• Usage

CHANGELOG

You can visit our Canny site to view our changelog.