Questions and discussions about using the Shopify CLI and Shopify-built libraries.
Solved! Go to the solution
This is an accepted solution.
Hey everyone it turns out the redirects were happening because my app's admin url was NOT on my Whitelisted URL Redirect list........
The installation page url is different than the app admin, and I never added the admin url to that list so when the installation page redirects to the admin, after checking if the user has an account, it was failing to accept it.
@tokito though your answer didn't solve mine it did remind of of the Whitelisted redirect list so thanks!
Hey @ScottAdrian,
Looks like the video is set to private so I'm not able to see it. Can you tell me the name of your app? We've received a few similar reports regarding this issue, so far the solution has been to update your app-bridge
or koa-shopify-auth
packages if you're using them. If you're not using these packages, can you confirm that your app uses the flow described in this article to escape the iframe before redirecting to oauth?
JB | Solutions Engineer @ Shopify
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
@_JB Sorry about that I made the video public. The app is called "ShareThis Share Buttons" https://apps.shopify.com/sharethis-share-buttons any help is appreciated. I can't find the issue.
@_JB I have enabled App Bridge. My app redirects people to their admin and then if inside of an iframe it redirects to the main app admin page hosted by my site. I'm not doing anything with the shopify's oath redirect, but the app works fine in Chrome without all the redirects you see from the video.
Hey @ScottAdrian,
Which version of app bridge are you using?
JB | Solutions Engineer @ Shopify
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
@_JB I'm not sure. I just enabled App bridge in "extensions". I'm not directly interacting the the app bridge. The only API calls I use are
oauth/access_token
and
/api/2019-10/script_tags.json
Hey @Amar_Gandhi and @ScottAdrian,
We're starting to find a resolution for most of the reports we've received about this issue, so far they've all been related to the redirect to the OAuth URL being done improperly, and I believe that is what's happening here as well.
This doc (https://shopify.dev/tools/embedded-app-sdk/oauth) contains Shopify's recommendation for escaping the embedded app iframe before redirecting the user to Shopify's OAuth link. This is necessary because if you don't escape the frame first, the redirect will occur inside the frame and is blocked by CORS (since the redirect URL links to the admin, and Shopify doesn't allow the admin to be rendered inside a frame).
The instructions in that doc have been our recommendation for some time now, but it seems apps were able to function previously without implementing this recommendation, and a recent change has caused it to stop working. Safari and Firefox have been adding additional privacy features with each update they make, so one possibility is that a change with the browsers caused this to become an issue now. In any case, all resolved reports of this issue were fixed by implementing the redirect recommendation, so this is the first thing I would look at.
Please let me know if there are any other questions I can answer.
JB | Solutions Engineer @ Shopify
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
@_JB I'm having same issue on Safari 13.1 and based on other posts it seems to be related to Safari by default blocking third party cookies. Any resolution from Shopify team around this? I think we need patch in AppBridge or koa-auth library.
I think I have the same issue. In Chrome all seems to be right, and in Firefox I can`t open my app.
When I'm trying to open app in Firefox (73.0.1) I observe one of the two possible scenarios:
Blocked by Content Security Policy. An error occurred during a connection to nursery-dev-store.myshopify.com.
I've inspected network activity during this and discovered that it's different from Chrome.
In Chrome merchant redirected to my app's callback URL after authorisation
In Firefox merchant redirected to login page and doesn't come back to app's callback anymore
One of my hypothesis is that Firefox blocks some cookies, enforcing Shopify to login users.
I think those cookies are blocked
In my app I don't use ShopifyApp or AppBridge to authorize users. I just only redirect users to https://${shop}/admin/oauth/authorize and pass redirect_uri as a query parameter
Hey @mellon_collie,
We're investigating a few different reports of this issue. So far we've identified a few cases that were caused by the app redirecting to Shopify's OAuth URL from within the iframe, instead of escaping the frame first.
When you redirect the user to Shopify's OAuth URL, this needs to happen at the parent level escaped from the iframe. Otherwise, the redirect will occur within the frame and will be blocked because the admin doesn't allow CORS. We have a guide here with the recommended auth flow.
Can you confirm if your app is already doing this? If not, you can implement the steps outlined in the guide, and please post back here to let us know how that worked out.
JB | Solutions Engineer @ Shopify
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog
We are getting the same issue, I'm using React+Node from the tutorial.
It keeps redirecting after we update my chrome browser to the latest version.
This is what I'm using in my app.js:
const config = {apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect:true};
If I let forceRedirect:false, it stop redirecting but the app displays outside the iframe in a new tab.
Make sure you set appropriate values for secure and sameSite in session.cookie. Also if you're using @shopify/shopify-express comment out the below:
/* if (!request.cookies[TEST_COOKIE_NAME]) { // This is to avoid a redirect loop if the app doesn't use verifyRequest or set the test cookie elsewhere. response.cookie(TEST_COOKIE_NAME, '1'); //topLevelRedirect(response, `${host}${baseUrl}/enable_cookies?${querystring.stringify({shop})}`); //return; } */
This is what worked for us hopefully it helps someone.
Regards,
Sam
This problem appear in 1/2020 (I face it). Most likely when end user enter your app URL it will go to Whitelisted redirection URL(s) and go though Oauth process. Which is not allowed.
So how to solve it :
When someone goes to app URL check if this user had already had a token or not then go to main page instead of your Whitelisted redirection URL.
This is an accepted solution.
Hey everyone it turns out the redirects were happening because my app's admin url was NOT on my Whitelisted URL Redirect list........
The installation page url is different than the app admin, and I never added the admin url to that list so when the installation page redirects to the admin, after checking if the user has an account, it was failing to accept it.
@tokito though your answer didn't solve mine it did remind of of the Whitelisted redirect list so thanks!
I use Firefox and this is how I solved this issue:
Edit: Just found this => https://shopify.dev/docs/apps/store/security/iframe-protection
You know, this might work just fine for us as developers, but it's not quite the perfect fit for a Shopify shop owner. There's got to be a preferred way from Shopify that doesn't result in this error. It's particularly important since everything runs just as it's described in the API documentation.