search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
85 stars 9 forks source link

Response from Modal doesn't carry `Authorization` header #170

Closed clupprich closed 1 year ago

clupprich commented 1 year ago

Describe the bug

I'm following https://shopify.dev/apps/tools/app-bridge/actions/modal#react to open a modal that should display a page that's fetched from my Shopify app's backend.

When doing this manually via an iframe and using authenticatedFetch, the request to my backend has an Authorization header attached that contains the session token which allows the backend to authenticate the request.

However, when using the modal with the src prop, the request contains elements in the query string that I'd expect from a call to the callback endpoint: https://my-backend.com/api/email/preview?embedded=1&hmac=<hmac>&host=<host>&locale=<locale>&session=<session>&shop=<shop-domain>&timestamp=<timestamp>. On my Rails 7 application with the shopify_app gem, that request is not authenticated and gets redirected to the login endpoint.

To Reproduce

Steps to reproduce the behaviour:

  1. Create a Shopify app backend with shopify_app
  2. Create a modal with the src prop: <Modal title="My modal" src="/api/something" open />
  3. Watch it fail.

Here's a repo that reproduces the behavior: https://github.com/clupprich/modal-test-app. https://github.com/clupprich/modal-test-app/commit/f8ed8badd2cab1d764b499367df1bf6e3cf89d2f is the commit that introduces the modal.

CleanShot 2023-01-09 at 14 50 56@2x

Expected behaviour

I expect the request coming from the modal to be authenticated (HTTP Authorization header).

Contextual information

Packages and versions

Platform

Additional context

I initially experienced this issue with a Ruby app, but it's also reproducible with a NodeJS stack, so it really seems to be an issue in the app bridge.

henrytao-me commented 1 year ago

Hi @clupprich,

I suspect these are the modal urls that you pass into App Bridge Modal action

These urls won't and cannot have the authenticated header. Hence, you should treat them as a client-side page. You can use the authenticatedFetch in the utils to actually fetch the data after the Modal url is loaded.

Let me know if it's clear. Feel free to reopen the issue if there are something else you would like to discuss. 🙇

clupprich commented 1 year ago

Hej @henrytao-me,

Yeah, I'm passing a relative URL, e.g. /api/products/count. Why is it that they cannot have the authenticated header added automatically? Sorry, I'm trying to understand why that's not possible.

Thank you!

henrytao-me commented 1 year ago

Hi @clupprich, it might be possible if we do a custom load for the iframe instead of standard src url. However, it won't work in Shopify Mobile in some cases. We prefer loading the Modal url should be the same as loading the main app url. The app should perform regular fetch request after the page loads.

clupprich commented 1 year ago

Understood, thanks for the details @henrytao-me. Kind of a pity that the Modal is so limited, but I'll find my way around it. Thanks again!