search

Shopify / shopify-app-template-node

MIT License
860 stars 393 forks source link

React hook useNavigate() redirects to the wrong url #1283

Open its-anas opened 1 year ago

its-anas commented 1 year ago

Issue summary

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();
  2. Have some element in frontend with: 
    onClick={() => {
navigate(planConfirmationUrl);
}}
  3. 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 commented 1 year ago

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 commented 1 year ago

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

its-anas commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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