Require Login API

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