Getting session token fails when the extension is added the first time before the checkout is saved

[TheSecurityDev]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/checkout-ui-extensions-react": "^0.27.0"

Describe the bug

The useSessionToken hook returns a function that you can use to get a session token every time you make a request to your backend from the extension. But when you implement it, fetching the session token throws an error when you've added the extension in the checkout editor but haven't saved it yet.

This can't be reproduced in the dev extensions when using the local dev server.

Steps to reproduce the behavior:

1. Use the useSessionToken hook to get a session token getter function.
2. Use that getter function to get a session token on each request, or do it right when the extension is rendered for testing.
3. Publish the extension (you can do it from the working draft on a dev store).
4. Go to the checkout editor and add the extension to the page (make sure it's not already added).
5. Observe that fetching the session token fails.
6. Save the checkout with the extension added and refresh the page.
7. Observe that it now works.

Expected behavior

The merchant should be able to use the extension in the checkout editor without saving it first and making it live. We need the requests to start working immediately.

Screenshots

Additional context

In the network panel we can see that it tries to fetch the session token, but gets the following response:

{
    "data": {
        "checkoutExtensionSessionToken": null
    }
}

[dnagoda]

Thanks for the report. Adding to the backlog.

[luklapp]

@dnagoda Any update on this issue? I can still reproduce it with version 2023.10.0

[dnagoda]

Hi @luklapp 👋

The current behavior is expected due to how the session token is managed by the editor. After adding an extension that uses the session token api and before you save, the extension has not be "activated" and the session token operates off activated extensions. The work around is to save after adding the extension.

You can use a draft checkout profile, if you want to test an extension (and save as you go) without having those changes go live when saving.

We're keeping the issue open to ensure we look at this in the future and consider ways to improve the editor experience, but there's no timeline for when that would happen.

[luklapp]

@dnagoda Okay, thanks for your quick feedback! :)

[TheSecurityDev]

Yeah, it's a pretty poor experience for the merchant as we have to check for the error and show a banner telling them to save the checkout and refresh first. But the point of previewing is to be able to test it before going live, and not all merchants might think to create a draft checkout first.

[elvonkh]

@luklapp Hi there. Were you able to resolve the issue?

I am also facing this problem, this is very poor experience for merchants and the product is suffering

[Adham-Mamedov]

@dnagoda Any news on this? I agree that this is a poor merchant experience.