How Shopify Killed Third-Party Cookies (And How to Build Embedded Apps with App Bridge 4.0 in 2026)

If you’ve tried building an embedded Shopify app recently using older Express or cookie-based session tutorials, you probably ran into the dreaded blank white screen on Safari, iOS, or modern Chrome.

Here is why that happens—and how the modern 2026 Shopify stack completely solves it with App Bridge 4.0 and Header-Based JWTs.

The Death of Third-Party Cookies in Iframes

Historically, Shopify apps ran inside an <iframe> on admin.shopify.com. Developers set traditional HTTP cookies to maintain merchant sessions:

However:

Apple Safari ITP (Intelligent Tracking Prevention) blocks all cross-site cookies inside iframes by default.
Google Chrome Privacy Sandbox has systematically phased out third-party cookie access.
If your app attempts to read document.cookie or expects session cookies in an embedded iframe, the request fails silently, leaving merchants with a broken spinner or white screen.

The Modern Solution: App Bridge 4.0 & Cryptographic Session Tokens

In modern Shopify architecture, we never use cookies. Instead, authentication relies on short-lived, cryptographically signed JSON Web Tokens (JWTs) generated directly by Shopify's frontend client.

Step 1: Client-Side Token Injection

With Shopify App Bridge 4.0, you don't even need bulky npm packages on the frontend. A single script tag in your root document handles everything:

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

App Bridge automatically intercepts all native window.fetch requests and injects a 60-second signed JWT in the request headers:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Step 2: Backend JWT Verification

On your backend (React Router / Remix or Node), you verify the token using your SHOPIFY_API_SECRET and extract the authenticated shop domain:

import crypto from "node:crypto"; export async function verifyShopifySessionToken(request: Request) { const authHeader = request.headers.get("Authorization"); if (!authHeader || !authHeader.startsWith("Bearer ")) { throw new Response("Unauthorized: Missing Bearer Token", { status: 401 }); } const token = authHeader.split(" ")[1]; const [headerB64, payloadB64, signatureB64] = token.split("."); // Verify HMAC SHA-256 signature against your App Secret const calculatedSig = crypto .createHmac("sha256", process.env.SHOPIFY_API_SECRET!) .update(`${headerB64}.${payloadB64}`) .digest("base64url"); if (calculatedSig !== signatureB64) { throw new Response("Forbidden: Invalid Token Signature", { status: 403 }); } const payload = JSON.parse(Buffer.from(payloadB64, "base64url").toString("utf-8")); // Extract authenticated merchant domain const destUrl = new URL(payload.dest); return { shop: destUrl.hostname }; }