`No session token in data` when generating token from checkout ui extension

Extensions
,
1

Hi there,

my checkout ui extension needs to call my app to fetch some data and to do so I generate a session token:

const { sessionToken } = useApi();
const token = await sessionToken.get();

// call the app endpoint etc...

When in preview mode (to be able to use the hot reload) I get this error:

SessionTokenNotFoundError: No session token in data

If I deploy the app, add the extension to the theme and navigate to the checkout, the token is generated correctly and the call correctly arrives to my app.

The only way to develop it is to deploy the time every time I want a change to be applied.

That’s very annoying. Am I doing something wrong?

2

Just to clarify what you mean by preview mode, are you referring to running a local instance of the extension using shopify app dev or an equivalent like pnpm run dev?

If so, then then it should work as expected. There’s no limitation to making these requests in a dev preview setup.

The example code here is a good template to work from: Session Token (You can comment out the fetchWithToken and apiResponse code)

If you still can’t get it to work, we’ll need some additional snippets from your code to better assess what might be happening.

Here’s the test code that I used:

import {
  reactExtension,
  BlockStack,
  Button,
  useApi,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => (<Extension />));

function Extension() {
  const { sessionToken: sessionTokenApi } = useApi();
  const [sessionToken, setSessionToken] = useState();
  
  return (
    <BlockStack border={"dotted"} padding={"tight"}>
      <Button onPress={getSessionToken}>Generate Session Token</Button>
      { sessionToken ? `The session token is ${sessionToken}` : null}
    </BlockStack>
  );

  async function getSessionToken() {
    const result  = await sessionTokenApi.get();
    setSessionToken(result);
    console.log("sessionToken.get() result", result);
  }
}
3

By preview mode I mean:

  • Start the app
  • Press p after the app is loaded
  • From the developer console, click on purchase.checkout.block.render
    image
    image3360×1822 190 KB

Here I’m using your same code:

image
image1920×1041 145 KB

I get the same error on the customer account ui extension too

I’m using the latest cli version (3.80.7)
The store I’m using is a Shopify Plus sandbox

4

Thanks for trying this out and for providing the extra info about your test setup.

The reason this isn’t working is that we don’t support usage of the Session Token API for local extensions (served locally via the developer console) on Plus Partner Sandbox shops. You’ll need to use a developer preview shop: Developer previews