Questions and discussions about using the Shopify CLI and Shopify-built libraries.
Hello,
Im trying to make an older app embedded, and having some issues with implementing app bridge alongside Polaris (specifically redirecting my app back into the embedded iframe). Here are my steps:
Details below, any help much appreciated.
Console error message (edited for privacy):
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://myshop.myshopify.com') does not match the recipient window's origin ('<my dev server address>').
App bridge react code below (api key changed)
render() { const config = {apiKey: '12345', shopOrigin: 'myshop.myshopify.com'}; return ( <AppProvider> <Provider config={config}>
Basic App bridge code from https://shopify.dev/tools/app-bridge/getting-started
import createApp from '@shopify/app-bridge'; const app = createApp({ apiKey: '12345', shopOrigin: 'myshop.myshopify.com' });
Hi Paul,
Getting embedded app auth set up can be tricky! Just to confirm, you tried all three methods in exactly the same app, running in the same local development environment? When you get that postMessage error, what are the exact steps you take leading up to it?
To learn more visit the Shopify Help Center or the Community Blog.
Hi Iain, thanks for getting back to me. Yes exactly, tried all 3 methods in same app using a local (ngrok) environment:
HMTL Page with CDN version of app bridge - REDIRECTS
<!DOCTYPE html> <html> <head> <title>Test Dashboard</title> <script src="https://unpkg.com/@shopify/app-bridge"></script> <script> var AppBridge = window['app-bridge']; var createApp = AppBridge.default; var app = createApp({ apiKey: '123', shopOrigin: 'myshop.myshopify.com' }); </script> </head> <body> <h1>Test Dashboard</h1> </body> </html>
Polaris + App Bridge - RETURNS ERROR
render() { const config = {apiKey: '123', shopOrigin: 'myshop.myshopify.com'}; return ( <AppProvider> <Provider config={config}> ...
Error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://myshop.myshopify.com') does not match the recipient window's origin ('https://123.ngrok.io').
hmm, interesting. I assume the method you actually want to use is App Bridge React + Polaris? your code looks like it matches our documentation.
what version of Polaris and App Bridge React are you using?
To learn more visit the Shopify Help Center or the Community Blog.
Yeah App Bridge React + Polaris seemed the most relevant for my use case (ie an existing polaris app that I wanted to make embedded). Here's the relevant version numbers that npm is giving me:
@shopify/app-bridge@1.21.4
@shopify/app-bridge-react@1.21.4
@shopify/polaris@4.21.0