Session Token

The API for interacting with session tokens.

Using a session token with fetch()

import {useEffect} from 'react';
import {
  reactExtension,
  Banner,
  useApi,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.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>
  );
}

import {
  extension,
  Banner,
  BlockStack,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root, {sessionToken}) => {
    async function queryApi() {
      // Request a new (or cached) session token from Shopify
      const token = await sessionToken.get();
      console.log(token);

      const apiResponse =
        await fetchWithToken(token);

      // Use your response
      console.log(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, {
        title: 'Session Token Extension',
      }),
    );
  },
);

StandardApi

The base API object provided to `purchase` extension targets.

Docs_Standard_SessionTokenApi

sessionToken

The session token providing a set of claims as a signed JSON Web Token (JWT). The token has a TTL of 5 minutes. If the previous token expires, this value will reflect a new session token with a new signature and expiry. Refer to [session token examples](/docs/api/checkout-ui-extensions/apis/session-token) for more information.

SessionToken

get

Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself.

useSessionToken

Returns a the session token API object.

UseSessionTokenGeneratedType

Provides access to session tokens, which can be used to verify token claims on your app's server.

Returns: SessionToken

export function useSessionToken< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): SessionToken { return useApi<Target>().sessionToken; }

SessionToken

get

Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself.

Related

  • Targets
  • Components
  • Configuration
  • Tutorials

Examples

The API for interacting with session tokens.

The contents of the token are signed using your shared app secret. The optional `sub` claim contains the customer's `gid` if they are logged in and your app has permission to read customer accounts. For example, a loyalty app that needs to check a customer's point balance can use the `sub` claim to verify the customer's account. > Caution: > Your app server can only trust the claims within the session token. It cannot use the token to trust the entire HTTP request. See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) for details.

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>"
}

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>"
}