---
gid: 5675c8b6-96fb-4953-9e27-63a8aa672e18
title: Build Pre-auth Order Status page extensions
description: Learn how to build Pre-auth Order Status page extensions by creating a loyalty app and integrating it into the order status page.
---

import CustomerAccountUiCreate from 'app/views/partials/apps/customer-accounts/ui-extensions/create.mdx'
import CustomerAccountUiPreview from 'app/views/partials/apps/customer-accounts/ui-extensions/preview.mdx'
import UiExtensionRequirements from 'app/views/partials/apps/customer-accounts/ui-extensions/requirements.mdx'

<Repo
  extension="react"
  href="https://github.com/Shopify/customer-account-tutorials/tree/main/react/example-customer-account--pre-auth--react"
/>
<Repo
  extension="javascript"
  href="https://github.com/Shopify/customer-account-tutorials/tree/main/javascript/example-customer-account--pre-auth--js"
/>

<Picker name="extension">
  <PickerOption name="react" />
  <PickerOption name="javascript" />
</Picker>

<Overview>

  In this tutorial, you'll create two separate customer account extensions, with each using different targets to demonstrate the available authentication flows:
  - An order action menu item that opens a modal and prompts the customer to add a note to their order after logging in.
  - An extension on the **Order status** page that displays how many loyalty points were earned from the purchase, in a card at the top of the order summary.


  ![Order Action Menu Target](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/order_action_menu_target.png)

  ![Order Summary Target](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/order_summary_target.png)

  ## What you'll learn

  In this tutorial, you'll learn how to do the following tasks:
  - Use the `authenticationState` API to get the authorization context of a customer.
  - Create an order action menu extension that opens a modal and uses the seamless login method to trigger customer authentication.
  - Create an extension that's rendered inline on the **Order status** page and uses the `requireLogin` API to trigger customer authentication.

</Overview>

<Requirements>
  <UiExtensionRequirements />
</Requirements>


<StepSection>
  ## Order action menu and seamless login

  <Step>
     ### Create a customer account UI extension

    <Substep>
      <CustomerAccountUiCreate />
    </Substep>
  </Step>

  <Step>
    ### Set up the target for your extension
    Set up the target for your Customer account UI extension. [Targets](/docs/api/customer-account-ui-extensions/latest/targets) control where your extension renders in the customer account flow.

    <Substep>

      <CodeRef
        extension="react"
        tag="config.setup-targets"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-note/shopify.extension.toml" />

      <CodeRef
        extension="javascript"
        tag="config.setup-targets"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-note/shopify.extension.toml" />


      This example code uses the following targets:

      <Resources>
        [customer-account.order.action.menu-item.render](/docs/api/customer-account-ui-extensions/latest/targets/order-action-menu/customer-account-order-action-menu-item-render) to render a button in the order action menu.
        [customer-account.order.action.render](/docs/api/customer-account-ui-extensions/latest/targets/order-action-menu/customer-account-order-action-render) to render a modal when the button is clicked.
      </Resources>

      In your extension's [`shopify.extension.toml`](/docs/apps/build/app-extensions/configure-app-extensions) configuration file, for each of the targets, create an `[[extensions.targeting]]` section with the following information:

      - **`target`**: An identifier that specifies where you're injecting code into Shopify.
      - **`module`**: The path to the file that contains the extension code.

      ---

      <Notice type="info">
        Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.
      </Notice>

    </Substep>
    <Substep>
      #### Create files for your targets

    <CodeRef
      extension="react"
      tag="menu-action.setup-target"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-note/src/MenuActionItemButtonExtension.tsx" />

    <CodeRef
      extension="javascript"
      tag="menu-action.setup-target"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-note/src/MenuActionItemButtonExtension.js" />


    <CodeRef
      extension="react"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-note/src/MenuActionModalExtension.tsx" />

    <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-note/src/MenuActionModalExtension.js" />


      Create files in your extension's `src` directory for each of your targets.

      In this example, you'll create a file for the order action menu item extension and a file for the order action modal extension. The filenames must match the `module` [paths you specified](#reference-the-targets-in-your-configuration-file).

    </Substep>
  </Step>

  <Step>
    ### Build the order action menu item and modal

      <Substep>
      #### Render the button

      <CodeRef
        extension="react"
        tag="menu-action.render-button"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-note/src/MenuActionItemButtonExtension.tsx" />

      <CodeRef
        extension="javascript"
        tag="menu-action.render-button"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-note/src/MenuActionItemButtonExtension.js" />

        Now you'll render the `Add note` order action button. The button isn't being passed a `to` or `onPress` prop. This is how we know to connect this button to the order action modal extension.

        ---

         ![Order action menu](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/add_note_button.png)
    </Substep>

      <Substep>
      #### Build the modal's UI


      <CodeRef
        extension="react"
        tag="menu-action-modal.render-modal"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-note/src/MenuActionModalExtension.tsx" />

      <CodeRef
        extension="javascript"
        tag="menu-action-modal.render-modal"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-note/src/MenuActionModalExtension.js" />

        Use `CustomerAccountAction` to extend the target. Here, you'll use `Form`, `TextField` and `Button` components to add a note to the order.

        ---

        Customer account UI extensions are limited to specific UI components exposed by the platform [for security reasons](/docs/api/checkout-ui-extensions#security). You can use checkout UI components and customer account UI components to create a UI that feels seamless within the customer accounts experience, and that inherits a merchant's brand settings.

        <Resources>
          [TextField](/docs/api/checkout-ui-extensions/unstable/components/forms/textfield)
          [InlineStack](/docs/api/checkout-ui-extensions/unstable/components/structure/inlinestack)
          [BlockStack](/docs/api/checkout-ui-extensions/unstable/components/structure/blockStack)
          [Form](/docs/api/checkout-ui-extensions/unstable/components/forms/form)
          [Button](/docs/api/checkout-ui-extensions/unstable/components/actions/button)
          [CustomerAccountAction](/docs/api/customer-account-ui-extensions/unstable/components/customeraccountaction)
      </Resources>

        ---
        ![modal open](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/modal_open.png)

    </Substep>

      <Substep>
      #### Make an API call to store the order note once the customer is logged in


      <CodeRef
        extension="react"
        tag="menu-action-modal.make-request"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-note/src/MenuActionModalExtension.tsx" />

      <CodeRef
        extension="javascript"
        tag="menu-action-modal.make-request"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-note/src/MenuActionModalExtension.js" />

        The example code uses a comment line to mock the adding note request call. In a production-ready application, make an API call to your server.

    </Substep>

  </Step>

  <Step>
    ### Preview the extension

    Preview your extension to make sure that it works as expected.

    <Substep>
      <CustomerAccountUiPreview />
    </Substep>
    <Substep>

      1. Ensure that you're logged out.

      2. Copy the URL of **Order status** page from a recent order confirmation email, and paste it to the browser directly to be taken to the pre-auth **Order status** page where your extension will render.

      3. Click the "Add Note" button, and you will be redirected to the login page.

      4. After you login, you will see the modal opened automatically where you can leave a note.

      ---
      ![Order action menu](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/add_note_button.png)

      ---
      ![modal open](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/modal_open.png)

      ---

      <Notice type="info">
        To test extensions in pre-authenticated state, the customer shouldn't be logged in. Copy and paste the URL of the **Order status** page from the order confirmation email is the best way to test it.

        By default, the URL is valid for five uses or two weeks after the order is placed, whichever limit is reached first. If the URL expires, you will need to place a new order to receive a new one.
      </Notice>
    </Substep>
  </Step>

  ## Inline extension on the **Order status** page and requireLogin

  <Step>
    ### Repeat Step 1 to create a new customer account UI extension
  </Step>

  <Step>
    ### Set up the target for your extension
    Set up the target for your Customer account UI extension. [Targets](/docs/api/customer-account-ui-extensions/latest/targets) control where your extension renders in the customer account flow.

    <Substep>

      <CodeRef
          extension="react"
          tag="config.setup-targets"
          href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/shopify.extension.toml" />

      <CodeRef
          extension="javascript"
          tag="config.setup-targets"
          href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/shopify.extension.toml" />

        The example code uses `customer-account.order-status.block.render` to render a card in the order summary on the **Order status** page.

        In your extension's configuration file, for the `customer-account-order-status-block-render` target, create an `[[extensions.targeting]]` section with the following information:

          **`target`**: An identifier that specifies where you're injecting code into Shopify.

          **`module`**: The path to the file that contains the extension code.

        <Notice type="info">
          Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.
        </Notice>

    </Substep>
    <Substep>
      #### Create files for your targets


    <CodeRef
      extension="react"
      tag="order-status-block.setup-target"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.tsx" />

    <CodeRef
      extension="javascript"
      tag="order-status-block.setup-target"
      href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.js" />

      Create files in your extension's `src` directory for each of your targets.

      In this example, you'll create a file for the order status block extension. The filenames must match the `module` [paths you specified](#reference-the-targets-in-your-configuration-file).

    </Substep>
  </Step>


  <Step>
    ### Order status block extension

    <Substep>

      <CodeRef
        extension="react"
        tag="order-status-block.render-card"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.tsx" />

      <CodeRef
        extension="javascript"
        tag="order-status-block.render-card"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.js" />

      #### Render loyalty points card

      Using UI extension components, add a card to the **Order status** page to let the customer know how many loyalty points they've earned for the order.

    </Substep>

    <Substep>

      <CodeRef
        extension="react"
        tag="order-status-block.require-login"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.tsx" />

      <CodeRef
        extension="javascript"
        tag="order-status-block.require-login"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.js" />


      #### Use the `requireLogin` API to direct the customer to login

    </Substep>

    <Substep>

      <CodeRef
        extension="react"
        tag="order-status-block.check-authentication-state"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.tsx" />

      <CodeRef
        extension="react"
        tag="order-status-block.check-authentication-state"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.js" />


      #### Determine the authentication state with authenticationState API

      Using the `authenticationState` API to get the current **Order status** page authentication state. You'll use this later in the tutorial.

    </Substep>

    <Substep>

      <CodeRef
        extension="react"
        tag="order-status-block.pre-authenticated-content"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.tsx" />

      <CodeRef
        extension="react"
        tag="order-status-block.pre-authenticated-content"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.js" />

      #### Render pre-authenticated state content

      The extension adds a **View rewards** link to the card. Use the `requireLogin` API to direct the customer to login when the link is clicked. This method routes the customer back to the **Order status** page. The customer will need to re-initiate the action after they're logged in.

      ---
      ![Loyalty points in pre-authenticated state](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/loyalty_pre.png)

    </Substep>

    <Substep>

      <CodeRef
        extension="react"
        tag="order-status-block.fully-authenticated-content"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--pre-auth--react/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.tsx" />

      <CodeRef
        extension="react"
        tag="order-status-block.fully-authenticated-content"
        href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--pre-auth--js/extensions/customer-account-pre-auth-loyalty/src/BlockLoyaltyExtension.js" />


      #### Render fully authenticated state content

      In this example, the number of points is hardcoded.

      ---
      ![Loyalty points in the fully authenticated state](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/loyalty_fully.png)

    </Substep>

  </Step>

    <Step>
    ### Preview the extension

    Preview your extension to make sure that it works as expected.

    <Substep>
      <CustomerAccountUiPreview />
    </Substep>
    <Substep>
      1. Place an order, if you haven't already.

      2. Click **View your order** from the order confirmation email to access the pre-authenticated **Order status** page. Don't log in.

      3. Click the **View rewards** link, and you will be redirected to the login page.

      4. After you login, you will be redirected back to the **Order Status** page and see your points balance.

      ---
      ![Loyalty points in pre-authenticated state](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/loyalty_pre.png)

      ---
      ![Loyalty points in fully authenticated state](/assets/apps/customer-accounts/pre-auth-order-status-page-extensions/loyalty_fully.png)

      ---
      <Notice type="info">
        To test extensions in the pre-authenticated state, click **View your order** from the order confirmation email to access the pre-authenticated **Order status** page. Don't log in.

        By default, the URL only works for 5 times and within 2 weeks. So if the URL is expired, you need to create a new order to get a new URL.
      </Notice>
    </Substep>
  </Step>
</StepSection>



<NextSteps>

  ## Tutorial complete!

    Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources.

  ### Next Steps

  <CardGrid>
    <LinkCard href="/docs/apps/customer-accounts/best-practices/deciding-extension-placement">
      #### Extension placement
      Explore extension placement options and make informed decisions on where to position them.
    </LinkCard>

    <LinkCard href="/docs/apps/customer-accounts/best-practices/localizing-ui-extensions">
      #### Localize your extension
      Learn about localizing your customer account UI extensions for international merchants and customers.
    </LinkCard>

    <LinkCard href="/docs/api/customer-account-ui-extensions/targets">
      #### Extension targets
      Learn about the extension targets offered for customer accounts.
    </LinkCard>

     <LinkCard href="/docs/apps/customer-accounts/best-practices/ux-guidelines">
      #### UX guidelines
      Follow our UX guidelines for customer accounts to ensure a consistent and satisfying user experience.
    </LinkCard>

    <LinkCard href="/docs/api/customer-account-ui-extensions/components">
      #### Customer account components
      Learn about the components you can use to build customer account UI extensions.
    </LinkCard>

    <LinkCard href="/docs/api/checkout-ui-extensions/unstable/components">
       #### Checkout components
       Learn about the checkout components you can use to build customer account UI extensions.
    </LinkCard>

    <LinkCard href="/docs/apps/customer-accounts/order-status-page#authentication-states">
       #### Order status page authentication states
       Learn about the difference between each authentication state on the **Order status** page.
    </LinkCard>

  </CardGrid>
</NextSteps>