All extension targets on the **Order status** page render in a pre-authenticated and authenticated state, allowing customers to interact with extensions and seamlessly log into their account.

## How it works

The **Order status** page supports three different customer authentication states: unauthenticated, pre-authenticated, and fully authenticated, each with a unique customer experience in order to protect customer information in unauthenticated states.

In the following examples, we’ll create two extensions: the first will allow a customer to add a note to their order, the second to collect loyalty points on their purchase. Since the customer will not yet be fully authenticated, each example will require the customer to log in before performing the desired action. The `customer-account.order.action.menu-item.render` target supports seamless login, whereas the `customer-account.order-status.block.render` target requires use of the [`requireLogin`](/docs/api/customer-account-ui-extensions/apis/order-status-api/require-login) API to trigger the authentication flow.

## Limitations

Your store must be using the newest version of the **Order status** page. To check if you're on the newest version, ensure you've upgraded to Checkout Extensibility in your [Checkout settings](https://admin.shopify.com/settings/checkout).

## UX guidelines
Each extension should only include one extension target.


## Developer tools and resources

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/customer-account-ui-extensions/extension-targets-overview" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/library"
     data-alt-src="/assets/resource-cards/library-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Target overview
    </h3>
    <p class="resource-card__description">Explore all extension targets available for customer account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Checkout UI extension components
    </h3>
    <p class="resource-card__description">Explore the checkout components you can also use to build customer account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/api/customer-account-ui-extensions/components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/blocks"
     data-alt-src="/assets/resource-cards/blocks-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Customer account UI extension components
    </h3>
    <p class="resource-card__description">Explore the components you can use to build customer account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="https://www.figma.com/community/file/1304881365343613949/checkout-and-account-components" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/hearts"
     data-alt-src="/assets/resource-cards/hearts-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Figma UI kit
    </h3>
    <p class="resource-card__description">Figma components for checkout and customer account UI extensions.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/apps/customer-accounts/order-status-page#authentication-states" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/resource"
     data-alt-src="/assets/resource-cards/resource-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      <strong>Order status</strong> page authentication states
    </h3>
    <p class="resource-card__description">Learn about the authentication states of the <strong>Order status</strong> page.</p>
  </a>
</div>
</div>


## Next steps

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/apps/build/customer-accounts/pre-auth-order-status-page-extensions/build-pre-auth-order-status-page-extensions" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/growth"
     data-alt-src="/assets/resource-cards/growth-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Building Pre-auth <strong>Order status</strong> page extensions
    </h3>
    <p class="resource-card__description">Build Pre-auth <strong>Order status</strong> page extensions.</p>
  </a>
</div>
</div>