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 (24)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides the authenticated account data. Access the following properties on shopify to read the customer's account and company details.

Anchor to authenticatedAccount authenticatedAccount required: The logged-in customer's account information, including their customer ID and B2B company details. Use this to personalize your extension based on who is viewing the page.

AuthenticatedAccount

customer
The authenticated customer's account information. The value is `undefined` if the customer isn't logged in.
```
SubscribableSignalLike<AuthenticatedAccountCustomer | undefined>
```
purchasingCompany
The company that the authenticated B2B customer belongs to, including the company ID and location. The value is `undefined` if the customer isn't authenticated or isn't a B2B customer.
```
SubscribableSignalLike<PurchasingCompany | undefined>
```

SubscribableSignalLike

Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. This interface extends `ReadonlySignalLike` with deprecated fields that are still supported for backwards compatibility.

current
The current value of the signal. Equivalent to `.value`, accessing this property subscribes to changes when used in a reactive context.
```
T
```
destroy
Cleans up the subscription and releases any resources held by this signal. After calling `destroy()`, the signal stops receiving updates from the main thread.
```
() => Promise<void>
```
subscribe
Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.
```
(fn: (value: T) => void) => () => void
```
value
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.
```
T
```

AuthenticatedAccountCustomer

The authenticated customer's account, identified by a numeric customer ID represented as a string. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).

id
The customer's numeric ID represented as a string.
```
string
```

PurchasingCompany

company
The company that the authenticated B2B customer is associated with.
```
Company
```
location
The specific company location associated with the authenticated B2B customer. The value is `undefined` if no location is set.
```
CompanyLocation
```

Company

id
A globally-unique identifier for the company in the format `gid://shopify/Company/<id>`.
```
string
```

CompanyLocation

id
A globally-unique identifier for the company location in the format `gid://shopify/CompanyLocation/<id>`.
```
string
```

Examples

jsx

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

const customer =

shopify.authenticatedAccount.customer.value;

if (!customer) {

return null;

}

return (

<s-box padding="base">

<s-stack direction="block" gap="small-200">

<s-text type="strong">

Welcome back!

</s-text>

<s-text color="subdued">

Customer ID: {customer.id}

</s-text>

</s-stack>

</s-box>

);

}

Examples

Show a personalized greeting

Description

Display a personalized greeting using the authenticated customer's identity. This example reads `shopify.authenticatedAccount.customer` to retrieve the customer ID and renders a welcome message.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const customer =
    shopify.authenticatedAccount.customer.value;

  if (!customer) {
    return null;
  }

  return (
    <s-box padding="base">
      <s-stack direction="block" gap="small-200">
        <s-text type="strong">
          Welcome back!
        </s-text>
        <s-text color="subdued">
          Customer ID: {customer.id}
        </s-text>
      </s-stack>
    </s-box>
  );
}

Detect a B2B customer

Description

Check whether the buyer is associated with a B2B company account. This example reads `shopify.authenticatedAccount.purchasingCompany` and conditionally displays the company ID and location ID when present.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const purchasingCompany =
    shopify.authenticatedAccount.purchasingCompany
      .value;

  if (!purchasingCompany) {
    return (
      <s-text color="subdued">
        Shopping as an individual customer.
      </s-text>
    );
  }

  const {company, location} = purchasingCompany;

  return (
    <s-box padding="base">
      <s-stack direction="block" gap="small-200">
        <s-text type="strong">
          B2B Account
        </s-text>
        <s-text>Company: {company.id}</s-text>
        <s-text>Location: {location?.id}</s-text>
      </s-stack>
    </s-box>
  );
}

Gate features by authentication

Description

Only render certain features when the customer is signed in. This example checks whether `shopify.authenticatedAccount.customer` is defined and conditionally shows a loyalty rewards section.

jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const customer =
    shopify.authenticatedAccount.customer.value;

  if (!customer) {
    return (
      <s-banner tone="warning">
        Sign in to access loyalty rewards and
        order tracking features.
      </s-banner>
    );
  }

  return (
    <s-box padding="base">
      <s-stack direction="block" gap="small-200">
        <s-text type="strong">
          Loyalty Rewards
        </s-text>
        <s-text>
          You have earned 1,250 points on this
          order.
        </s-text>
        <s-button>View rewards</s-button>
      </s-stack>
    </s-box>
  );
}

Anchor to Best practicesBest practices

Use the customer ID as a stable key: The customer.id is the customer's numeric ID returned as a string (for example, "1234567890"), not a GID. It persists across sessions and is unique to the shop, so you can use it as a key for storing and retrieving app-specific data for the customer.

Was this page helpful?