Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Getting App Bridge session token using plain javascript

Solved

Getting App Bridge session token using plain javascript

CaveDiver
Shopify Partner
17 0 6

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

Accepted Solution (1)

bbarr
Shopify Partner
33 4 10

This is an 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 🙂

 

View solution in original post

Replies 6 (6)

bbarr
Shopify Partner
33 4 10

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

bbarr
Shopify Partner
33 4 10

This is an 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
Shopify Partner
17 0 6


@bbarr 

Thanks for the reply. I appreciate it.

KountTPA
Shopify Partner
9 0 4

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
Shopify Partner
9 0 4
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
Shopify Partner
5 0 4

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.