Getting App Bridge session token using plain javascript

[CaveDiver]

Hi,

Going through the tutorial Get session tokens using App Bridge utilities (shopify.dev).

What would be the ES5 and the CDN-hosted equivalent of this code?

import createApp from "@shopify/app-bridge";
import { getSessionToken } from "@shopify/app-bridge-utils";
const app = createApp({ apiKey: "12345", });
const sessionToken = await getSessionToken(app);

The tutorial Getting started with Shopify App Bridge illustrates the app-bridge part nicely but I'm unclear on the "app-bridge-utils" part.

Thanks

[bbarr]

Bump. This hint of possible ES5 support paired with the lack of documentation is both unprofessional and baffling.

[bbarr · Accepted solution]

@CaveDiverI found it!

On a whim, I tried adding another script based on the naming of their import.

<script src="https://unpkg.com/@shopify/app-bridge-utils@2"></script>
window['app-bridge-utils'].getSessionToken(app).then(token => ...)

Shopify's reliance on old-fashioned build tools is short-sighted, and their insistence on marketing-style documentation instead of formal is not helpful.

But at least this is solved 🙂

[CaveDiver]

---

---

@bbarr 

Thanks for the reply. I appreciate it.

[KountTPA]

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

I'm a little confused on how to access that subdirectory of the app-bridge package when it doesn't appear to be exported by the top-level of app-bridge. Can anyone think of 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

[KountTPA]

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.

[rony36]

maybe very newbie question (sorry about that), how to use this `authenticatedFetch` for updating session token periodically. My plan is to update `window.sessionToken`.

where what I have using:

setInterval(async () => {
  await retrieveToken(app);
}, SESSION_TOKEN_REFRESH_INTERVAL);

async function retrieveToken(app) {
  window['app-bridge-utils'].getSessionToken(app).then(token => {
    window.sessionToken = token
  })
}

it's not working :(. Have been stuck for couple of days. any help with be appreciated.