Shopify/shopify-app-template-node

React hook useNavigate() redirects to the wrong url

its-anas opened this issue · 7 comments

its-anas commented

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

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

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

its-anas commented

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

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

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

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

lizkenyon commented

Closing because this seems to be fixed. Please create a new ticket if you are still seeing issues.