What is App Bridge?

App Bridge: App Bridge is Shopify's JavaScript library that allows embedded apps running inside an iframe in the Shopify admin to communicate with the host frame — triggering navigation, modals, toasts, and the contextual save bar — as if they were a native part of the admin UI.; Also known as: @shopify/app-bridge, @shopify/app-bridge-react, Shopify App Bridge

How It Works

Shopify embedded apps run inside an <iframe> in the Shopify admin. Because of browser same-origin policy, the iframe and the parent frame can't directly call each other's JavaScript. App Bridge solves this by establishing a secure postMessage channel between your app's frame and Shopify's host frame. Your app calls App Bridge APIs (e.g., "show a toast") and App Bridge serializes those calls into postMessage events that Shopify's host frame intercepts and renders natively. The result is that UI elements like the save bar, resource picker, and confirmation modals look and behave identically to the rest of the Shopify admin.

App Bridge 3 (the current major version) is a complete rewrite from App Bridge 2. The biggest architectural change is that it no longer requires you to initialize an app instance and pass it down through your component tree. Instead, it exposes React hooks like useNavigate, useToast, and useResourcePicker that any component can call directly. It also ships a session token API (getSessionToken()) for authenticated backend requests — the session token is a short-lived JWT signed by Shopify that your server can verify to identify the shop and the logged-in user without storing a cookie.

App Bridge is distributed as two packages: @shopify/app-bridge (vanilla JS) and @shopify/app-bridge-react (React hooks and components). In practice you'll almost always use the React package for embedded apps. The Shopify CLI scaffolds both packages as dependencies when you run shopify app generate with the Remix template.

Why It Matters

Without App Bridge, your embedded app is visually isolated inside its iframe — merchants see a jarring transition between the Shopify admin chrome and your app's own UI. More critically, you have no way to show native Shopify UI components (the resource picker that shows a merchant's products, the date picker in the top bar, the unified save bar). Your app ends up looking like a foreign object embedded in the admin rather than an integrated extension.

The contextual save bar is App Bridge's most-used feature: it renders Shopify's native "Discard" / "Save" button strip in the admin top bar, matching the exact interaction pattern merchants use for all other admin settings. The resource picker opens a native modal that lets merchants search and select products, variants, collections, or customers from their store — you receive the selected resource IDs without building your own search UI. The toast API triggers the admin's native toast notification — consistent with the rest of the admin's feedback patterns.

The session token functionality is critical for security. Every request from your embedded app's frontend to your backend should include a fresh session token. The token encodes the shop, the user, the app's client ID, and an expiry time. Your server verifies the token's HMAC signature against your app's client secret — if it's valid, you know the request genuinely came from a Shopify admin session. This replaces the older cookie-based session model, which didn't work reliably in embedded iframes due to browser third-party cookie restrictions (Safari ITP, Chrome's CHIPS proposal).

App Bridge is distinct from Polaris (Shopify's React component library for building admin UI inside the iframe) and from UI Extensions (which embed extension blocks into checkout, product pages, and other surfaces using a different sandboxed runtime). App Bridge is specifically about the iframe-to-host communication for full-page embedded apps. You use Polaris inside your iframe to build the page content; you use App Bridge to communicate with the surrounding Shopify admin shell.

The Shopify CLI Remix app template pre-configures App Bridge via the AppProvider component from @shopify/shopify-app-remix, which wraps both @shopify/app-bridge-react and @shopify/polaris in a single provider. In most scaffolded apps you won't need to configure App Bridge directly — the integration is handled for you.

Frequently asked questions

Do I need App Bridge if my app is not embedded?: No. If your app is a standalone web app accessed directly (not embedded in the Shopify admin iframe), App Bridge provides no value. It's specifically designed for the postMessage communication channel between the iframe and the admin. For standalone apps you still want to use Polaris for UI consistency, but App Bridge itself is unnecessary.
What's the difference between App Bridge 2 and App Bridge 3?: App Bridge 2 required you to create an app instance with `createApp({ apiKey, host })` and pass it as a prop or context value. Every component that needed App Bridge features had to consume that context. App Bridge 3 removed the explicit initialization — the provider picks up the API key from the URL's `host` parameter automatically (injected by Shopify when loading the iframe). Hooks like `useNavigate` and `useToast` work without any context wiring. The two versions are not drop-in compatible; migration requires updating import paths and removing manual app initialization.
How do I authenticate backend API requests from an embedded app?: Call `const token = await getSessionToken(app)` (or the hook equivalent `useAuthenticatedFetch`) from your frontend before making API requests. Include the token in an `Authorization: Bearer <token>` header. On your server, verify the JWT using your app's client secret with a library like `@shopify/shopify-api`'s `session.getJwtPayload()`. The decoded payload contains the shop domain and user ID.

To see App Bridge in practice, follow the tutorial on building an embedded app with Remix and the Shopify CLI — App Bridge is wired up as part of the scaffold. The App Bridge API reference lists every available hook, action, and component with usage examples.

What is App Bridge?