app-bridgelisted

# Shopify App Bridge 4.x: Web Components, Sessions & Admin Apps ## When Asked... - **"Build a Shopify admin app"** → Use App Bridge 4.x with web components; load via CDN with data-api-key; use shopify global object for actions - **"Add save/cancel buttons"** → Use `<ui-save-bar>` web component with data-primary-action and data-secondary-action attributes - **"Show a confirmation modal"** → Use `<ui-modal>` web component with data-open attribute and slot-based content - **"Display success message"** → Use `shopify.toast()` method with title, message, duration, isError flags - **"Let user pick products/customers"** → Use resource picker API: `shopify.resourcePicker({ type: 'product' })` - **"Validate backend requests"** → Exchange session token for JWT; verify JWT signature with Shopify's public key - **"Upgrade from App Bridge 3.x"** → Follow migration checklist: remove AppProvider, update component usage, use web components directly ## App Bridge 4.x Architecture App Bridge 4.x is a **web components-first framework**. The major shift from 3.x: - **No AppProvider needed** — directly use web components and shopify global object - **Native web components** — built-in elements like `<ui-modal>`, `<ui-save-bar>`, `<ui-toast>` instead of React/Vue wrappers - **shopify global object** — replaces AppBridge context; provides toast(), modal(), navigate(), loading(), idToken(), etc. - **Session tokens** — automatic JWT exchange for backend authentication - **CDN-first delivery** — l