App Bridge CDN: Session Token Retrieval & window.appBridge Undefined Issue

Shopify App Store
1

Hello Shopify Support Team,

We are currently migrating our embedded app to use the latest Shopify App Bridge script from the official CDN and are facing issues with session token retrieval.

Working Setup (unpkg)

The following implementation works correctly and successfully retrieves the session token:

<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const params = new URLSearchParams(window.location.search);
    const host = params.get('host');
    const shop = params.get('shop');

    if (host && shop) {
        const AppBridge = window['app-bridge'];
        const createApp = AppBridge.default;

        const app = createApp({
            apiKey: "{{ config('services.shopify.client_id') }}",
            host: host,
        });

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

            console.log("TOKEN:", token);

            await fetch("{{ route('test-api') }}", {
                headers: {
                    'Authorization': 'Bearer ' + token
                }
            });
        }

        initApp();
    }
});
</script>

Issue 1: CDN Migration Breaks Session Token Flow

When switching to the Shopify CDN script:

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

  • app-bridge-utils is not available

  • getSessionToken is not accessible

  • Our authentication flow stops working

Issue 2: window.appBridge is Undefined

We also attempted to use the CDN version with the following approach:

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

<script>
(function () {

    function init() {
        if (!window.appBridge) {
            return setTimeout(init, 10);
        }

        const params = new URLSearchParams(window.location.search);
        const host = params.get('host');

        if (!host) {
            console.log("Host missing");
            return;
        }

        const app = window.appBridge.createApp({
            apiKey: "{{ config('services.shopify.client_id') }}",
            host: host
        });

        console.log("App Initialized");

        app.getSessionToken().then(token => {
            console.log("TOKEN:", token);

            fetch("{{ route('test-api') }}", {
                headers: {
                    Authorization: "Bearer " + token
                }
            });
        });
    }

    init();

})();
</script>

However:

  • window.appBridge remains undefined

  • The script never initializes App Bridge

  • getSessionToken() cannot be called

Questions

  1. What is the correct global object exposed by the CDN version of App Bridge?

  2. What is the officially supported way to retrieve session tokens using the CDN script?

  3. Is there a replacement for app-bridge-utils.getSessionToken, or should we migrate to a completely different pattern?

  4. Is there an official migration guide for moving from unpkg (@shopify/app-bridge@3) to the CDN version?

Summary

  • Session token retrieval works using unpkg + app-bridge-utils

  • It fails when using the Shopify CDN script

  • window.appBridge is undefined in the CDN version

  • We need guidance on the correct implementation for session-based authentication

We would greatly appreciate any documentation, working examples, or migration steps you can provide.

Thank you for your support.

Best regards,
Nikhil Sharma
Ckship