useNavigate redirects to incorrect URL

[janklimo]

Describe the bug

Assume the following URL I get back from the API:

https://admin.shopify.com/store/robin-pro-beta/charges/5397235/22481371185/…KwgxgP47BQA6EmF1dG9fYWN0aXZhdGVU--b765873…

trying to navigate to this URL returns a 404. Here's what I'm doing:

const navigate = useNavigate();
navigate(url);

This fails because we get redirected to this page:

https://admin.shopify.com/store/robin-pro-beta/store/robin-pro-beta/charges/5397235/22481371185/RecurringApplicationCharge/confirm_recurring_application_charge?signature=BAh7BzoHaWRsKwgxgP47BQA6EmF1dG9fYWN0aXZhdGVU--...

Note the duplicated store/robin-pro-beta/ segment of the URL.

To Reproduce

Steps to reproduce the behaviour:

1. Create a new recurring charge.
2. Use useNavigate to redirect to the confirmation URL.

All seems to be fine in the dispatched action:

Expected behaviour

Redirect to the URL as specified.

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge @ 3.7.7
• @shopify/app-bridge-react @ 3.7.2
• @shopify/polaris @ 7.6.0

Platform

• OS: MacOS
• OS Version: Ventura 13.4
• App: Chrome/Safari web admin

[SeanMythen]

Yes, I'm having the same issue. When using the plain Javascript way to do it as well, I can get it to work in development, but when pushed to production and everything is minified, it doesn't work: https://shopify.dev/docs/apps/tools/app-bridge/actions/navigation/redirect-navigate I'm not sure if it's related.

useNavigate(); was working a day or so ago, and I noticed yesterday and into today, people getting 'stuck' at the 404 because of the duplicate segements of the url and not being able to get to my billing page.

[nagoh]

Same issue here. Have asked question in community here

[janklimo]

For anyone struggling with this issue until it's resolved, I've used the following workaround:

-      navigate(response.data.confirmation_url);
+
+      // This is a workaround for https://github.com/Shopify/shopify-app-bridge/issues/213
+      top.location.href = response.data.confirmation_url;

@nagoh many thanks for sharing the thread!

[dauysbekov]

SHOPIFY PLEASE FIX THIS BUG!!!!!!!!!!!!!!!!!!!!!!

[kleczekr]

@janklimo thanks a bunch for sharing the workaround. I've been breaking my head trying to figure out why code which has been working isn't working anymore.

[niinpatel]

Thanks for the workaround @janklimo and @nagoh

[its-anas]

I had the same issue and found a solution that works.

Source: https://github.com/Shopify/shopify-app-bridge/issues/214#issuecomment-1608258599

Solution:

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

// ❌ This doesn't work
const navigate = useNavigate();
navigate(billingUrl);

// ✅ This works
const app = useAppBridge();
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, billingUrl);

[daviareias]

Thanks, we pretty much lost 5 days of app installs, I only figured out this was happening because a client asked about a paid feature and I had to go through the billing process in my store again to check it. Another client complained about this but I thought it was because he didn't have permission to accept app billings.

[henrytao-me]

@janklimo

The problem comes from your app passes the full url to navigate function. If you want to redirect to any admin pages, you can try relative url with target: 'host'

navigate(
    '/charges/----/----/RecurringApplicationCharge/confirm_recurring_application_charge?signature=----',
    {
      target: 'host',
    },
  );