Can't redirect from shopify embedded app to other URL

Question

I tried to redirect from shopify embedded app iframe to another link using an onclick action. Please see the below code i'm using

import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions'; 
const app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  host: 'host from URL search parameter',
});

In onclick function:
app.dispatch(Redirect.toRemote({'url':'https://admin.shopify.com'}))

My onclick function is get called, i didn't see any error in console but it not redirected to the URL mentioned. Please share your thoughts

I also tried using

Redirect component also instead of createapp component. but it doesn't make any changes

Answer 1

I had the same behaviour when I had to implement billing flow. Here's my redirect outside the frame:

getApp().dispatch(Redirect.toRemote({ url: confirmationUrl }));

This is the getApp() function:

export const getApp = () => {
  if (window.__SHOPIFY_APP == null) {
    const host =
      new URLSearchParams(location.search).get("host") ||
      window.__SHOPIFY_DEV_HOST;
    window.__SHOPIFY_DEV_HOST = host;
    if (process.env.SHOPIFY_API_KEY == null || host == null) {
      throw new Error("Can't crate an app bridge instance");
    }

    window.__SHOPIFY_APP = createApp({
      host,
      apiKey: process.env.SHOPIFY_API_KEY,
      forceRedirect: true,
    });
  }

  return window.__SHOPIFY_APP;
};

If you don't have window.__SHOPIFY_APP__ have a look to your AppBridgeProvider implementation, there will be something like my implementation.