Shopify / shopify-app-template-remix

341 stars 144 forks source link

401 error after installation #286

Open marsan957 opened 1 year ago

marsan957 commented 1 year ago

I am facing an issue with the Shopify CLI and Node.js app template (Remix) where, after running the commands, I receive a 401 status code and the app does not load. Strangely, it was working fine yesterday, and no changes have been made since then.

Also tried to create a new app and same issue, any ideas?

To recreate the issue, you can follow these steps:

https://shopify.dev/docs/apps/getting-started/create

meandillar commented 1 year ago

I'm having a similar problem after creating a new app. It tries to authenticate 3 times before failing with 401 and shows "same site cookies" error. Tried both chrome and firefox, cleared cookies, all with same result.

@marsan957 unrelated to the initial problem with your app not loading - when you tried creating a new app did you uninstall the existing one and recreate it with the same name? I was able to work around the problem by naming the app differently on a fresh install. I found that even after uninstalling the app from the dev store, deleting it from the partners dashboard and deleting all browser cookies, creating an app with the same name would result in the 401 error. I have also experienced this behaviour attempting to migrate an existing express app to the new remix format.

EDIT: Experiencing the problem again after adding an access scope. Rather than displaying the prompt to update the app it tries to authenticate 3 times before failing with 401. Can no longer access the app. Nevermind, I found the npm run shopify app config push command

paulomarg commented 1 year ago

Hi folks, there's a few reasons why this loop might happen, but does running the config push command fix it?

If not, you could try increasing the log level so we can see what's going wrong. In your app/shopify.server.js file, you can add:

import {LogSeverity} from '@shopify/shopify-app-remix';

and then add this to your config:

  logger: {
    level: LogSeverity.Debug,
  },

That way you should see the full log output in the console, which should include a reason why we go back into OAuth.

alessandrome commented 1 year ago

I had the same problem here: I've to delete the old session row from Prisma db and then oauth result in a normal 200 OK response, but now nothing is shown on the default example app page image

meandillar commented 1 year ago

EDIT 2: Upon looking at my shopify.app.toml in another app I realised that the toml file in my current app wasn't being updated by the cli. It only had the default entry for scopes like scopes = "write_products,write_discounts,write_cart_transforms but none of the other details that are usually generated. I also noticed that when I ran a config push it completed but with no message. After I populated the toml file in a similar way to my other app I was able to run a config push and this time it showed the changes and requested confirmation, after which the app worked without a problem.

EDIT 1: After more testing the problem starts when I add write_discounts access scope and push the config. Removing it loads the app successfully but I'm unable to use discount functions.

ORIGINAL COMMENT: After a few days with no issues I randomly encountered the problem again. Tried to deploy app and push config but no luck. Added the debugging that you suggested @paulomarg . Here's an excerpt of what I get (prints this 2 or 3 times over):

Authenticating admin request
[shopify-app/INFO] Handling OAuth begin request
[shopify-app/DEBUG] OAuth request contained valid shop | {shop: redacted.myshopify.com}
[shopify-api/INFO] Beginning OAuth | {shop: redacted.myshopify.com, isOnline: false, callbackPath: /auth/callback}
[shopify-api/DEBUG] OAuth started, redirecting to https://redacted.myshopify.com/admin/oauth/authorize?client_id=d10c54f0d45b1829a04f6bb0c7c538e8&scope=write_products%2Cwrite_cart_transforms%2
Cwrite_discounts&redirect_uri=https%3A%2F%2Fsome-random-name.trycloudflare.com%2Fauth%2Fcallback&state=257910266455250&grant_options%5B%5D= | {shop: redacted.myshopify.com, isOnline: false}
GET /auth?shop=redacted.myshopify.com 302 - - 7.715 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/INFO] Handling OAuth callback request
[shopify-api/INFO] Completing OAuth | {shop: redacted.myshopify.com}
[shopify-api/DEBUG] OAuth request is valid, requesting access token | {shop: redacted.myshopify.com}
[shopify-api/INFO] Creating new session | {shop: redacted.myshopify.com, isOnline: false}
[shopify-app/INFO] Running afterAuth hook
[shopify-api/INFO] Registering webhooks | {shop: redacted.myshopify.com}
GET /auth/callback?code=c6923f9d35255a2e7ad2215328975f38&hmac=aa90cd6249b98a067a7d508fdd363bc95dc1c70d04a2b5f8f9ce28a83de86631&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&shop=sprtsfl-ap
ps.myshopify.com&state=257910266455250&timestamp=1692064959 302 - - 435.155 ms
[shopify-api/DEBUG] Existing topics: [APP_UNINSTALLED] | {shop: redacted.myshopify.com}
GET /?embedded=1&hmac=7709691092d843c849f84cb756086fc6371bc8c3238b0d7355c73ccd755a3a27&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&prefetch=1&session=71367f7ad76e29c89cf1f9a
ec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961 302 - - 1.964 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Ensuring app is installed on shop | {shop: redacted.myshopify.com}
[shopify-app/DEBUG] Missing session token in search params, going to bounce page | {shop: redacted.myshopify.com}
GET /app?embedded=1&hmac=7709691092d843c849f84cb756086fc6371bc8c3238b0d7355c73ccd755a3a27&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&prefetch=1&session=71367f7ad76e29c89cf1
f9aec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961 302 - - 4.211 ms
GET /?embedded=1&hmac=5dc078ad0abc2cd31d7586f0ddc0d56d43551dba3e5a113d084b4c42a9bdb488&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&session=71367f7ad76e29c89cf1f9aec636580c45
94067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961 302 - - 1.740 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Rendering bounce page
GET /auth/session-token?embedded=1&hmac=7709691092d843c849f84cb756086fc6371bc8c3238b0d7355c73ccd755a3a27&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&prefetch=1&session=71367
f7ad76e29c89cf1f9aec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961&shopify-reload=https%3A%2F%2Fsome-random-name.trycloudflare.com%2Fapp%3Fembedded%3
D1%26hmac%3D7709691092d843c849f84cb756086fc6371bc8c3238b0d7355c73ccd755a3a27%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz%26locale%3Den-NZ%26prefetch%3D1%26session%3D71367f7ad76e29c89cf1f9aec636580c4594067b2
14883660f79469f273ccb3b%26shop%3Dredacted.myshopify.com%26timestamp%3D1692064961 200 - - 2.176 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Ensuring app is installed on shop | {shop: redacted.myshopify.com}
[shopify-app/DEBUG] Missing session token in search params, going to bounce page | {shop: redacted.myshopify.com}
GET /app?embedded=1&hmac=5dc078ad0abc2cd31d7586f0ddc0d56d43551dba3e5a113d084b4c42a9bdb488&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&session=71367f7ad76e29c89cf1f9aec636580
c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961 302 - - 6.162 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Rendering bounce page
GET /auth/session-token?embedded=1&hmac=5dc078ad0abc2cd31d7586f0ddc0d56d43551dba3e5a113d084b4c42a9bdb488&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&session=71367f7ad76e29c8
9cf1f9aec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961&shopify-reload=https%3A%2F%2Fsome-random-name.trycloudflare.com%2Fapp%3Fembedded%3D1%26hmac%3
D5dc078ad0abc2cd31d7586f0ddc0d56d43551dba3e5a113d084b4c42a9bdb488%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz%26locale%3Den-NZ%26session%3D71367f7ad76e29c89cf1f9aec636580c4594067b214883660f79469f273ccb3b%26
shop%3Dredacted.myshopify.com%26timestamp%3D1692064961 200 - - 2.259 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Validating session token
[shopify-app/DEBUG] Session token is valid | {payload: {"iss":"https://redacted.myshopify.com/admin","dest":"https://redacted.myshopify.com","aud":"d10c54f0d45b1829a04f6bb0c7c538e8","sub":
"44531974276","exp":1692065022,"nbf":1692064962,"iat":1692064962,"jti":"5e69526a-b59a-4665-aece-48a714e85def","sid":"184c0b284c4ae2e455ce91cd9e519e1a2b09a086b449c82557c947b764ecf9d6"}}
[shopify-app/DEBUG] Loading session from storage | {sessionId: offline_redacted.myshopify.com}
[shopify-app/DEBUG] Found a session, but it has expired, redirecting to OAuth | {shop: redacted.myshopify.com}
GET /app?embedded=1&hmac=5dc078ad0abc2cd31d7586f0ddc0d56d43551dba3e5a113d084b4c42a9bdb488&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&session=71367f7ad76e29c89cf1f9aec636580
c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064961 401 - - 9.670 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/INFO] Handling OAuth begin request
[shopify-app/DEBUG] OAuth request contained valid shop | {shop: redacted.myshopify.com}
[shopify-api/INFO] Beginning OAuth | {shop: redacted.myshopify.com, isOnline: false, callbackPath: /auth/callback}
[shopify-api/DEBUG] OAuth started, redirecting to https://redacted.myshopify.com/admin/oauth/authorize?client_id=d10c54f0d45b1829a04f6bb0c7c538e8&scope=write_products%2Cwrite_cart_transforms%2
Cwrite_discounts&redirect_uri=https%3A%2F%2Fsome-random-name.trycloudflare.com%2Fauth%2Fcallback&state=236601075483873&grant_options%5B%5D= | {shop: redacted.myshopify.com, isOnline: false}
GET /auth?shop=redacted.myshopify.com 302 - - 6.466 ms
GET /?embedded=1&hmac=14047e5cac4584abe5c5a16b269147018936a67644a1534aed63d6edfcfab938&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&prefetch=1&session=71367f7ad76e29c89cf1f9a
ec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064966 302 - - 1.420 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Ensuring app is installed on shop | {shop: redacted.myshopify.com}
[shopify-app/DEBUG] Missing session token in search params, going to bounce page | {shop: redacted.myshopify.com}
GET /app?embedded=1&hmac=14047e5cac4584abe5c5a16b269147018936a67644a1534aed63d6edfcfab938&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&prefetch=1&session=71367f7ad76e29c89cf1
f9aec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064966 302 - - 6.254 ms
[shopify-app/INFO] Authenticating admin request
[shopify-app/DEBUG] Rendering bounce page
GET /auth/session-token?embedded=1&hmac=14047e5cac4584abe5c5a16b269147018936a67644a1534aed63d6edfcfab938&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz&locale=en-NZ&prefetch=1&session=71367
f7ad76e29c89cf1f9aec636580c4594067b214883660f79469f273ccb3b&shop=redacted.myshopify.com&timestamp=1692064966&shopify-reload=https%3A%2F%2Fsome-random-name.trycloudflare.com%2Fapp%3Fembedded%3
D1%26hmac%3D14047e5cac4584abe5c5a16b269147018936a67644a1534aed63d6edfcfab938%26host%3DYWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvc3BydHNmbC1hcHBz%26locale%3Den-NZ%26prefetch%3D1%26session%3D71367f7ad76e29c89cf1f9aec636580c4594067b2
14883660f79469f273ccb3b%26shop%3Dredacted.myshopify.com%26timestamp%3D1692064966 200 - - 4.260 ms
aosoble commented 1 year ago

Running pnpm shopify app config link fixed the above issue for me.

More context in case it helps with finding the root cause: I ran into this issue after deleting the app and recreating it with the same name. I recreated the app a few times while trying to resolve this issue. config push did not seem to do anything but config link modified my shopify.app.toml file and after that the issue was resolved.

Interestingly before the running config link, I would be prompted to link my app (or create a new one) every time I ran pnpm dev. After running config link, pnpm dev stopped prompting me to link my app.

Prince1126090 commented 1 year ago

I'm having a similar problem. Creating an app whith Shopify CLI and Remix app template in windows 11. After running the npm run dev command, I receive a 401 status code and the app does not load.

Tried the followings:

Still getting 401.

│ remix │ GET /app?embedded=1&hmac=7fe63ed2240de0c65d863934c5e0ad882e5d7d1418b53d729784b9230d26fa6c&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvcXVpY2tzdGFydC0zMzUyMjcwMQ&locale=en&session=2e6a3c170c28b564df83855eef3702b5cb048bb7c6e7d67e881d5dd0d6dd06a0&shop=quickstart-33522701.myshopify.com&timestamp=1692769592 401 - - 29.066 ms

Can anyone help me on this? Why is this happening? How to fix it?

mg-takuma-katanosaka commented 1 year ago

I encountered similar this problem. We must update "SCOPE" environment variable if use this one when modified OAuth' scope in our Shopify App. But I lacked an operation that updated it. So my app had been happening redirect loop and unauthorizing on Shopify. I fix this problem to update the "SCOPE" variable to same value defining in shopify.app.toml.

Hope this helps. Regards,

TheRealFlyingCoder commented 1 year ago

Just coming here to add, I also was bitten by this mismatching scopes issue for hours.

You have to update scopes in 3 separate locations, which is a recipe for problems like this

At a bare minimum there should be a dev log somewhere in the code that warns "Expected SCOPES: , but received SCOPES: , please check your runtime variables are up to date with the App config, and synced with your Shopify project"

Ideally we'd discard the need for scope management in the runtime variables. Clearly the instantiation knows what Scopes are set on Shopify, otherwise it wouldn't throw the error, so why do we need to pass in SCOPES at runtime at all?

paulomarg commented 1 year ago

Hi folks, thanks for all of your feedback, we really appreciate it.

I've escalated this issue with the team, and we're investigating ways to improve the experience around updating scopes so that it doesn't require multiple actions from the developer to update them.

I'll get back to you as soon as we have news to share, but in the meantime please remember to run config:link and config:push when you change your web.toml file to ensure all of the changes are in sync before you run the app.

Thank you for your patience!

LHongy commented 1 year ago

Do you have two environment running the same app? For example, both the local and testing environment using the same Shopify app. I ran into this problem as well, and then I create another app for testing environment It seems the issue is gone, I am not sure if that was the fix though.

duncan-fairley commented 1 year ago

I ran into this issue after changing scopes in my shopify.app.toml file.

It turns out if you're using the Remix template with Prisma you also need to update your existing session in Prisma to match.

After running npm run prisma studio I was able to log into the Prisma visual UI and update the session on my local machine. After this the 401 disappeared.

Screenshot 2023-09-30 at 9 29 55 PM
AlexGouget commented 11 months ago

I have the same issue,

[shopify-app/INFO] Authenticating admin request 13:44:28 │ remix │ [shopify-app/INFO] Authenticating admin request
13:44:28 │ remix │ ErrorResponseImpl {
13:44:28 │ remix │ status: 401,
13:44:28 │ remix │ statusText: 'Unauthorized',
13:44:28 │ remix │ internal: false,
13:44:28 │ remix │ data: ''
13:44:28 │ remix │ } 13:44:28 │ remix │ ErrorResponseImpl { 13:44:28 │ remix │ status: 401, 13:44:28 │ remix │ statusText: 'Unauthorized', 13:44:28 │ remix │ internal: false, 13:44:28 │ remix │ } 13:44:28 │ remix │ ErrorResponseImpl { 13:44:28 │ remix │ status: 401, 13:44:28 │ remix │ statusText: 'Unauthorized', 13:44:28 │ remix │ internal: false, 13:44:28 │ remix │ data: '' 13:44:28 │ remix │ }

This issue occur when using Remix Template.

but there is no problem using @shopify/app@3.40.0 and ngrok

horst7000 commented 11 months ago

I only saw a "handling response" message in the admin view when launching my app in the dev store. I was able to resolve the issue by manually synchronizing my device clock in the Windows date and time settings. This problem occurs every other week again. Hope this might help someone.

rhengles commented 11 months ago

I encountered similar this problem. We must update "SCOPE" environment variable if use this one when modified OAuth' scope in our Shopify App. But I lacked an operation that updated it. So my app had been happening redirect loop and unauthorizing on Shopify. I fix this problem to update the "SCOPE" variable to same value defining in shopify.app.toml.

Hope this helps. Regards,

This also fixed the problem for me.

Ideally we'd discard the need for scope management in the runtime variables.

Can't agree more !

DorWeid commented 11 months ago

Just coming here to add, I also was bitten by this mismatching scopes issue for hours.

You have to update scopes in 3 separate locations, which is a recipe for problems like this

At a bare minimum there should be a dev log somewhere in the code that warns "Expected SCOPES: , but received SCOPES: , please check your runtime variables are up to date with the App config, and synced with your Shopify project"

Ideally we'd discard the need for scope management in the runtime variables. Clearly the instantiation knows what Scopes are set on Shopify, otherwise it wouldn't throw the error, so why do we need to pass in SCOPES at runtime at all?

Same here. This cost me a few hours.

owlyowl commented 10 months ago

I'd be interested to know what Shopify's position on handling dynamic scopes per login would be as well. Seeing as even static scopes are causing an issue.

Each install of our app has a different set of scopes depending on which features of our app our users are using.

antoniovm commented 10 months ago

Hi everyone!

After a lot of hours messing around, finally I found this github issue that helped me to solve the problem. In my case I was setting up a testing embedded app in fly.io. So let me summarize what I've done to finally make it work.

Good luck!

Hujjat commented 10 months ago

@antoniovm Do you have SCOPES in your .env file?

Thanks

antoniovm commented 9 months ago

Yes, the same defined in toml files.

chenluhe commented 7 months ago

我遇到了同样的问题:我必须从 Prisma db 中删除旧会话行,然后在这里 oauth 会产生正常的 200 OK 响应,但现在默认示例应用程序页面上显示没有任何内容 图像

Hello, is your session table data automatically generated? There is no data in my Session table. I do not know why.

narenkram commented 6 months ago

I have no idea why but updating SCOPES works. just added a unnecessary scope I'm not going to use

Alen-Rouse commented 6 months ago

I only saw a "handling response" message in the admin view when launching my app in the dev store. I was able to resolve the issue by manually synchronizing my device clock in the Windows date and time settings. This problem occurs every other week again. Hope this might help someone.

Thank you, this solved my problem, there was a crash in the Microsoft system (window 11), the automatic belt was in a hurry for 10 minutes and this is why this problem arose

prieston commented 6 months ago

Hi everyone!

After a lot of hours messing around, finally I found this github issue that helped me to solve the problem. In my case I was setting up a testing embedded app in fly.io. So let me summarize what I've done to finally make it work.

  • Uninstall development app
  • Reinstall app in assigned production test shop
  • Make sure that shopify.app.toml, fly.toml and .env variables have exact same SCOPES
  • Run pnpm shopify app config link to connect remote config with local shopify.app.toml file
  • Run pnpm shopify app config push upload scopes to remote app configuration
  • Deploy app running fly deploy

Good luck!

Thanks that solved my problem. In my case I first updated the shopify.app.toml with the new scopes, i then run pnpm run deploy, and verify at the partner dashboard that the scopes were deployed and added the same scopes in the .env. Then up and running