the documentation says under the “Navigating to routes within your app” that we should be able to replace this with:
window.open('/pricing', '_self');
This, however, does not work, since it just navigates to “myserver.com/pricing” and does not include the “shop”, “host”, etc. url parameters that would be needed for the server to be able to handle this request. Is there any standard way this can be done (that does not include manually adding the url parameters)?
Were you able to figure this out? We have the same issue. The new Navigation API did not work. We have tried both placing an anchor tag and using the open() call. Those links are not changed in any way by App Bridge and do not have any query parameters like shop, timestamp, etc.
Sorry for the late reply. Can you specify how we could use the shopify variable returned by useAppBridge to open a route inside our app? I was not able to find an open() function on the shopify variable, and even though it has the host, and shop on the config object, I would still need to calculate the HMAC and put them together manually, which I was trying to avoid.
So far we haven’t found an elegant solution using Shopify API, so for now we build a Shopify Admin URL instead (that way we can avoid having to specify the URL parameters manually).
/**
* @param {string} path
* @param {string} [target]
*/
export default function navigateToAppPath(path, target) {
// `window.open(path)` doesn't add the url parameters (`shop`, `host`, etc.), so we need to
// manually build the url
const appName =
process.env.NODE_ENV === 'production' ? '
Sorry for the previous reply. I misunderstood. I met the same issue. I switch to using react-router’s useNavigate and it works without putting any search params.
I think there should be some errors with the new version of app bridge.
Same issue as everyone here - when a user clicks a link within our app, we call open(/some-page/${id}, "_self"); and
all of the embedded query params go away, so the server now sets
res.setHeader("Content-Security-Policy", frame-ancestors ‘none’;); since it’s just a plain request being made from the admin embedded app. Trying to stay up to date here with our app in production, but these issues appearing at deploy time is very inconvenient (not an issue in dev).
What is the proper way to use the new app bridge and route within the app using native navigation apis without breaking the embedded iframe? @Shopify_77
What I ended up doing was using the “authorization” header included in the request ie. grabbed it and decoded it to get the shop. This works when the shop query is removed, because requests to your app pages need to verified in the same way that api routes are.
I wasn’t specifically trying to replace an older app bridge method, but rather ran into it while leveraging getServerSideProps of NextJS to data fetch on the server before rendering a certain page of my app. Worked fine if I reloaded the full page, but fell apart when navigating to the page using app bridge nav links etc. Doing above solved it for me
For anyone using NextJS this is the utility I created. There are plenty of examples of validateJWT functions, so didn’t include that here.
export const getShopFromRequest = (context: any) => {
let shop = context.query.shop as string | null;
if (!shop) {
try {
const authHeader = context.req.headers.authorization;
if (authHeader) {
const token = authHeader.split(' ')[1];
const payload = validateJWT(token);
// dest will be like "https://example.myshopify.com"
shop = shopify.utils.sanitizeShop(payload.dest.replace('https://', ''));
}
} catch (error) {
console.error('Error extracting shop from JWT:', error);
}
}
if (!shop) {
throw new Error('No shop found in request');
}
return shop;
}
I looked through the app-bridge code and it looks like a bug to me. If target=“_self”, it does a straight redirect instead of calling the app bridge to navigate.
I fixed this by using the app-bridge protocol directly.
Even when fixed, there’s another undocumented wrinkle. You need to prefix your url with the “app:” protocol. So if this ever gets fixed, for links to be intercepted correctly, your url would have to be:
A Quick edit
I didn’t test with window.open, but the same rule may apply.
