Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Strange Redirect Loop In Safari and Firefox Only When Accessing My App

Solved

Strange Redirect Loop In Safari and Firefox Only When Accessing My App

ScottAdrian
Tourist
6 1 1

 Strange redirect when accessing my app only on Safari and Firefox browsers. Not sure where it is coming from as its not related to any of the apps redirects. Anyone seen this before?

Accepted Solution (1)
ScottAdrian
Tourist
6 1 1

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!

View solution in original post

Replies 16 (16)

_JB
Shopify Staff (Retired)
836 100 223

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

ScottAdrian
Tourist
6 1 1

@_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.

ScottAdrian
Tourist
6 1 1

@_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.

_JB
Shopify Staff (Retired)
836 100 223

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

ScottAdrian
Tourist
6 1 1

@_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

 

 

ScottAdrian
Tourist
6 1 1

Hey @_JB I DM'd you the code our app is using. Let me know if that helps.

_JB
Shopify Staff (Retired)
836 100 223

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

AvocadosLab
Shopify Partner
51 4 46

@_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.

mellon_collie
Shopify Partner
12 0 3

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:

  • Endless login redirect loop as you described above
  • Firefox error message
    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 authorisationIn Chrome merchant redirected to my app's callback URL after authorisationIn Firefox merchant redirected to login page and doesn't come back to app's callback anymoreIn 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 blockedI 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

_JB
Shopify Staff (Retired)
836 100 223

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

Amar_Gandhi
Shopify Partner
10 0 3

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.

Not applicable

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

tokito
Shopify Partner
38 2 2

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.

ScottAdrian
Tourist
6 1 1

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!

sabirsemer
Shopify Partner
5 0 1

I use Firefox and this is how I solved this issue:

 

  1. Go into Firefox Settings > Privacy & Security
  2. Under Enhanced Tracking Protection, click on MANAGE EXCEPTIONS
  3. Add the following exceptions (one at a time):
  4. Go back to your Shopify Admin page and hit refresh and then click back into your app that was the troublemaker. It should work now!
Sebastian_H
Shopify Partner
17 3 4

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.