Choose a version:

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.

Pre-authenticated buyers may have limited access to protected customer data, which can cause some API properties to return undefined.

Anchor to Use casesUse 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

Anchor to PropertiesProperties

The shopify global object provides the authentication state. Access the following property on shopify to determine how the buyer accessed the Order status page.

Anchor to authenticationState 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.
```
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
```

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.

'fully_authenticated' | 'pre_authenticated'

Examples

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">

and issue reporting.

</s-banner>

);

}

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

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

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

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>
  );
}

Anchor to Best practicesBest practices

Combine with Require Login API: Use authenticationState to check the current state and requireLogin() 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.

Was this page helpful?