Embedded App domain change issue

Retired Boards Appdev Partners Discussion
1

Hi

Our embedded app was asked to solve the following issue:

Your embedded app needs to load in admin.shopify.com. Shopify is moving to this new domain and all merchants will have access to it, as of Jan 31st, refer to our changelog for details. To resolve this issue, reference our Setting up Iframe protection document as well as ensure your app is at minimum on App bridge 2.0, App bridge 3.0 is recommended.

Our engineering team debugged this further and we found that admin.shopify.com is not allowing the permission url to be opened in the iframe - we are using the permission url as suggested by the doc here.

We tried a few more things but it still didn’t work. We are sending some technical details below:

We have done the code changes per the guidelines. However, after keeping only the host and API in the config, we could see that the app is loading neither in *.myshopify.com nor in admin.shopify.com.

(see 1st slide in this ppt for the code screenshot)

const host = new URLSearchParams(location.search).get("host");
const apiKey = process.env.REACT_APP_SALES_CHANNEL_API_KEY;

export const appBridgeConfig = {
apiKey,
host,
};

Old code for app bridge config (with this one app was at least opening in *.myshopify.com)

(see 2nd slide in this ppt for the code screenshot)

window.global = window;
window.Buffer = window.Buffer || require("buffer").Buffer;

const shop =
  window.location.hostname !== "localhost"
    ? new URLSearchParams(window.location.search).get("shop")
    : "[amar-test1.myshopify.com](http://amar-test1.myshopify.com/)";

const host = window.Buffer.from(`${shop}/admin`).toString("base64");
const apiKey = process.env.REACT_APP_SALES_CHANNEL_API_KEY;

export const appBridgeConfig = {
  apiKey,
  shopOrigin: shop,
  host,
};

We are using the app-bridge version 2.0.12 and Polaris library. Please check below.

(see 3rd slide in this ppt for the code screenshot)

Below are redirectUrl and permissionsUrl; RedirectUrl is our back end API which eventually redirects to apps “/” route.
Request route is :

(see 4th and 5th slides in this ppt for the code screenshot)

Auth page is redirecting to Shopify’s OAuth permission URL

(see 6th slide in this ppt for the code screenshot)

import React, { useEffect } from "react";
import PageLoading from "../core/PageLoading";

const Auth = ({ permissionUrl }) => {
useEffect(() => {
window.location.assign(permissionUrl);
}, []);

return 

Please guide us on where we might be going wrong.
2

Besides setting up the content security header on your response I think you might need to be on App Bridge 3.x for unified admin to work