Remix Installed app getting redirected to the App's URL instead of admin portal(admin.shopify.com)

[HarshaKDeltaX]

Issue summary

Remix Installed app getting redirected to the App's URL instead of admin portal(admin.shopify.com)

• This is happening only on Production env.

• @shopify/shopify-app-remix version: ^1.3.0

• Node version: v16.17.0

• Operating system: Linux

Expected behavior

When the App is installed it should stay in the admin protal and complete the Auth. In my case it's redirected to the https://{MyAppURL}/store/{StoreName}/apps/{AppId} Instead of https://admin.shopify.com/store/{StoreName}/apps/{AppId}

Actual behavior

It should be expected to redirect to the admin portal of the shopify.

When I update the app URL to admin.shopify.com, I can access my Application.

Updated https://measurementapp.mediabuy.pro/store/ako-dev-store/apps/6f274f83543385cee3c49e0b9e9c1cf6 to https://admin.shopify.com/store/ako-dev-store/apps/6f274f83543385cee3c49e0b9e9c1cf6 It worked for me

[paulomarg]

Hi, sorry to hear you're having issues. In general, this is what happens after OAuth:

• if the app is embedded (isEmbeddedApp config in shopifyApp is true), it will read the host search param and take the user there
• if not embedded, it'll take you to the app root (what you're seeing)

Can you please double check:

• that the app is configured as embedded in both environments?
• the host value is correct when /auth/callback is called (assuming you're using the default template settings). It is a base64 string, so you'll need to decode it
  • I believe it's very unlikely that this is the case, but it could be an issue with Shopify itself if this is anything other than the store

Hope this helps!

[HarshaKDeltaX]

Hi @paulomarg, It's an Embedded app which is configured as an embedded app from both in code and partners dashboard.

Even for the OAuth it's been redirected to the App's root.

https://measurementapp.mediabuy.pro/admin/oauth/authorize?client_id=6f274f83543385cee3c49e0b9e9c1cf6&scope=write_pixels%2Cread_customer_events&redirect_uri=https%3A%2F%2Fmeasurementapp.mediabuy.pro%2Fauth%2Fcallback&state=957550799278093&grant_options%5B%5D=

Confirmation for IsEmbedded App:

Code: shopify.server.js const shopify = shopifyApp({ apiKey: process.env.SHOPIFY_API_KEY, apiSecretKey: process.env.SHOPIFY_API_SECRET || "", apiVersion: LATEST_API_VERSION, scopes: process.env.SCOPES?.split(","), appUrl: process.env.SHOPIFY_APP_URL || "", authPathPrefix: "/auth", sessionStorage: new PrismaSessionStorage(prisma), distribution: AppDistribution.AppStore, restResources, webhooks: { APP_UNINSTALLED: { deliveryMethod: DeliveryMethod.Http, callbackUrl: "/webhooks", }, }, hooks: { afterAuth: async ({ session }) => { shopify.registerWebhooks({ session }); }, }, ...(process.env.SHOP_CUSTOM_DOMAIN ? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] } : {}), isEmbeddedApp: true });

Partners Dashboard:

[paulomarg]

Hey, so it sounds like your configuration is correct for an embedded app.

It's normal for the redirect_uri in the OAuth request to go back to the app. The flow goes:

/auth => Shopify (shows grant page to merchant) => /auth/callback => <store>/apps/<id>

The app needs to receive the callback as a confirmation that the process was successful to complete the installation.

It sounds like there could be something going wrong in your callback. I would suggest that you check the host search param in the /auth/callback request (it's a base64 string so you'll have to decode it). If that value points to your app and not the store, there could be a bug here.

[HarshaKDeltaX]

Hey @paulomarg, Recorded the URL for auth/callback

URL: https://measurementapp.mediabuy.pro/auth/callback?code=1cdf88d1efbab7ed3ec2a133ac7c8332&hmac=05786a1bdb6cea3c447010d7d42bc28e635850df96cf217cfd483f66fe76ba0a&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvYWtvLWRldi1zdG9yZQ&shop=ako-dev-store.myshopify.com&state=138034622499571&timestamp=1706027974

host: YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvYWtvLWRldi1zdG9yZQ

Decoded value: admin.shopify.com/store/ako-dev-store

the query param is right, but still it redirects to https://measurementapp.mediabuy.pro/store/ako-dev-store

[paulomarg]

Hmm, this is quite strange - I don't think we've had other reports of this happening, and based on the code it should be working - when the callback completes, it'll call redirectToShopifyOrAppRoot.

That function will run this:

  const redirectUrl = api.config.isEmbeddedApp
    ? await api.auth.getEmbeddedAppUrl({rawRequest: request})
    : `/?shop=${shop}&host=${encodeURIComponent(host)}`;

which calls getEmbeddedAppUrl if the app is embedded. That function runs

    return `https://${decodedHost}/apps/${config.apiKey}`;

so I can't really see how this would be happening if the callback worked, other than the app having an afterAuth hook configured that takes it to / instead.

[HarshaKDeltaX]

Hi @paulomarg, I walked through the node_modules to out the issue. Found out that there is an issue with my hosting style. I'm basically running this app in a docker container and used IIS as a reverse proxy.

Issue: My response headers are overwritten by the app's root. Which is where it's taking the host from.

Expectation: The expectation is that it should have the /admin/oauth/authorize

• To achieve this we need to disable "Reverse rewrite host in response headers" setting in the IIS's Application Request Routing.

After updating this setting, I can see the response header got updated to /admin/oauth/authorize

And finally it got resolved, It's getting redirected to the right URL.

Thank you so much for your quick response; I really appreciate It.

[paulomarg]

Glad to hear you figured it out! Also, thank you for sharing your solution in case others also run into this kind of issue!