Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Authenticated Account API

The Authenticated Account API provides read-only access to the signed-in customer's ID and B2B purchasing company details. Use this API to identify the current customer, determine whether they're a B2B buyer, and personalize your extension based on their account context.

For more detailed customer data such as email, name, or phone, use the Customer Account API to query for additional details.

Anchor to Use casesUse cases

Personalize the experience: Display a personalized greeting or tailored content based on the authenticated customer's identity.
Detect B2B customers: Determine if the buyer is a B2B customer and show company-specific UI.
Gate features by authentication: Only render certain features when the customer is signed in.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

The Authenticated Account API object provides the authenticated customer's account information. Access the following properties on the API object to read account data.

Anchor to authenticatedAccount authenticatedAccount required: The authenticated customer's account information, including their customer ID and B2B company details.

AuthenticatedAccount

customer
The authenticated customer's account information, including their globally-unique ID.
```
StatefulRemoteSubscribable<Customer | undefined>
```
purchasingCompany
The B2B company information for the authenticated business customer. The value is `undefined` if the customer isn't authenticated or isn't a B2B customer.
```
StatefulRemoteSubscribable<PurchasingCompany | undefined>
```

Customer

The authenticated customer's account information. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).

id
A globally-unique identifier for the customer.
```
string
```

PurchasingCompany

company
The company that the authenticated B2B customer belongs to.
```
Company
```
location
The company location that the authenticated B2B customer is purchasing for.
```
CompanyLocation
```

Company

id
A globally-unique identifier for the company.
```
string
```

CompanyLocation

id
A globally-unique identifier for the company location.
```
string
```

Examples

import {

reactExtension,

useAuthenticatedAccountCustomer,

} from '@shopify/ui-extensions-react/customer-account';

import {Text} from '@shopify/ui-extensions/customer-account';

export default reactExtension(

'customer-account.order-status.block.render',

() => <Extension />,

);

function Extension() {

const customer = useAuthenticatedAccountCustomer();

if (!customer) return <Text appearance="subdued">Not authenticated</Text>;

return <Text>Customer ID: {customer.id}</Text>;

}

Examples

Description

Read the authenticated customer's ID and display it. This example uses `useAuthenticatedAccountCustomer` and handles the case where the customer isn't authenticated.

React

import {
  reactExtension,
  useAuthenticatedAccountCustomer,
} from '@shopify/ui-extensions-react/customer-account';
import {Text} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const customer = useAuthenticatedAccountCustomer();
  if (!customer) return <Text appearance="subdued">Not authenticated</Text>;
  return <Text>Customer ID: {customer.id}</Text>;
}

TS

import {extension, Text} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, api) => {
    const customer = api.authenticatedAccount.customer.current;
    if (!customer) {
      root.appendChild(root.createComponent(Text, {appearance: 'subdued'}, 'Not authenticated'));
      return;
    }
    root.appendChild(root.createComponent(Text, {}, `Customer ID: ${customer.id}`));
  },
);

Description

Read the B2B company and location and display the details. This example uses `useAuthenticatedAccountPurchasingCompany` and only renders when B2B data is available.

React

import {
  reactExtension,
  useAuthenticatedAccountCustomer,
  useAuthenticatedAccountPurchasingCompany,
} from '@shopify/ui-extensions-react/customer-account';
import {Banner, BlockStack, Text} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const customer = useAuthenticatedAccountCustomer();
  const company = useAuthenticatedAccountPurchasingCompany();
  if (!customer) return null;
  if (!company) return <Text>Customer: {customer.id}</Text>;
  return (
    <Banner status="info">
      <BlockStack>
        <Text emphasis="bold">{company.company.id}</Text>
        {company.location && <Text>Location: {company.location.id}</Text>}
      </BlockStack>
    </Banner>
  );
}

TS

import {extension, Banner, BlockStack, Text} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, api) => {
    const customer = api.authenticatedAccount.customer.current;
    const company = api.authenticatedAccount.purchasingCompany.current;
    if (!customer) return;
    if (!company) {
      root.appendChild(root.createComponent(Text, {}, `Customer: ${customer.id}`));
      return;
    }
    const banner = root.createComponent(Banner, {status: 'info'});
    const stack = root.createComponent(BlockStack, {});
    stack.appendChild(root.createComponent(Text, {emphasis: 'bold'}, company.company.id));
    if (company.location) {
      stack.appendChild(root.createComponent(Text, {}, `Location: ${company.location.id}`));
    }
    banner.appendChild(stack);
    root.appendChild(banner);
  },
);

Description

Read the authenticated customer's ID and uses it to personalize a loyalty banner. This example uses `useAuthenticatedAccountCustomer` to conditionally show a loyalty message.

React

import {
  reactExtension,
  useAuthenticatedAccountCustomer,
  useCustomer,
  useI18n,
} from '@shopify/ui-extensions-react/customer-account';
import {Banner, Link} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
  'customer-account.order-status.block.render',
  () => <Extension />,
);

function Extension() {
  const i18n = useI18n();
  const authenticatedCustomer = useAuthenticatedAccountCustomer();
  const orderStatusCustomer = useCustomer();

  if (
    authenticatedCustomer?.id &&
    orderStatusCustomer?.id?.endsWith(authenticatedCustomer?.id)
  ) {
    return (
      <Banner>
        <Link to={'extension:manageLoyaltyPoints/'}>
          {i18n.translate('manageLoyaltyPoints')}
        </Link>
      </Banner>
    );
  }
  return null;
}

TS

import {extension, Banner, Link} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order-status.block.render',
  (root, api) => {
    const authenticatedCustomer = api.authenticatedAccount.customer.current;
    const orderStatusCustomer = api.buyerIdentity?.customer.current;

    if (
      authenticatedCustomer?.id &&
      orderStatusCustomer?.id?.endsWith(authenticatedCustomer?.id)
    ) {
      const banner = root.createComponent(Banner, {});
      banner.appendChild(
        root.createComponent(Link, {to: 'extension:manageLoyaltyPoints/'}, api.i18n.translate('manageLoyaltyPoints')),
      );
      root.appendChild(banner);
    }
  },
);

Anchor to Best practicesBest practices

Handle undefined customer: The customer property is undefined when the buyer isn't authenticated. Always check before accessing customer fields.
Use purchasing company for B2B logic: The purchasingCompany provides the company and location for B2B customers. Use it to implement location-specific pricing or catalog restrictions.

Was this page helpful?