App Bridge React, how to redirect an embedded React app to subscription confirmation URL?

[nikola_seo]

Hey everyone, I have a simple usecase, I create a reoccurring subscription and need to redirect the client to the confirmation url. The app is embedded inside shopify admin and it runs on react. If I try to redirect directly ``window.location.href = response.data.confirmation_url;`` I get an error saying `Refused to display 'confirmation_url' in a frame because it set 'X-Frame-Options' to 'deny'`. So I have to redirect the parent itself with `window.top.location.href = response.data.confirmation_url;` which itself results in the following error

```
Failed to set a named property 'href' on 'Location': The current window does not have permission to navigate the target frame to 'https://.....myshopify.com/admin/charges/..../..../RecurringApplicationCharge/confirm_recurring_application_charge?signature=BAh7....83e2'.
```

So it seems I would have to use

```
var redirect = Redirect.create(app);

redirect.dispatch(Redirect.Action.REMOTE,redirectUrl);
```

But I am using `app-bridge-react` which is configured via CDN and I don't have access to this redirect API.

There is no documentation on this, and I couldn't find any information online, what is the recommended way to approach this?

[nikola_seo]

Solution can be found over at https://community.shopify.dev/t/app-bridge-react-how-to-redirect-an-embedded-react-app-to-subscripti...

[rajweb]

@nikola_seo ,

Solution:

You can use the useAppBridge hook provided by app-bridge-react to access the App Bridge instance and perform the redirect as follows: jsx Copy code

import { useAppBridge } from '@shopify/app-bridge-react';
import { Redirect } from '@shopify/app-bridge/actions';

function MyComponent({ redirectUrl }) {
  const app = useAppBridge();

  const handleRedirect = () => {
    const redirect = Redirect.create(app);
    redirect.dispatch(Redirect.Action.REMOTE, redirectUrl);
  };

  return (
    <button onClick={handleRedirect}>
      Redirect to Confirmation
    </button>
  );
}

export default MyComponent;

Steps:

1. Ensure @shopify/app-bridge-react is correctly imported and initialized in your app.

2. Use the useAppBridge hook to access the App Bridge instance.

3. Create a Redirect action and dispatch the desired URL using Redirect.Action.REMOTE.

This approach leverages Shopify's recommended method for handling redirects within embedded apps.

[rajweb]

Hey @nikola_seo ,

Thank you for reaching out regarding your issue with redirecting to the confirmation URL within your Shopify embedded app. Based on your description, it seems you're running into restrictions related to iframe security settings and cross-origin policies.

The best approach here is to use Shopify's Redirect action, which is part of the App Bridge framework. If you're using app-bridge-react via CDN, the useAppBridge hook can provide access to the App Bridge instance, allowing you to dispatch the redirection.

I have extensive experience (6-7 years) working with Shopify apps, embedded apps, and the App Bridge framework. I'd be happy to help you implement this solution or assist with any additional challenges you're facing.

Feel free to email me at [ rajat.shopify@gmail.com ], and we can discuss your requirements in detail to ensure a seamless implementation.

Looking forward to collaborating with you!

Best regards,

Rajat