---
title: Require Login API
description: >-
  The Require Login API triggers a sign-in prompt for buyers viewing a
  pre-authenticated order status page. Use it to require the buyer to sign in
  before performing sensitive actions.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/account-apis/require-login-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/account-apis/require-login-api.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Require Login API

The Require Login API triggers a sign-in prompt for buyers viewing a pre-authenticated order status page. Use it to require the buyer to sign in before performing sensitive actions.

### 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/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)

### Properties

The Require Login API object provides the `requireLogin` method. Access it on the API object to trigger a login prompt.

* **requireLogin**

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

  **required**

  Triggers a login prompt if the buyer is viewing a pre-authenticated **Order status** page. Returns a promise that resolves when the login prompt is dismissed or completed.

Examples

### Examples

* ####

  ##### Description

  Prompt the buyer to log in before performing an action, using the requireLogin method from the API. This example calls \`requireLogin()\` on button press and awaits the returned promise.

  ##### React

  ```tsx
  import React, {useState} from 'react';
  import {
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/customer-account';
  import {Button} from '@shopify/ui-extensions/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const {requireLogin} = useApi<'customer-account.order-status.block.render'>();
    const [loading, setLoading] = useState(false);

    async function handleAction() {
      setLoading(true);
      await requireLogin();
      setLoading(false);
    }

    return <Button disabled={loading} onPress={handleAction}>Report an issue</Button>;
  }
  ```

  ##### TS

  ```ts
  import {extension, Button} from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      root.appendChild(
        root.createComponent(
          Button,
          {onPress: async () => { await api.requireLogin(); }},
          'Report an issue',
        ),
      );
    },
  );
  ```

* ####

  ##### Description

  Check the authentication state and only prompt login if the buyer is pre-authenticated. This example combines \`useAuthenticationState\` with \`requireLogin()\` to avoid unnecessary prompts.

  ##### React

  ```tsx
  import {
    reactExtension,
    useAuthenticationState,
    useApi,
  } from '@shopify/ui-extensions-react/customer-account';
  import {Banner, Button, Text} from '@shopify/ui-extensions/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const authState = useAuthenticationState();
    const {requireLogin, navigation} = useApi<'customer-account.order-status.block.render'>();

    if (authState === 'fully_authenticated') {
      return <Button onPress={() => navigation.navigate('extension:loyalty/')}>View loyalty points</Button>;
    }

    return (
      <Banner status="info">
        <Text>Log in to view your loyalty points.</Text>
        <Button onPress={() => requireLogin()}>Log in</Button>
      </Banner>
    );
  }
  ```

  ##### TS

  ```ts
  import {extension, Banner, Button, Text} from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const authState = api.authenticationState.current;
      if (authState === 'fully_authenticated') {
        root.appendChild(
          root.createComponent(Button, {onPress: () => api.navigation.navigate('extension:loyalty/')}, 'View loyalty points'),
        );
        return;
      }
      const banner = root.createComponent(Banner, {status: 'info'});
      banner.appendChild(root.createComponent(Text, {}, 'Log in to view your loyalty points.'));
      banner.appendChild(root.createComponent(Button, {onPress: () => api.requireLogin()}, 'Log in'));
      root.appendChild(banner);
    },
  );
  ```

* ####

  ##### Description

  Wrap multiple actions with a login requirement to enforce authentication before proceeding. This example creates a reusable handler that calls \`requireLogin()\` before executing the protected action.

  ##### React

  ```tsx
  import React, {useState} from 'react';
  import {
    reactExtension,
    useAuthenticationState,
    useApi,
  } from '@shopify/ui-extensions-react/customer-account';
  import {Banner, Button, Text} from '@shopify/ui-extensions/customer-account';

  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );

  function Extension() {
    const authState = useAuthenticationState();
    const {requireLogin} = useApi<'customer-account.order-status.block.render'>();
    const [submitted, setSubmitted] = useState(false);

    async function handleSubmit() {
      if (authState !== 'fully_authenticated') {
        await requireLogin();
      }
      setSubmitted(true);
    }

    if (submitted) {
      return (
        <Banner status="success">
          <Text>Warranty claim submitted.</Text>
        </Banner>
      );
    }

    return <Button onPress={handleSubmit}>Submit warranty claim</Button>;
  }
  ```

  ##### TS

  ```ts
  import {extension, Banner, Button, Text} from '@shopify/ui-extensions/customer-account';

  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const button = root.createComponent(
        Button,
        {
          onPress: async () => {
            const authState = api.authenticationState.current;
            if (authState !== 'fully_authenticated') {
              await api.requireLogin();
            }
            root.removeChild(button);
            const banner = root.createComponent(Banner, {status: 'success'});
            banner.appendChild(root.createComponent(Text, {}, 'Warranty claim submitted.'));
            root.appendChild(banner);
          },
        },
        'Submit warranty claim',
      );
      root.appendChild(button);
    },
  );
  ```

***

## 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 whether the buyer is already authenticated before calling `requireLogin`.
* **Don't block the initial render**: Call `requireLogin` in response to a buyer action, not during the initial render. This avoids unexpected login prompts when the page loads.

***

## Limitations

* `requireLogin()` only triggers a login prompt — it doesn't guarantee the buyer will complete the login. Your extension should gracefully handle the case where the buyer dismisses the prompt.
* This API is only available on the Order status page. It isn't available on other customer account extension targets.

***