---
title: Session Token
description: The API for interacting with session tokens.
api_version: 2023-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/session-token
  md: https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/session-token.md
---

# Session TokenAPI

The API for interacting with session tokens.

## StandardApi

The base API object provided to `purchase`, and `customer-account.order-status` extension targets.

* sessionToken

  SessionToken

  required

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

  See [session token examples](https://shopify.dev/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.

  ```ts
  () => Promise<string>
  ```

```ts
export interface SessionToken {
  /**
   * 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.
   */
  get(): Promise<string>;
}
```

## use​Session​Token()

Returns a the session token API object.

### Returns

* SessionToken

  ### SessionToken

  * get

    () => Promise\<string>

    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.

### 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.

  ```ts
  () => Promise<string>
  ```

```ts
export interface SessionToken {
  /**
   * 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.
   */
  get(): Promise<string>;
}
```

### Examples

* #### Using a session token with fetch()

  ##### Description

  You can request a session token from Shopify to use on your application server. The contents of the token claims are signed using your shared app secret so you can trust the claims came from Shopify unaltered. > Note: You will need to \[enable the \`network\_access\` capability]\(/docs/api/checkout-ui-extensions/configuration#network-access) to use \`fetch()\`.

  ##### React

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

  ##### JavaScript

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

## Examples

Session token claims

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](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access) for details.

### Examples

* #### Session token claims

  ##### Description

  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.jwt

  ```json
  {
    // 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>"
  }
  ```

## Related

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[ReferenceTargets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[![](https://shopify.dev/images/icons/32/apps.png)![](https://shopify.dev/images/icons/32/apps-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[ReferenceComponents](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[ReferenceConfiguration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/apps/checkout)

[LearnTutorials](https://shopify.dev/apps/checkout)