DEV Community: john peter

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

john peter — Sat, 14 Nov 2026 05:24:31 +0000

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:

[Merchant Browser] ──(loads iframe)──> [admin.shopify.com] ──(embeds)──> [YourApp.com with Session Cookie]

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 };
}

No cookies. No Safari ITP blocks. 100% reliable across every modern browser.

Open-Source Starter Code on GitHub

I've made the core architectural boilerplate and JWT verification snippets completely open-source:

⭐ View the Companion Starter Repository on GitHub

Want the Complete Zero-to-Production Guide?

Building a production-ready Shopify app in 2026 involves more than just auth. You need:

GraphQL Admin API Leaky Bucket rate-limit handling & cursor pagination
Webhook HMAC verification with Dead-Letter Queues (DLQ)
Prisma Multi-Tenant Database modeling
Shopify Billing API for recurring SaaS subscriptions
Multi-stage Docker & Fly.io zero-cost cloud deployment

I compiled everything into a comprehensive 59-page engineering handbook:

👉 Get The Modern Shopify App Development Blueprint on Gumroad ($29)

👉 Also available on Leanpub ($19 - $29)

It includes complete starter code, architectural blueprints, and a 25-point App Store pre-flight checklist.

Drop any questions below about App Bridge 4.0 or the GraphQL migration—happy to help!

Building a Modern Embedded Shopify App: App Bridge 4.0, ID Tokens, and Secure Authentication (2026)

john peter — Fri, 13 Nov 2026 06:43:43 +0000

If you've tried building an embedded Shopify app recently using older Express or cookie-based session tutorials, you may have encountered blank screens, authentication failures, or session issues in Safari, iOS, and modern Chrome.

Here is why this happens and how to implement modern, production-grade Shopify authentication using App Bridge 4.0 and Header ID Tokens.

Why Cookie-Based Authentication Is Dead

Historically, embedded Shopify apps ran inside an <iframe> within Shopify Admin. Developers relied on traditional HTTP cookies to maintain merchant sessions.

However, modern browsers strictly restrict third-party cookies:

Apple Safari ITP (Intelligent Tracking Prevention): Completely blocks cross-site cookies inside iframes by default.
Chrome Privacy Sandbox: Phasing out third-party cookies across modern embedded contexts.
Embedded Session Stripping: If your backend expects a cookie inside admin.shopify.com, the cookie is stripped before hitting your server.

The result: A broken spinner or blank white screen for merchants.

Shopify now officially mandates ID Tokens for authenticating embedded applications.

The Modern Architecture: App Bridge 4.0 & ID Tokens

Shopify App Bridge provides short-lived, cryptographically signed JSON Web Tokens (JWTs). These tokens prove that an HTTP request originated from an authenticated merchant inside Shopify Admin.

Unlike traditional cookies, this approach is 100% cookie-free and impervious to browser tracking restrictions.

Step 1: Configure App Bridge (Frontend)

Add the lightweight App Bridge script to your root document:

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

App Bridge automatically intercepts native window.fetch requests and injects an ID token into the Authorization header:

// App Bridge automatically appends Authorization: Bearer <signed_jwt>
const response = await fetch('/api/products');
const products = await response.json();

For manual requests or WebSockets, you can fetch the token directly:

const token = await shopify.idToken();

Important: Shopify ID tokens expire after 60 seconds. Always fetch a fresh token per request rather than caching them long-term.

Step 2: Production-Grade Token Verification (Backend)

Never simply decode a JWT and trust its claims—a decoded JWT is not an authenticated JWT.

A production-ready verification must perform full cryptographic and claim validations:

Algorithm Check: Ensure alg is strictly HS256.
Signature Verification: HMAC-SHA256 comparison using crypto.timingSafeEqual (prevents timing attacks).
Expiration (exp): Must be in the future (with 5s clock tolerance).
Not-Before (nbf): Must be in the past (with 5s clock tolerance).
Audience (aud): Must match your Shopify Client ID.
Issuer & Destination: Ensure iss and dest hostnames match the authenticated shop.

Here is the complete, hardened TypeScript verification function:

import crypto from "node:crypto";

export interface ShopifyIdTokenPayload {
  iss: string;
  dest: string;
  aud: string;
  sub: string;
  exp: number;
  nbf: number;
  iat: number;
  jti: string;
  sid: string;
}

export function verifyShopifyIdToken(token: string): { shop: string; userId: string } {
  const secret = process.env.SHOPIFY_API_SECRET;
  const clientId = process.env.SHOPIFY_API_KEY;

  if (!secret || !clientId) {
    throw new Error("Server Configuration Error: Missing SHOPIFY_API_SECRET or SHOPIFY_API_KEY");
  }

  const parts = token.split(".");
  if (parts.length !== 3) {
    throw new Response("Malformed Token", { status: 400 });
  }

  const [headerB64, payloadB64, signatureB64] = parts;

  // 1. Verify Header Algorithm is strictly HS256
  const header = JSON.parse(Buffer.from(headerB64, "base64url").toString("utf-8"));
  if (header.alg !== "HS256") {
    throw new Response("Unauthorized: Invalid Token Algorithm", { status: 401 });
  }

  // 2. Constant-Time Signature Verification (Prevents Timing Attacks)
  const calculatedSig = crypto
    .createHmac("sha256", secret)
    .update(`${headerB64}.${payloadB64}`)
    .digest("base64url");

  const expectedSigBuffer = Buffer.from(calculatedSig, "utf-8");
  const actualSigBuffer = Buffer.from(signatureB64, "utf-8");

  if (
    expectedSigBuffer.length !== actualSigBuffer.length ||
    !crypto.timingSafeEqual(expectedSigBuffer, actualSigBuffer)
  ) {
    throw new Response("Forbidden: Invalid Cryptographic Signature", { status: 403 });
  }

  // 3. Decode & Validate Claims
  const payload: ShopifyIdTokenPayload = JSON.parse(
    Buffer.from(payloadB64, "base64url").toString("utf-8")
  );

  const now = Math.floor(Date.now() / 1000);
  const leewaySeconds = 5; // Account for minor clock drift

  // 4. Validate exp and nbf with clock tolerance
  if (payload.exp + leewaySeconds < now) {
    throw new Response("Unauthorized: Token Expired", { status: 401 });
  }
  if (payload.nbf - leewaySeconds > now) {
    throw new Response("Unauthorized: Token Not Active Yet", { status: 401 });
  }

  // 5. Validate Audience matches your Client ID
  if (payload.aud !== clientId) {
    throw new Response("Unauthorized: Audience Mismatch", { status: 401 });
  }

  // 6. Validate Issuer and Destination Hostnames Match
  let issuerUrl: URL;
  let destUrl: URL;
  try {
    issuerUrl = new URL(payload.iss);
    destUrl = new URL(payload.dest);
  } catch {
    throw new Response("Unauthorized: Malformed Issuer or Destination URL", { status: 401 });
  }

  if (
    issuerUrl.protocol !== "https:" ||
    destUrl.protocol !== "https:" ||
    issuerUrl.hostname !== destUrl.hostname
  ) {
    throw new Response("Unauthorized: Hostname Mismatch", { status: 401 });
  }

  return {
    shop: destUrl.hostname,
    userId: payload.sub,
  };
}

ID Token vs. Access Token: Know the Difference

Characteristic	ID Token	Access Token
Purpose	Authenticates the merchant session to your app	Authorizes your app to call Shopify APIs
Lifespan	60 seconds (Short-lived)	Permanent (Offline) or Session-bound (Online)
Origin	Issued by App Bridge on frontend	Exchanged via OAuth handshake with Shopify
Usage	Validated on your backend routes	Passed as `X-Shopify-Access-Token` to GraphQL

The Modern Flow:

Merchant opens your app in Admin.
App Bridge generates a 60-second ID Token.
Frontend attaches the token to backend API requests.
Backend validates token signature, expiration, and audience.
Backend uses its persisted offline Access Token to execute GraphQL Admin API queries.

Open-Source Starter Repository

I've published an open-source companion repository with ready-to-use boilerplate code, multi-tenant Prisma schemas, and GraphQL Leaky Bucket rate-limit utilities:

⭐ View the Companion Starter Repository on GitHub

Want the Complete 59-Page Engineering Handbook?

Building a scalable Shopify SaaS requires more than authentication. You also need:

GraphQL Admin API Leaky Bucket rate limits & Streaming JSONL Bulk Operations
Webhook HMAC verification with Dead-Letter Queues (DLQ)
Multi-tenant database modeling with tenant isolation in PostgreSQL
Shopify Billing API (recurring subscriptions, metered usage, free trials)
Zero-cost deployment using Docker on Fly.io
25-point App Store audit checklist to guarantee first-time review approval

I've documented every architecture pattern into a comprehensive 59-page handbook:

👉 Get The Modern Shopify App Development Blueprint on Gumroad ($29)

👉 Also Available on Leanpub ($19 - $29)

Summary

Modern Shopify app development no longer relies on fragile third-party cookies. By pairing App Bridge 4.0 with strict cryptographic ID token verification on your backend, you eliminate Safari ITP white-screens and ensure a rock-solid, production-ready foundation.

Have questions about App Bridge, token exchange, or GraphQL rate limits? Leave a comment below!