shopify_app: Infinite redirect between /login, Home#index, and /granted_storage_access

Hi @tanema 👋 Thanks for your reply, I really appreciate your help.

As you suggested, I’ve checked the return_to param in our OAuth call and can see that it’s simply set to the root URL of our Rails application. It doesn’t appear, therefore, that the problem is caused by sending the user back to the login page after successful authentication.

In an effort to simplify the issue, I’ve created a brand new Rails app running the latest version the shopify_app gem. With the exception of adding my serverless.social URL to the config.hosts array (config/environments/development.rb), I haven’t changed any of the code. This is a fresh Rails app after having run rails generate shopify_app.

I’m sorry to report that, even when running this minimal test-case, the redirect issue is still present in Google Chrome:

Started GET "/login?return_to=%2F%3Fhmac%3D3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a%26locale%3Den%26session%3D1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c%26shop%3Dtalking-tables-test-store.myshopify.com%26timestamp%3D1598951543&shop=talking-tables-test-store.myshopify.com" for 109.154.151.20 at 2020-09-01 10:12:47 +0100
Cannot render console from 109.154.151.20! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by ShopifyApp::SessionsController#new as HTML
  Parameters: {"return_to"=>"/?hmac=3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a&locale=en&session=1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c&shop=talking-tables-test-store.myshopify.com&timestamp=1598951543", "shop"=>"talking-tables-test-store.myshopify.com"}
  Rendering /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/sessions/request_storage_access.html.erb
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_layout_styles.html.erb (Duration: 0.0ms | Allocations: 6)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_typography_styles.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_card_styles.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_button_styles.html.erb (Duration: 0.1ms | Allocations: 5)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/sessions/request_storage_access.html.erb (Duration: 2.9ms | Allocations: 2229)
Completed 200 OK in 5ms (Views: 3.5ms | ActiveRecord: 0.0ms | Allocations: 3058)


Started GET "/granted_storage_access?return_to=%2F%3Fhmac%3D3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a%26locale%3Den%26session%3D1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c%26shop%3Dtalking-tables-test-store.myshopify.com%26timestamp%3D1598951543&shop=talking-tables-test-store.myshopify.com" for 109.154.151.20 at 2020-09-01 10:12:47 +0100
Cannot render console from 109.154.151.20! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by ShopifyApp::SessionsController#granted_storage_access as HTML
  Parameters: {"return_to"=>"/?hmac=3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a&locale=en&session=1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c&shop=talking-tables-test-store.myshopify.com&timestamp=1598951543", "shop"=>"talking-tables-test-store.myshopify.com"}
Redirected to http://lazy-seahorse-34.serverless.social/?hmac=3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a&locale=en&session=1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c&shop=talking-tables-test-store.myshopify.com&timestamp=1598951543
Completed 302 Found in 1ms (ActiveRecord: 0.0ms | Allocations: 397)


Started GET "/?hmac=3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a&locale=en&session=1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c&shop=talking-tables-test-store.myshopify.com&timestamp=1598951543" for 109.154.151.20 at 2020-09-01 10:12:47 +0100
Cannot render console from 109.154.151.20! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by HomeController#index as HTML
  Parameters: {"hmac"=>"3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a", "locale"=>"en", "session"=>"1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c", "shop"=>"talking-tables-test-store.myshopify.com", "timestamp"=>"1598951543"}
Redirected to http://lazy-seahorse-34.serverless.social/login?return_to=%2F%3Fhmac%3D3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a%26locale%3Den%26session%3D1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c%26shop%3Dtalking-tables-test-store.myshopify.com%26timestamp%3D1598951543&shop=talking-tables-test-store.myshopify.com
Completed 302 Found in 1ms (ActiveRecord: 0.0ms | Allocations: 576)


Started GET "/login?return_to=%2F%3Fhmac%3D3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a%26locale%3Den%26session%3D1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c%26shop%3Dtalking-tables-test-store.myshopify.com%26timestamp%3D1598951543&shop=talking-tables-test-store.myshopify.com" for 109.154.151.20 at 2020-09-01 10:12:47 +0100
Cannot render console from 109.154.151.20! Allowed networks: 127.0.0.0/127.255.255.255, ::1
Processing by ShopifyApp::SessionsController#new as HTML
  Parameters: {"return_to"=>"/?hmac=3a79e76e7c5ef71d7f02e15175d0dc2116aa431f8c2ea11d97f5593e9dfeaf9a&locale=en&session=1d67b8164ac461dc20dc8a62d371cfc37e3345f137436a6c05b5e111b12f328c&shop=talking-tables-test-store.myshopify.com&timestamp=1598951543", "shop"=>"talking-tables-test-store.myshopify.com"}
  Rendering /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/sessions/request_storage_access.html.erb
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_layout_styles.html.erb (Duration: 0.0ms | Allocations: 6)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_typography_styles.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_card_styles.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/partials/_button_styles.html.erb (Duration: 0.0ms | Allocations: 5)
  Rendered /Users/dave/.gem/ruby/2.6.5/gems/shopify_app-14.2.0/app/views/shopify_app/sessions/request_storage_access.html.erb (Duration: 2.5ms | Allocations: 2222)
Completed 200 OK in 4ms (Views: 2.9ms | ActiveRecord: 0.0ms | Allocations: 3037)

@tanema Would you mind cloning my minimal Rails app and running it locally in Google Chrome? You’ll obviously need to set ENV['SHOPIFY_API_KEY'] and ENV['SHOPIFY_API_SECRET'] and somehow forward your localhost to the internet (ngrok or localtunnel for example). I expect this will be enough to allow you to reproduce the issue.

Thanks again for all your help and support 🙏

Here’s ready to use sample of Shopify app with JWT and Hotwire integration: https://github.com/kirillplatonov/shopify-hotwire-sample

Just created today (12/Jan) a bare-bones shopify_app using the latest versions of everything using the flag with-cookie-authentication. I can confirm that, when it tries to embed the app, it goes into an infinite loop between

GET /login | 200 OK GET / | 302 Found GET /granted_storage_access 302 Found

Versions: ruby-2.7.0 Rails 6.1.1 shopify_app 16.1.0 Chrome 87.0.4280.141 on Ubuntu 20.04 LTS

Steps:

• Create rails app
• $ rails generate shopify_app --with-cookie-authentication
• hard-code the api_key and secret in shopify_app.rb
• start ngrok
• rails s
• hit https://foe.ngrok.io in Chrome
• Enter dev shop address and login
• I can see the non-embedded page rendering momentarily as usual
• Then, when the page is embedded in shopify admin, the infinite loop starts.

Disabled same site cookies in chrome://flags/#same-site-by-default-cookies, but no luck.

In the past (a couple of months ago) I have created an app with the same procedure w/o any problem.

Ok, so - in the rails v6.1.1 project file config/application.rb - try changing the line:

    config.load_defaults 6.1

to

    config.load_defaults 6.0

Cannot explain yet why, but this seems to make it work - infinite redirect loops disappeared.

Another solution would be setting old cookies_same_site_protection value in rails v6.1.1:

# config/application.rb

# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 6.1
config.action_dispatch.cookies_same_site_protection = nil

Hi @petebof, I believe in your particular case the issue is with rails v>=6.1 - we’re currently updating the gem to work with that version of rails. I’ll post updates here.

Hey @onahkenneth, can you please confirm whether your app’s home_controller.rb inherits from AuthenticatedController or ApplicationController? If it is authenticated, you’ll want to replace it with the unauthenticated version to stop the infinite loop.

Hey @paulomarg, thanks for your reply:

config/initializers/shopify_app.rb

unless defined? Rails::Generators
  ShopifyApp.configure do |config|
    config.application_name = "My Shopify App"
    config.api_key = ENV.fetch('SHOPIFY_API_KEY', '').presence || raise('Missing SHOPIFY_API_KEY. See https://github.com/Shopify/shopify_app#api-keys')
    config.secret = ENV.fetch('SHOPIFY_API_SECRET', '').presence || raise('Missing SHOPIFY_API_SECRET. See https://github.com/Shopify/shopify_app#api-keys')
    config.old_secret = ""
    config.scope = "read_products" # Consult this page for more scope options:
                                   # https://help.shopify.com/en/api/getting-started/authentication/oauth/scopes
    config.embedded_app = true
    config.after_authenticate_job = false
    config.api_version = "2021-01"
    config.shop_session_repository = 'Shop'
    config.allow_jwt_authentication = true
    config.allow_cookie_authentication = false
  end
end

# ShopifyApp::Utils.fetch_known_api_versions                        # Uncomment to fetch known api versions from shopify servers on boot
# ShopifyAPI::ApiVersion.version_lookup_mode = :raise_on_unknown    # Uncomment to raise an error if attempting to use an api version that was not previously known

• What is the version of the shopify_app gem being used? shopify_app (17.0.2)

• Home Controller

# frozen_string_literal: true

class HomeController < AuthenticatedController
  def index
    @products = ShopifyAPI::Product.find(:all, params: { limit: 10 })
    @webhooks = ShopifyAPI::Webhook.find(:all)
  end
end

Note:

I changed the home controller to the one you provided and can confirm that the app is rendered in the iframe.!!! 🎉

The only caveat is that I would need to define some things for the shopify_api to fetch the products, but I can now work on my app!

THANKS

Yes @marisveide Rails 6.1 made some config changes in how it handles SameSite cookies, so using a previous version’s configs would indeed work around the issue until the gem is fixed.

If you have

• the most recent shopify_app with the same site middleware
• tried rails_same_site_cookie
• tried setting it yourself with secure_headers
• serving it with ssl

Then there must be something else going on. Is it possible that you have config in your nginx setup that is altering your cookies, for instance a proxy_cookie_path setting?

Some further info on why this was so seemingly random: In the third party service we are using it was possible for the user to “accidentally” change his API key (which we store in the app DB). The invalid key then resulted in the ActiveResource::UnauthorizedAccess response. resulting in the behaviour described above.

As a workaround I specifically rescued these calls now inside the controller clearing the Key from our DB in response. This way the app customer can at least enter the app again and enter his new key.

Cheers, Dave

Same here, @derrickrc, I also stopped the developing any feature/improvement on an app because of this issue.

We have been getting lots of support inquiries as well due to similar error. We are considering switching to JWT but that’s quite buggy right now.

@tanema Same here. All of a sudden this day, we experienced this issue in one of our production apps. We hosted it also in Heroku.

ruby (2.5.3) rails (5.2.1.1) shopify_app (12.0.0) shopify_api (9.1.0) omniauth-shopify-oauth2 (2.2.2)

Hi @tanema 👋 Thanks for your reply, it’s super-helpful to see the exact steps you’re taking to setup and run the Rails app. After a bit of Googling, I’ve discovered that the shopify connect and shopify serve commands are part of the Shopify CLI tool, something that I wasn’t aware of and haven’t been using until now. It’s brilliant!

To my delight, I’ve found that booting the application using shopify serve rather than bundle exec rails server, allows me to visit the Shopify app in Google Chrome without the redirect issue. Looking at the code for shopify serve, I think it’s simply running rails server, so I don’t think there’s anything too different there.

Another key difference is the (automatic) use of ngrok to forward my localhost as, until now, I’ve been forwarding using localtunnel. I wonder if that somehow makes a difference, though it wouldn’t explain why we’re seeing the redirect issue in production (hosted on Heroku) 🤔

In summary, now that you’ve shared a method to boot the app without the redirect issue, I can start to unpick the differences and hopefully have that “eureka” moment. I’ll report back here when I know more. Thanks for all your help!

Okay I still cannot reproduce this and this is what I have done

• cloned your repo,
• removed your change to config.hosts because i do not need that host
• bundle install, npm install
• rails db:migrate
• shopify connect to get my app config and populate my .env file
• shopify srv which does the following for me
  • start the server
  • update my application url
  • redirection allow-list
  • start an ngrok tunnel
• open the ngrok url
• entered my storename into the basic login form
• initiate installation
• grant access
• authenticated and embedded.

I am using

Chrome: Version 84.0.4147.135 ruby: 2.6.5 rails (6.0.3.2) shopify_app (14.3.0) shopify_api (9.2.0) omniauth-shopify-oauth2 (2.2.2)

Is there any chance that you are using extra strict cookie policies in your browsers or extensions for cookies, or even ad blockers that might be preventing this?