Choose a version:

Session API
APIs

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.

Anchor to sessionapiSessionApi

Anchor to currentSession currentSession required: Access information on the current POS session.
Anchor to getSessionToken getSessionToken () => Promise<string> required: 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.

SessionApiContent

currentSession
Access information on the current POS session.
```
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.
```
() => Promise<string>
```

export interface SessionApiContent {
  /**
   * Access information on the current POS session.
   */
  currentSession: Session;
  /**
   * 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.
   */
  getSessionToken: () => Promise<string | undefined>;
}

Session

locationId
The location ID associated with the POS' current location.
```
number
```
shopDomain
The shop domain associated with the shop currently logged into POS.
```
string
```
shopId
The shop ID associated with the shop currently logged into POS.
```
number
```
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.
```
number
```
userId
The user ID associated with the Shopify account currently authenticated on POS.
```
number
```

export interface Session {
  /**
   * The shop ID associated with the shop currently logged into POS.
   */
  shopId: number;

  /**
   * The user ID associated with the Shopify account currently authenticated on POS.
   */
  userId: number;

  /**
   * The shop domain associated with the shop currently logged into POS.
   */
  shopDomain: string;

  /**
   * The location ID associated with the POS' current location.
   */
  locationId: number;

  /**
   * 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.
   */
  staffMemberId?: number;
}

Was this section helpful?

Anchor to examplesExamples

Examples of using the Session API

Anchor to example-retrieve-the-current-session-dataRetrieve the current session data

Was this section helpful?

Retrieve the current session data

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 (

<Text>

shopId: {shopId}, userId: {userId}, locationId: {locationId}, staffId:

{staffMemberId}

</Text>

<Text>sessionToken: {sessionToken}</Text>

</Screen>

);

};

export default reactExtension('pos.home.modal.render', () => (

));

examples

Retrieve the current session data

React

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 />
));

TS

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

Session APIAPIs

Anchor to sessionapiSessionApi

SessionApiContent

Session

Anchor to examplesExamples

examples

Retrieve the current session data

React

TS

Session API
APIs