How to use AppBridge's getSessionToken using CDN

Shopify Partner
4 0 1

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

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.

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

Replies 6 (6)

Shopify Staff (Retired)
10 1 1

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

To learn more visit the Shopify Help Center or the Community Blog.

Shopify Partner
4 0 1

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;


<!doctype html>
 <html lang="en">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Get session token</title>
     <script src=""></script>
     <script src="" integrity="sha512-u9akINsQsAkG9xjc1cnGF4zw5TFDwkxuc9vUp5dltDWYCSmyd0meygbvgXrlc/z7/o4a19Fb5V0OUE58J7dcyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         const server = "<ngrok server>";
         const clientId = "<shopify client id>";
         const appUrl = "<app url>";
         const parseSearchParams = () => {
             const params = new URL(window.location.href).searchParams;
             let shop = null;
             if (params.get('shop')) {
                 shop = params.get('shop').trim();
             let host;
             if (params.get('host')) {
                 host = params.get('host').trim();
             return {
         const initializeAppBridge = async ({ host }) => {
            const instance = axios.create();
            const AppBridge = window['app-bridge'];
            const createApp = AppBridge.createApp;
            const app = createApp({
                apiKey: clientId,

            const getSessionToken = window['app-bridge-utils'].getSessionToken;
            const token = await getSessionToken(app);

            console.log('token: ', token);

            // Intercept all requests on this Axios instance
            instance.interceptors.request.use(async(config) => {
                config.headers['Authorization'] = `Bearer ${token}`;
                return config;
         const params = parseSearchParams();
         initializeAppBridge({ host: }).then(() => axios.get(appUrl));


1 0 0

Found the solution! Actually, someone else found it. In this thread:


It's in a different file:

<script src=""></script>
window['app-bridge-utils'].getSessionToken(app).then(token => ...)


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.

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


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.

Shopify Partner
3 0 1

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!