Embedded App - Troubles Implementing App Bridge alongside Polaris

Retired Boards Appdev Tools
1

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:

  1. Implemented the CDN version of app bridge to test - redirect into Shopify dashboard worked perfectly
  2. Tried to implement app bridge alongside Polaris using the App Bridge React component library following example here (In short I added the provider element inside the AppProvider element). App does not redirect and recieved error message below
  3. Finally tried to implement app bridge using the basic technique in the getting started guide. App does not redirect and identical error to above

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'
});
2

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?

3

Hi Iain, thanks for getting back to me. Yes exactly, tried all 3 methods in same app using a local (ngrok) environment:

  1. Create a simple text route 123.ngrok.io/dashboard with a basic html page - LOADS AS NORMAL
  2. Update this html page to include the CDN version of app bridge - RELOAD, AND IT REDIRECTS INTO AN IFRAME IN SHOPIFY DASHBOARD AS DESIRED
  3. Now implement a simple polaris page at 123.ngrok.io/dashboard (no app bridge / redirects) - LOADS AS NORMAL
  4. Try to update polaris page to include app bridge - LOADS NORMALLY (NO REDIRECT) WITH ERROR

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').  
4

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?

5

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/[email removed]
@shopify/[email removed]
@shopify/[email removed]