Shopify / shopify-api-js

Shopify Admin API Library for Node. Accelerate development with support for authentication, graphql proxy, webhooks
MIT License
943 stars 390 forks source link

Can't add sample app to a development store: OAuth Same Site Cookie issue #591

Closed jasonkliu closed 1 year ago

jasonkliu commented 1 year ago

Issue summary

Can't add sample app to a development store: OAuth Same Site Cookie issue

Expected behavior

App should be added to the store.

Actual behavior

On Chrome 107: The app couldn’t be loaded

This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support.

On Safari 16.0: The application can’t be loaded with the current version of Safari, try clearing your cookies or using another browser.

Steps to reproduce the problem

  1. Create a sample app with npm init @shopify/app@latest. It ships with @shopify/shopify-api 5.0.0 but the issue also exists with 5.2.0.
  2. Deploy the app to fly.io using https://shopify.dev/apps/deployment/web
  3. Try to install and launch the app on a development store

I had a working app on a development store yesterday and it stopped working today. I can reproduce this just with the sample template. I tried creating a new development store which did not solve the issue.

The app seems to be installed in the store but I cannot click into it and it gives an error message. It follows this URL pattern:

https://a.myshopify.com/admin/oauth/authorize?client_id=a&scope=write_products&redirect_uri=https://a.fly.dev//api/auth/callback&state=offline_1&grant_options[]=

https://a.myshopify.com/admin/oauth/request_grant?access_change_uuid=a&client_id=a

https://a.myshopify.com/admin/oauth/post_grant?access_change_uuid=a&client_id=a

https://a.myshopify.com/admin/apps?app_id=a&oauth_error=same_site_cookies

bhaskarmurthy commented 1 year ago

Same issue here

cquemin commented 1 year ago

@bhaskarmurthy You have the same issue as @jasonkliu , but did you create your app more recently. I am wondering if v6, which is now shipped with npm init @shopify/app@latest, fixes the problem? I have just tried with a brand new app and it was successfully added to my test store, however I did locally. This would suggest an issue with the deployment to fly.io

@jasonkliu when you say gives an error message what error are you seeing and where?

bhaskarmurthy commented 1 year ago

Not the same issue - I'm using the JS sdk directly, not using the @shopify/app flow as you mentioned. I'm also not using fly.io - so it could be unrelated.

jasonkliu commented 1 year ago

@cquemin Thank you for taking a look at this!

I created a new app with npm init @shopify/app@latest, and the generated output is here: https://github.com/jasonkliu/shopify-sample-6.1.0

Seems like it is working now. Couple things I learned:

I was able to deploy it to fly.io and access the live app.

cquemin commented 1 year ago

Thanks for the details @jasonkliu. These are both very useful to know. I will close this one then.