React hook useNavigate() redirects to the wrong url

[its-anas]

Issue summary

• @shopify/shopify-app-express version: 2.0.0
• @shopify/app version: 3.46.5
• @shopify/cli version: 3.46.5
• Node version: v18.16.0
• Operating system: Windows 11 & on Railway server

Expected behavior

useNavigate() should redirect to URL: https://admin.shopify.com/store/storeName/charges/00000/00000/RecurringApplicationCharge/confirm_recurring_application_charge?signature=00000--00000

Actual behavior

useNavigate() is redirecting to URL: https://admin.shopify.com/store/storeName/store/storeName/charges/00000/00000/RecurringApplicationCharge/confirm_recurring_application_charge?signature=00000--00000

The hook adds an unnecessary /store/storeName/ to the original url.
This was working fine until today.
I tried other urls like google.com and it works fine.
I tried uninstalling the app, i tried it on production, it's not working!

Steps to reproduce the problem

1. Import useNavigate and reassign it:

import {useNavigate} from '@shopify/app-bridge-react';
const navigate = useNavigate();

3. Have some element in frontend with:

onClick={() => {
    navigate(planConfirmationUrl);
}}

4. Instead of redirecting to the charge approval page, it manipulates the URL hence redirect to an error page: https://i.imgur.com/uFHmKfK.png

[greentfrapp]

I'm seeing the same problem here.

A workaround is to submit the URL without "store/{storeName}", but that might be incompatible if this bug eventually gets fixed.

[its-anas]

@greentfrapp Yes i thought of that. But this will just make the situation worse!

[its-anas]

I tested this on app that i published a month ago, and didn't update for more than a week. It was working fine and merchants were getting redirected to the charge url, but now it have the same issue too!

[ToxiKejtor]

The issue happens when you have your app opened on url: https://admin.shopify.com/store/somestore/apps/someapp.
If you use legacy older app that forces legacy domain, it works fine: https://somestore.myshopify.com/admin/apps/someapp?force_legacy_domain=1.

In short, yes, the issue is happening on the first case. Basically it doubles part of url unnecessary, making the whole url invalid., e.g.:
https://admin.shopify.com/store/somestore/store/somestore/charges/111111/RecurringApplicationCharge/confirm_recurring_application_charge?signature=signaturecode

It doubled: "store/somestore/store/somestore"

[mcunningham]

Same issue here for navigating to an admin url from inside an embedded app. Totally unexpected as I have not changed versions. Pretty unfortunate bug to be honest as I was using it to navigate to a RecurringApplicationCharge and this is causing my onboarding flow to drop off and loose sales.

In my case of an embedded app trying to navigate to an admin url, I found a workaround using window.parent :

// Logic to get some shopify admin url from within embedded app
const confirmationUrl =  await appSubscriptionCreate() 

//https://admin.shopify.com/store/storeName/charges/00000/00000/RecurringApplicationCharge/confirm_recurring_application_charge?signature=00000--00000

// Since embedded app is in an iframe, access the parent of the frame and navigate it's location.href
window.parent.location.href = confirmationUrl;

[greentfrapp]

Update - this seems to be fixed already. I was able to navigate to the subscription page from the embedded app via useNavigate(subscriptionURL)