App Bridge Redirect Not Passing Query Parameters

Solved
Excursionist
21 1 1

I'm unsure how to pass query parameters when using the Redirect.dispatch action from the Shopify App Bridge. The redirected page is loading but the query parameters appear to be stripped/unavailable in getInitialProps.

 

Example code:

 
import {AppBridgeContext} from '@shopify/app-bridge-react/context';

class DetailsPage extends React.Component {

  static contextType = AppBridgeContext;

  onEditClick = () => {
    const redirect = Redirect.create(this.context);
    return redirect.dispatch(Redirect.Action.APP, `/edit?id=${id}`);
  }
}
 
The edit page is loaded but the id parameter is not included when 
getInitialProps is loaded (using Next.js)
 
static async getInitialProps({query}) {
..
}
 
Instead of the expected id, the query contains the following properties:
{ hmac, locale, shop, timestamp }
 
Looking at the entire context passed to getInitialProps I see that the asPath property has been modified to include the properties above, this must be by the redirect action?
 
Interestingly, the url is changed correctly in the browser so when I reload the page the query object is populated as expected, something is getting lost when using the Redirect action and the interaction with Next.js.
 
Perhaps I am using it incorrectly? I can't find any docs on it aside from https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation/redirect
 
No examples there have query parameters....
 
Would be nice if the app bridge was available on github to see the source to understand if I need to pass an option differently or figure out what it's doing. (links are broken here: https://www.npmjs.com/package/@shopify/app-bridge?activeTab=readme)
 
I'm using 1.6.8 version of app-bridge
 
Thanks,
 
Adam
0 Likes
Shopify Staff
Shopify Staff
43 18 4

Hi @Adam_Hurlburt 

 

We have logged this bug and will let you know when it is resolved. Thanks for reporting it. 

 

Cheers, 

Henry

 
0 Likes
Excursionist
21 1 1

Thanks @Henry_Tao, any estimates on when a fix for this can be ready? This is a high priority bug for me (and I assume others?) and will have to find a workaround if something can't be resolved soon.

0 Likes

Success.

Shopify Staff
Shopify Staff
16 3 7

Hi Adam_Hurlburt,

 

This behaviour is a limitation that we don't have a clear plan to fix as it is difficult to find a solution. The root of the problem is HMAC verification. Every time Shopify loads your app, we pass in an HMAC that is created using your app secret which you can use to verify that the request is from Shopify. This value is only valid for when ALL query params match. If custom params are added, we need to strip out otherwise the HMAC would be invalidated. See HMAC verification for more info. 

 

The only time that custom params are not stripped out is when your app handles its own redirect behaviour and Shopify does not need to fully reload the iframe. You can try handling your own redirects as a workaround to get query params to be passed through: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/navigation#using-client-side-routin...

 

1 Like
Excursionist
21 1 1

Thanks @Trish_Ta I confirmed I have a working solution now.

 

Quick question for my understanding, is it actually necessary to subscribe to the redirect event as in the link you provided, I am using Next.js as in the shopify example and instead of redirect am now using next router to redirect. It doesn't seem to cause any problems not subscribing to the redirect as indicated in that linked article (in fact the redirect subscription never triggers at all when using next only when using redirect which makes sense I suppose). Since I am new to next.js and shopify app dev I wanted to make sure I am not missing something. Were you suggestion something different? Thanks again for the help.

0 Likes
Shopify Staff
Shopify Staff
16 3 7

Hi Adam,

 

If you need to use App Bridge to perform a redirect, then it would be necessary to subscribe to the redirect event. It lets the App Bridge host know that your app would like to handle its own redirects instead of reloading the iframe. As mentioned above, whenever the iframe needs to do a full reload we need to strip out all custom params.

 

However, in your case it seems like you found another way to redirect the app outside of App Bridge? If that the case then it makes sense that you never receive the redirect event as App Bridge does not know about your app redirecting. For reference, the redirect event is only triggered in the following situations:

- a user has clicked on your app icon or name

- your app calls

Redirect.create(this.context).dispatch(Redirect.Action.APP, `/yourPath`)

Let me know if this makes sense.

 

Trish

 

1 Like
Highlighted
Excursionist
21 1 1

@Trish_Ta it does make sense thank you. I was just wondering if there was any issue with me redirecting without using App Bridge (I'm using Next.js Router), it is working but I wanted to avoid unintended side effects, sounds like this shouldn't be a problem?

0 Likes
Shopify Staff
Shopify Staff
16 3 7

It's not a problem at all. The only thing to keep in mind is you might need to keep the browser history up to date yourself if you're redirecting without App Bridge.

 

For example, if your app redirects to `/settings`, you might want to update the browser url to `https://{shopOrigin}/admin/apps/your-app-handle/settings`. In order to achieve this, you'd need to do the following:

 

import {History} from '@shopify/app-bridge/actions';
History.create(app).push('/settings');

If you use App Bridge to do the redirect the the browser history is automatically kept up to date.

1 Like