Session API

The Session API contains the information about the current user session, and allows to fetch a fresh session token for communication with your apps backend service.

SessionApi

SessionApiContent

currentSession

Access information on the current POS session.

getSessionToken

Get a fresh session token for communication with your app's backend service. Calls to Shopify APIs must be made by your app’s backend service.

Session

shopId

The shop ID associated with the shop currently logged into POS.

userId

The user ID associated with the Shopify account currently authenticated on POS.

shopDomain

The shop domain associated with the shop currently logged into POS.

locationId

The location ID associated with the POS' current location.

staffMemberId

The staff ID who is currently pinned into the POS. Note that this staff member ID may be different to the User ID, as the staff member who enters their PIN may be different to the User who logged onto POS.

Examples

The Session API contains the information about the current user session, and allows to fetch a fresh session token for communication with your apps backend service.

import React, {useState} from 'react';
import {
  reactExtension,
  useApi,
  Screen,
  Text,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const {currentSession, getSessionToken} =
    useApi<'pos.home.modal.render'>().session;

  const {shopId, userId, locationId, staffMemberId} = currentSession;
  const [sessionToken, setSessionToken] = useState<string>();

  getSessionToken().then((newToken) => {
    setSessionToken(newToken);
  });

  return (
    <Screen name="ScreenOne" title="Screen One Title">
      <Text>
        shopId: {shopId}, userId: {userId}, locationId: {locationId}, staffId:
        {staffMemberId}
      </Text>
      <Text>sessionToken: {sessionToken}</Text>
    </Screen>
  );
};

export default reactExtension('pos.home.modal.render', () => (
  <SmartGridModal />
));

import {
  Screen,
  Stack,
  Text,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const {session} = api;
  const {currentSession, getSessionToken} = session;
  const {shopId, userId, locationId, staffMemberId} = currentSession;

  const screen = root.createComponent(Screen, {
    name: 'ScreenOne',
    title: 'Screen One Title',
  });

  const currentSessionText = root.createComponent(
    Text,
    {},
    `shopId: ${shopId}, userId: ${userId}, locationId: ${locationId}, staffId: ${staffMemberId}`,
  );
  const sessionTokenText = root.createComponent(
    Text,
    {},
    'sessionToken: undefined',
  );

  getSessionToken().then((newToken) => {
    sessionTokenText.children.forEach((child) => {
      sessionTokenText.removeChild(child);
    });
    sessionTokenText.appendChild(`sessionToken: ${newToken}`);
  });

  screen.appendChild(currentSessionText);
  screen.appendChild(sessionTokenText);
  root.appendChild(screen);
});

import React, {useState} from 'react';
import {
  reactExtension,
  useApi,
  Screen,
  Text,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
  const {currentSession, getSessionToken} =
    useApi<'pos.home.modal.render'>().session;

  const {shopId, userId, locationId, staffMemberId} = currentSession;
  const [sessionToken, setSessionToken] = useState<string>();

  getSessionToken().then((newToken) => {
    setSessionToken(newToken);
  });

  return (
    <Screen name="ScreenOne" title="Screen One Title">
      <Text>
        shopId: {shopId}, userId: {userId}, locationId: {locationId}, staffId:
        {staffMemberId}
      </Text>
      <Text>sessionToken: {sessionToken}</Text>
    </Screen>
  );
};

export default reactExtension('pos.home.modal.render', () => (
  <SmartGridModal />
));

import {
  Screen,
  Stack,
  Text,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const {session} = api;
  const {currentSession, getSessionToken} = session;
  const {shopId, userId, locationId, staffMemberId} = currentSession;

  const screen = root.createComponent(Screen, {
    name: 'ScreenOne',
    title: 'Screen One Title',
  });

  const currentSessionText = root.createComponent(
    Text,
    {},
    `shopId: ${shopId}, userId: ${userId}, locationId: ${locationId}, staffId: ${staffMemberId}`,
  );
  const sessionTokenText = root.createComponent(
    Text,
    {},
    'sessionToken: undefined',
  );

  getSessionToken().then((newToken) => {
    sessionTokenText.children.forEach((child) => {
      sessionTokenText.removeChild(child);
    });
    sessionTokenText.appendChild(`sessionToken: ${newToken}`);
  });

  screen.appendChild(currentSessionText);
  screen.appendChild(sessionTokenText);
  root.appendChild(screen);
});