---
title: Authentication State API
description: >-
  The Authentication State API provides the buyer's current authentication level
  in customer accounts. Use this API to determine whether the buyer is fully
  signed in or viewing the page through a pre-authenticated link, such as from
  an order confirmation email.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/account-apis/authentication-state-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/account-apis/authentication-state-api.md
---

# Authentication State API

The Authentication State API provides the buyer's current authentication level in customer accounts. Use this API to determine whether the buyer is fully signed in or viewing the page through a pre-authenticated link, such as from an order confirmation email.

The authentication state is read-only. To prompt the buyer to log in, use the [Require Login API](https://shopify.dev/docs/api/customer-account-ui-extensions/target-apis/account-apis/require-login-api).

Pre-authenticated buyers may have limited access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data), which can cause some API properties to return `undefined`.

### Use cases

* **Conditional content rendering**: Show different UI depending on whether the buyer is fully authenticated or viewing the page through a pre-authenticated link.
* **Prompt for sign-in**: Detect when a buyer is pre-authenticated and display a message encouraging them to sign in for a richer experience.
* **Protect sensitive data**: Only display detailed customer information when the buyer is fully authenticated.

### Support Targets (10)

### Supported targets

* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-)

### Properties

The [`shopify` global object](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#target-apis-define-what-your-extension-does) provides the authentication state. Access the following property on `shopify` to determine how the buyer accessed the Order status page.

* **authenticationState**

  **SubscribableSignalLike\<AuthenticationState>**

  **required**

  The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in.

  Read-only. The authentication level can't be changed programmatically.

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

  ```ts
  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.

  ```ts
  () => 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.

  ```ts
  (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.

  ```ts
  T
  ```

### AuthenticationState

The buyer's authentication status on the \*\*Order status\*\* page: - \`'fully\_authenticated'\`: The buyer has logged in to their customer account. - \`'pre\_authenticated'\`: The buyer accessed the page via a direct link, such as from an order confirmation email, without logging in.

```ts
'fully_authenticated' | 'pre_authenticated'
```

Examples

### Examples

* ####

  ##### Description

  Display different UI depending on whether the buyer is fully authenticated or pre-authenticated. This example reads \`shopify.authenticationState\` and renders detailed order actions for authenticated buyers or an informational banner for others.

  ##### jsx

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

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

  function Extension() {
    const authState =
      shopify.authenticationState.value;

    if (authState === 'fully_authenticated') {
      return (
        <s-box padding="base">
          <s-stack direction="block" gap="small-200">
            <s-text type="strong">
              Order Actions
            </s-text>
            <s-button>Request a return</s-button>
            <s-button>Report an issue</s-button>
          </s-stack>
        </s-box>
      );
    }

    return (
      <s-banner tone="info">
        Sign in to access order actions like returns
        and issue reporting.
      </s-banner>
    );
  }
  ```

* ####

  ##### Description

  Detect pre-authenticated buyers and encourage them to log in for a richer experience. This example checks \`shopify.authenticationState\` and displays a login prompt with a button that calls \`shopify.requireLogin()\`.

  ##### jsx

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

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

  function Extension() {
    const authState =
      shopify.authenticationState.value;

    if (authState === 'pre_authenticated') {
      return (
        <s-banner tone="warning">
          <s-stack direction="block" gap="small-200">
            <s-text>
              You are viewing a limited version of
              this page. Sign in to see full order
              details and manage your account.
            </s-text>
            <s-button
              onClick={() => shopify.requireLogin()}
            >
              Sign in
            </s-button>
          </s-stack>
        </s-banner>
      );
    }

    return (
      <s-text color="subdued">
        You are fully authenticated.
      </s-text>
    );
  }
  ```

* ####

  ##### Description

  Show different levels of detail based on the buyer's authentication state. This example renders the full shipping address for fully authenticated buyers and only the city and country for pre-authenticated buyers.

  ##### jsx

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

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

  function Extension() {
    const authState =
      shopify.authenticationState.value;
    const isFullyAuthenticated =
      authState === 'fully_authenticated';

    return (
      <s-box padding="base">
        <s-stack direction="block" gap="small-200">
          <s-text type="strong">
            Shipping Details
          </s-text>
          {isFullyAuthenticated ? (
            <s-stack direction="block" gap="small-200">
              <s-text>123 Main Street</s-text>
              <s-text>Apt 4B</s-text>
              <s-text>New York, NY 10001</s-text>
              <s-text>United States</s-text>
            </s-stack>
          ) : (
            <s-stack direction="block" gap="small-200">
              <s-text>New York, NY</s-text>
              <s-text color="subdued">
                Sign in to see full address details.
              </s-text>
            </s-stack>
          )}
        </s-stack>
      </s-box>
    );
  }
  ```

***

## Best practices

* **Combine with Require Login API**: Use `authenticationState` to check the current state and [`requireLogin()`](https://shopify.dev/docs/api/customer-account-ui-extensions/target-apis/account-apis/require-login-api) to trigger a login prompt when full authentication is needed.
* **Degrade gracefully for pre-authenticated users**: Design your extension to show useful but non-sensitive content for pre-authenticated users, and offer a sign-in prompt for more detailed information.

***