Choose a version:

Require Login API

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.

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

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

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

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>

like tracking numbers.

</s-text>

<s-button onClick={viewSensitiveDetails}>

View details

</s-button>

</s-stack>

</s-box>

);

}

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

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

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

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

Anchor to Best practicesBest practices

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

Was this page helpful?