How to use AppBridge's getSessionToken using CDN

Retired Boards Appdev Tools
1

In the page explaining how to get started with AppBridge, we have examples of using AppBridge form CDN.

https://shopify.dev/apps/tools/app-bridge/getting-started

That is how we are using AppBridge.

However, in the page that describes how to use getSessionToken, there is no example on usage with CDN hosted AppBridge.
https://shopify.dev/apps/auth/session-tokens/axios

Could you give us examples on how to use getSessionToken from CDN hosted AppBridge?

2

All of our CDN packages will be globally namespaced under their package name. In this case you can access them like so:

const getSessionToken = window['app-bridge-utils'].getSessionToken;

The rest of the example should be the same

3

This must not be correct. I am getting

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getSessionToken')

The code I have is as follows, and I am getting the error when calling

const getSessionToken = window[‘app-bridge-utils’].getSessionToken;

start_session.html
4

Found the solution! Actually, someone else found it. In this thread: https://community.shopify.com/post/1165265

It’s in a different file:


window['app-bridge-utils'].getSessionToken(app).then(token => ...)
5

app-bridge-utils looks like it has been deprecated because the utils moved into a utilities directory in app-bridge.

Can we get an example of how to use getSessionToken or authenticatedFetch from that sub-directory through the CDN-hosted approach? It does not seem as simple as

const authenticatedFetch = window["app-bridge"].utilities.authenticatedFetch
6 
const authenticatedFetch = window["app-bridge"].utilities.authenticatedFetch(app)

This is an update since app-bridge-utils is deprecated.
Then you can use the const authenticatedFetch just like you would use fetch.

7

Amazing. There needs to be some decent docs for non-React use of App Bridge. Shopify are so behind on their support materials – thank you for this!