There was an error opening your app in the Shopify admin. Your embedded app is loading an invalid URL (17.2)

[yasir-naseer]

Greetings, I recently submitted an app to shopify for which i used 17.2 version package, which has already added the clickjacking protection feature. but still shopify rejects the app. Here is the details of the app

App must set security headers to protect against clickjacking. There was an error opening your app in the Shopify admin. Your embedded app is loading an invalid URL (https://stack-828118-5841321.cloudwaysapps.com/authenticate/token?shop=app-security.myshopify.com&target=%2F%3Fembedded%3D1%26host%3DYXBwLXNlY3VyaXR5Lm15c2hvcGlmeS5jb20vYWRtaW4). Make sure it is valid. Learn more about testing your app before submitting.

[yasir-naseer]

As a reference, i find other people having this issue as well

https://community.shopify.com/c/partners-discussion/app-submission-invalid-url-error/td-p/1747008

[yasir-naseer]

I think the problem is with the Shopify Admin (or browser?) cancelling the first request to fetch our app, and then firing a second request. It seems the automated test only waits for the response of the first request, and assumes the app does not load. (see attached image)

[Kyon147]

Hi @yasir-naseer

Are you building your app using the blade templates?

[yasir-naseer]

hi @Kyon147 , yes im using default blade templates file. just normal flow and package files, no usage of React or Vue or any framework

[Kyon147]

That is most likely the cause.

We've been seeing rejections of apps that using the blade flow because it uses the auth/token in between moving across each page and this it against Shopify requirements on Oauth.

They expect the first page after successful Oauth to be the dashboard/homepage of the app and anything else causes it to be rejected. When using blade templates, the next page becomes Auth/token and they reject it.

Shopify are pushing everyone slowly down the SPA route sadly.

[yasir-naseer]

@Kyon147 ,yes I understand, I actually saw other people also mentioning such issues, do you think there is some way we can handle this case? as I already completed the app and waiting for this issue to be fixed so I can resubmit. Thanks for the help again!

[Kyon147]

There's not a clear path forward with the blade flow as you need the auth/token route to be able to get the JWT token.

You could try TurboLinks as that does 'fake' an SPA but it might be not be a solution to pass the approval if this still triggers Auth/token on install.

You need to Oauth and head straight to the page. So you'd need to change the base files if you wanted to try a fix.

[yasir-naseer]

hmm i see, seems like a big problem, normally i can try out different things, but as now my client is eagerly waiting for me to fix it and resubmit, this is going be an issue

[Kyon147]

@yasir-naseer sadly it is a known limitation which Shopify has also pointed out https://shopify.dev/apps/auth/oauth/session-tokens#limitations-and-considerations

[Kyon147]

Going to close this ticket out for now as it is a known problem.

[yasir-naseer]

Hi @Kyon147 , yes i was reading it few time ago, so i think the possible way is to convert it to SPA. Which ultimately means i have to rebuild it/convert my multi page app to SPA. Can you confirm? Or is there a better way?

[Kyon147]

The best solution at the moment would be to convert your app to be an SPA, either by moving to React or Vue or trying turbolinks.

With 17.3 we also introduce a new config option called frontend_engine if you set this to REACT it will no longer use the auth/token route as it will expect you to grab the JWT yourself.

I've recently built an app that uses this flow, with a VueJS frontend. You can also join our discord channel to we recently se up if you want to discuss this further.

[yasir-naseer]

ok i see, how can i join the channel?

[yasir-naseer]

@Kyon147 , i actually re-submitted the app without really making any changes, this time they do give the same rejection, but this time the url mentioned by them is not auth/token

So i dont think the issue is because of auth/token

[Kyon147]

@yasir-naseer you'll need to speak with Shopify on the steps forward as they'll be able to tell you what exactly you need to fix and why that URL is invalid.

[yasir-naseer]

yeah i actually tried it, but the rejection is coming from the automated review, no the manual review by shopify team, in automated review, they dont dont option to communicate with the team neither the in depth reason and details

[Kyon147]

If you look at the error, it looks like the security headers aren't be set on that route.

I'd start there and see why.

[yasir-naseer]

I think the problem is with the Shopify Admin (or browser?) cancelling the first request to fetch our app, and then firing a second request. It seems the automated test only waits for the response of the first request, and assumes the app does not load. (see attached image)

Actually, i inspected the whole installation process, the first request to our app is getting failed (on this request the headers are also not present), then the request is made again and this time the app actually returns a success response (this request has the headers we need)

So maybe it is due to the reason that it is failing the first request

[yasir-naseer]

Just as a reference, i saw other people also getting the first app request failed while the second one returning a app response

https://community.shopify.com/c/partners-discussion/app-submission-invalid-url-error/td-p/1747008

[Kyon147]

Hey @yasir-naseer

I took another look at this today, I think it happens to all apps. I've looked at other published apps on the app store and even they have the first request cancelled.

I've also go an open ticket with Shopify about it as well, so they said they have passed it onto the api team and will come back to me.

[Kyon147]

Also, discord link is in here https://github.com/osiset/laravel-shopify/discussions/1228