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
32 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
32 4 10

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

bbarr
Shopify Partner
32 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
8 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
8 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 3

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.