---
title: Require Login API
description: >-
  The Require Login API lets your extension prompt pre-authenticated buyers to
  log in on the Order status page. Use this API to gate sensitive content and
  actions behind full authentication by calling the requireLogin() function.
api_version: 2026-04
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/account-apis/require-login-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/account-apis/require-login-api.md
---

# Require Login API

The Require Login API lets your extension prompt pre-authenticated buyers to log in on the [Order status page](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/order-status). Use this API to gate sensitive content and actions behind full authentication by calling the `requireLogin()` function.

This API is available only on the Order status page. It isn't available on other customer account extension targets.

### Use cases

* **Gate sensitive information**: Prompt the buyer to sign in before showing detailed order data, account-specific actions, or personalized content.
* **Enforce authentication for actions**: Require sign-in before allowing the buyer to perform actions like initiating a return or updating their address.

### 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 login prompt method. Call `requireLogin()` on `shopify` to trigger a login prompt for pre-authenticated buyers.

* **requireLogin**

  **() => Promise\<void>**

  **required**

  Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page. Use this to require full authentication before displaying sensitive information in your extension.

  Triggers a login prompt for pre-authenticated buyers. Doesn't guarantee the buyer completes the login. Handle the dismissal case in your code.

Examples

### Examples

* ####

  ##### Description

  Prompt the buyer to log in before showing detailed order data. This example checks \`shopify.authenticationState\` and calls \`shopify.requireLogin()\` for pre-authenticated buyers, then displays tracking details once authenticated.

  ##### jsx

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

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

  function Extension() {
    const [showDetails, setShowDetails] =
      useState(false);
    const authState =
      shopify.authenticationState.value;

    async function viewSensitiveDetails() {
      if (authState !== 'fully_authenticated') {
        await shopify.requireLogin();
        return;
      }
      setShowDetails(true);
    }

    if (showDetails) {
      return (
        <s-box padding="base">
          <s-stack direction="block" gap="small-200">
            <s-text type="strong">
              Order Details
            </s-text>
            <s-text>
              Tracking: 1Z999AA10123456784
            </s-text>
            <s-text>
              Carrier: UPS Ground
            </s-text>
          </s-stack>
        </s-box>
      );
    }

    return (
      <s-box padding="base">
        <s-stack direction="block" gap="small-200">
          <s-text>
            Sign in to view sensitive order details
            like tracking numbers.
          </s-text>
          <s-button onClick={viewSensitiveDetails}>
            View details
          </s-button>
        </s-stack>
      </s-box>
    );
  }
  ```

* ####

  ##### Description

  Require the buyer to log in before performing an action like initiating a return. This example calls \`shopify.requireLogin()\` and then checks \`shopify.authenticationState\` to verify the buyer completed login before proceeding.

  ##### jsx

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

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

  function Extension() {
    const [submitted, setSubmitted] =
      useState(false);

    async function initiateReturn() {
      await shopify.requireLogin();

      const authState =
        shopify.authenticationState.value;
      if (authState !== 'fully_authenticated') {
        return;
      }

      setSubmitted(true);
    }

    if (submitted) {
      return (
        <s-banner tone="success">
          Your return request has been submitted.
          We will send a confirmation email shortly.
        </s-banner>
      );
    }

    return (
      <s-box padding="base">
        <s-stack direction="block" gap="small-200">
          <s-text type="strong">
            Need to return an item?
          </s-text>
          <s-text>
            You will be asked to log in before
            submitting a return request.
          </s-text>
          <s-button onClick={initiateReturn}>
            Start a return
          </s-button>
        </s-stack>
      </s-box>
    );
  }
  ```

* ####

  ##### Description

  Avoid unnecessary login prompts by checking the authentication state first. This example reads \`shopify.authenticationState\` and only calls \`shopify.requireLogin()\` when the buyer is \`pre\_authenticated\`.

  ##### 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';

    async function handleEditProfile() {
      if (!isFullyAuthenticated) {
        await shopify.requireLogin();
        return;
      }
      shopify.navigation.navigate(
        'extension://profile/edit',
      );
    }

    return (
      <s-box padding="base">
        <s-stack direction="block" gap="small-200">
          <s-text type="strong">
            Account Settings
          </s-text>
          <s-text>
            {isFullyAuthenticated
              ? 'Manage your account preferences.'
              : 'Sign in to manage your account.'}
          </s-text>
          <s-button onClick={handleEditProfile}>
            Edit profile
          </s-button>
        </s-stack>
      </s-box>
    );
  }
  ```

***

## Best practices

* **Check authentication state first**: Use the [Authentication State API](https://shopify.dev/docs/api/customer-account-ui-extensions/target-apis/account-apis/authentication-state-api) to check if the buyer is `pre_authenticated` before calling `requireLogin()`. Calling it on an already authenticated buyer has no effect.
* **Use for sensitive content**: Only prompt for sign-in when your extension needs to display information that requires full authentication, such as detailed customer data or account-specific actions.
* **Handle dismissal gracefully**: `requireLogin()` triggers a login prompt but doesn't guarantee the buyer completes it. Handle the case where the buyer dismisses the prompt.

***