Session Token API

Examples

• Fetch data with a session token

  Description

  Retrieve a session token and pass it as a Bearer token to authenticate a request to your app's backend. This example uses `shopify.sessionToken.get()` to obtain the token and includes it in the `Authorization` header of a fetch call.

  React

  import {useEffect} from 'react';
  import {
    reactExtension,
    Banner,
    useApi,
  } from '@shopify/ui-extensions-react/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const {sessionToken} = useApi();
  
    useEffect(() => {
      async function queryApi() {
        // Request a new (or cached) session token from Shopify
        const token = await sessionToken.get();
        console.log('sessionToken.get()', token);
  
        const apiResponse =
          await fetchWithToken(token);
        // Use your response
        console.log('API response', apiResponse);
      }
  
      function fetchWithToken(token) {
        const result = fetch(
          'https://myapp.com/api/session-token',
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          },
        );
        return result;
      }
  
      queryApi();
    }, [sessionToken]);
  
    return (
      <Banner>See console for API response</Banner>
    );
  }

  TS

  import {
    extension,
    Banner,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    (root, {sessionToken}) => {
      async function queryApi() {
        // Request a new (or cached) session token from Shopify
        const token = await sessionToken.get();
        console.log('sessionToken.get()', token);
  
        const apiResponse =
          await fetchWithToken(token);
  
        // Use your response
        console.log('API response', apiResponse);
      }
  
      function fetchWithToken(token) {
        const result = fetch(
          'https://myapp.com/api/session-token',
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          },
        );
  
        return result;
      }
  
      queryApi();
  
      root.appendChild(
        root.createComponent(
          Banner,
          {},
          'See console for API response',
        ),
      );
    },
  );

• Description

  Review the structure of a decoded session token to understand the available claims. This example shows the JSON payload including the `dest`, `aud`, `exp`, and optional `sub` claims.

  Session token claims

  {
    // Shopify URL
    "dest": "store-name.myshopify.com",
    // The Client ID of your app
    "aud": "<clientId>",
    // When the token expires.  Set at 5 minutes.
    "exp": 1679954053,
    // When the token was actived
    "nbf": 1679953753,
    // When the token was issued
    "iat": 1679953753,
    // A unique identifier (a nonce) to prevent replay attacks
    "jti": "6c992878-dbaf-48d1-bb9d-6d9b59814fd1",
    // Optional claim present when a customer is logged in and your app has permissions to read customer data
    "sub": "gid://shopify/Customer/<customerId>"
  }

• Identify the customer from a session token

  Description

  Send the session token to your app backend to identify the signed-in customer. Your backend decodes and verifies the token, then returns the customer ID. This requires [access to protected customer data](/docs/apps/store/data-protection/protected-customer-data).

  React

  import {useEffect, useState} from 'react';
  import {
    reactExtension,
    useApi,
    Text,
  } from '@shopify/ui-extensions-react/customer-account';
  
  export default reactExtension(
    'customer-account.order-status.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    const {sessionToken} = useApi();
    const [customerId, setCustomerId] =
      useState<string | null>(null);
  
    useEffect(() => {
      async function identify() {
        const token = await sessionToken.get();
        const response = await fetch(
          'https://my-app.com/api/customer',
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          },
        );
        const {customerId} =
          await response.json();
        setCustomerId(customerId);
      }
      identify();
    }, [sessionToken]);
  
    return (
      <Text>
        {customerId
          ? `Customer: ${customerId}`
          : 'Loading...'}
      </Text>
    );
  }

  TS

  import {
    extension,
    Text,
  } from '@shopify/ui-extensions/customer-account';
  
  export default extension(
    'customer-account.order-status.block.render',
    async (root, {sessionToken}) => {
      const loading = root.createComponent(
        Text,
        {},
        'Loading...',
      );
      root.appendChild(loading);
  
      const token = await sessionToken.get();
      const response = await fetch(
        'https://my-app.com/api/customer',
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );
      const {customerId} =
        await response.json();
  
      loading.replaceChildren(
        `Customer: ${customerId}`,
      );
    },
  );