Session API

Examples

• Description

  Access comprehensive session information including shop details, user data, and location information. This example shows how to use `shopify.session.currentSession` to retrieve the shop ID, domain, currency, user ID, location ID, and POS version, and how to subscribe to `shopify.session.staffMember` for the pinned-in staff member, which updates when a different staff member pins into POS. Use this data to build location-aware features and personalized experiences.

  jsx

  import {render} from 'preact';
  import {useState, useEffect} from 'preact/hooks';
  // Allows the use of `shopify.session.staffMember.value` as a stateful subscription.
  import '@shopify/ui-extensions/preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    const session = shopify.session.currentSession;
    const [staffMember, setStaffMember] = useState(
      shopify.session.staffMember.value
    );
  
    useEffect(() => {
      const unsubscribe = shopify.session.staffMember.subscribe((newStaffMember) => {
        setStaffMember(newStaffMember);
      });
      return unsubscribe;
    }, []);
  
    return (
      <s-page heading="Current Session">
        <s-scroll-box>
          <s-stack direction="block">
            <s-section heading="Shop Information">
              <s-text>Shop ID: {session.shopId}</s-text>
              <s-text>Shop Domain: {session.shopDomain}</s-text>
              <s-text>Currency: {session.currency}</s-text>
            </s-section>
            <s-section heading="User & Staff">
              <s-text>User ID: {session.userId}</s-text>
              <s-text>Location ID: {session.locationId}</s-text>
              {staffMember && (
                <s-text>Staff Member ID: {staffMember.id}</s-text>
              )}
            </s-section>
            <s-section heading="System">
              <s-text>POS Version: {session.posVersion}</s-text>
            </s-section>
          </s-stack>
        </s-scroll-box>
      </s-page>
    );
  };

• Description

  Access session data and generate authentication tokens. This example shows how to access shop details, user information, and location data through `shopify.session`, and use `shopify.session.getSessionToken()` to generate tokens for authenticated requests to your backend services.

  jsx

  import {render} from 'preact';
  import {useState, useEffect} from 'preact/hooks';
  // Allows the use of `shopify.session.staffMember.value` as a stateful subscription.
  import '@shopify/ui-extensions/preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    const [sessionToken, setSessionToken] = useState('');
    const {shopId, userId, locationId} = shopify.session.currentSession;
    const staffMemberId = shopify.session.staffMember.value?.id;
  
    useEffect(() => {
      shopify.session.getSessionToken().then((newToken) => {
        setSessionToken(newToken);
      });
    }, []);
  
    return (
      <s-page heading="Screen One Title">
        <s-scroll-box>
          <s-text>
            shopId: {shopId}, userId: {userId}, locationId: {locationId}, staffId: {staffMemberId}
          </s-text>
          <s-text>sessionToken: {sessionToken}</s-text>
        </s-scroll-box>
      </s-page>
    );
  };

• Description

  Access the unique identifier of the current POS device. This example demonstrates using `shopify.session.deviceId` to retrieve the device ID. Use this data to construct a GID to query device details via GraphQL Admin API.

  jsx

  import {render} from 'preact';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    const {deviceId} = shopify.session;
    const deviceGid = `gid://shopify/PointOfSaleDevice/${deviceId}`;
  
    return (
      <s-page heading="Device Details">
        <s-scroll-box>
          <s-text>Device ID: {deviceId}</s-text>
          <s-text>Device GID: {deviceGid}</s-text>
        </s-scroll-box>
      </s-page>
    );
  };