Require Login API

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