Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

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.

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

Anchor to PropertiesProperties

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

Anchor to requireLogin 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

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

}

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

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

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

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

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

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

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

Anchor to Best practicesBest practices

Check authentication state first: Use the 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.

Anchor to LimitationsLimitations

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.

Was this page helpful?