Embedded app links should use absolute urls

App Bridge
1

As recommended for Remix embedded apps, we should link to the app’s pages using absolute paths relative to the app with the Link component.

For example, to navigate to the page https://admin.shopify.com/store/{store}/apps/{app}/app/mypage, the correct approach would be:

<Link url="/app/mypage">

Alternatively, to link to Shopify admin pages, you can use the shopify:// scheme. For example:

<Link url="shopify://admin/products">

These links work seamlessly when clicked normally. However, if you perform an action that bypasses the link’s handling—such as using middle-click or Ctrl+Click to open the link in a new tab…the URL will be opened directly. This can lead to an invalid URL or cause the embedded app to open outside the embedded context.

image

image
image629×290 7.54 KB

Thanks

2

I have same issue, I want to open my custom route at new tab but it will always need auth login

3

@huykon225 as unfortunately we haven’t heard back from shopify on this one I came with a wrapper component for achieving this.

You can see it here: A React component for shopify's remix embedded app that will let opening links in a new tab · GitHub – you will have to replace the app name. Then just replace <Link url=...> with <AdaptiveLink url=...>

if you decide to use it and see problems with it, feel free to tell me so that I can update this gist too.

2 Likes
4

Thanks @Soufiane_Ghzal . Your suggestion is quite good. The appName should be app handle

1 Like
5

Thanks for the wrapper!

May I know how you go around with <Button url={url}> ?

The workaround I can think of are:

  1. replace url prop with onClick + useNavigate() since navigate(url) prohibits middle-click and ctrl + click.

  2. create an util function that outputs an absolute url.

Hope Shopify team can spend sometime on this for official solution…

6

@ann20502 Thanks for your suggestion.

Unfortunately, I haven’t implemented anything for the button yet. I wanted to, but I’ve been constantly postponing it due to lack of time. I also noticed an issue with my link implementation: when linking to a page on the admin outside of the app, a regular click triggers a full page load instead of optimized push-state navigation. Again, I haven’t had time to look into it.

I’ll keep you updated if I manage to improve these things, and please feel free to share any solutions you come up with! :slight_smile: