Authentication State API

Examples

• Description

  Read the buyer's authentication state and display whether they're fully authenticated or pre-authenticated. This example uses the `useAuthenticationState` hook to render the current status as text.

  React

  import {
    reactExtension,
    useAuthenticationState,
  } from '@shopify/ui-extensions-react/customer-account';
  import {Banner, Text} from '@shopify/ui-extensions/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const authState = useAuthenticationState();
    return (
      <Banner status={authState === 'fully_authenticated' ? 'success' : 'warning'}>
        <Text>
          {authState === 'fully_authenticated'
            ? 'You are fully logged in.'
            : 'You are viewing this page through a shared link.'}
        </Text>
      </Banner>
    );
  }

  TS

  import {extension, Banner, Text} from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, api) => {
      const authState = api.authenticationState.current;
      const banner = root.createComponent(
        Banner,
        {status: authState === 'fully_authenticated' ? 'success' : 'warning'},
      );
      banner.appendChild(
        root.createComponent(
          Text, {},
          authState === 'fully_authenticated'
            ? 'You are fully logged in.'
            : 'You are viewing this page through a shared link.',
        ),
      );
      root.appendChild(banner);
    },
  );

• Description

  Show different content depending on whether the buyer is fully authenticated or pre-authenticated. This example uses `useAuthenticationState` to conditionally render a full dashboard or a limited view.

  React

  import {
    reactExtension,
    useAuthenticationState,
  } from '@shopify/ui-extensions-react/customer-account';
  import {BlockStack, Text, Link} from '@shopify/ui-extensions/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const authState = useAuthenticationState();
  
    if (authState !== 'fully_authenticated') {
      return <Text appearance="subdued">Log in to see personalized recommendations.</Text>;
    }
  
    return (
      <BlockStack>
        <Text emphasis="bold">Recommended for you</Text>
        <Link to="https://example.com/recommendations">View recommendations</Link>
      </BlockStack>
    );
  }

  TS

  import {extension, BlockStack, Text, Link} 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(Text, {appearance: 'subdued'}, 'Log in to see personalized recommendations.'),
        );
        return;
      }
  
      const stack = root.createComponent(BlockStack, {});
      stack.appendChild(root.createComponent(Text, {emphasis: 'bold'}, 'Recommended for you'));
      stack.appendChild(root.createComponent(Link, {to: 'https://example.com/recommendations'}, 'View recommendations'));
      root.appendChild(stack);
    },
  );

• Description

  Check the authentication state before allowing the buyer to perform sensitive actions. This example uses `useAuthenticationState` to gate a button behind full authentication.

  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 [loading, setLoading] = useState(false);
  
    if (authState === 'fully_authenticated') {
      return <Button onPress={() => {}}>Manage subscription</Button>;
    }
  
    return (
      <Banner status="warning">
        <Text>Log in to manage your subscription.</Text>
        <Button
          disabled={loading}
          onPress={async () => {
            setLoading(true);
            await requireLogin();
            setLoading(false);
          }}
        >
          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: () => {}}, 'Manage subscription'));
        return;
      }
  
      const banner = root.createComponent(Banner, {status: 'warning'});
      banner.appendChild(root.createComponent(Text, {}, 'Log in to manage your subscription.'));
      banner.appendChild(
        root.createComponent(Button, {onPress: async () => { await api.requireLogin(); }}, 'Log in'),
      );
      root.appendChild(banner);
    },
  );