Unable to get a value from session.getSessionToken()

Extensions
1

I’m trying to get a session token so I can secure my network requests in my POS Extension. The problem is that when I try to run the simple example in the documentation the sessionToken is always null. I am able to get the currentSession data in both my own code and the example.

Here is the specific example.

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

I think this maybe due to the code here, if you want to load data immediately then you’ll need a useEffect. This should work below.

I have found that sometimes if the device goes idle then you might need to retry getting the session token.

Also I assume this is just test code, but I wouldn’t store the session token in state, and just get it whenever you need to make an API request as theres less chance of it expiring

import React, {useEffect, 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>();

  useEffect(() => {
    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 />
));