search

Shopify / shopify-app-bridge

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

forceRedirect config option is redirecting to a 404 #65

Closed kylebuildsstuff closed 3 years ago

kylebuildsstuff commented 3 years ago

Describe the bug

When the forceRedirect option is declared on AppBridge, accessing the app through the app domain specified in the partner dashboard redirects the user to a 404 page. AppBridge forces the redirect as expected but it redirects to a broken page.

This breaks flow for app subscriptions when using the returnUrl and it prevents apps from passing the review stage if the reviewer accesses the app from the app domain, which my last reviewer did.

To Reproduce

My config looks like this:

import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';

...
let shopOrigin = action?.query?.shop;
let host = action?.query?.host || window.btoa?.(shopOrigin);

const appBridgeConfig = {
    apiKey: process.env.REACT_APP_SHOPIFY_API_KEY as string,
    shopOrigin,
    host,
    forceRedirect: true,
};

return (
  <AppBridgeProvider config={appBridgeConfig}>
    <App />
  </AppBridgeProvider>
);

My return url for the app subscription:

https://${process.env.APP_DOMAIN}/admin${ shopOrigin ?`?shop=${shopOrigin}&host=${host}`: '' },

Though the bug can be reproduced without going through the process of setting up an appSubscription, but just accessing the app at the app domain specified in the partner dashboard with the shop attached:

https://<appDomainUrl>/admin?shopOrigin=<shopOrigin>

Expected behaviour

When accessing the app through the app domain, app bridge should redirect to the admin as it did in version 1.30.0.

Actual behaviour

When accessing the app through the app domain, the app redirects to https://<shopDomain>/apps/<publicKey>/admin?shop..., which does not exist and presents a 404:

error-start error initial-good end-bad

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

Platform

Additional context

Using node/koa on backend and react/redux on frontend.

I traced the code back into node_modules and found @shopify/app-bridge/client/Client.js the redirect code:

v.2.0.3

function redirectHandler(hostFrame, config) {
    var apiKey = config.apiKey, host = config.host, _a = config.forceRedirect, forceRedirect = _a === void 0 ? !env_1.isDevelopmentClient : _a;
    var location = redirect_1.getLocation();
    if (env_1.isFrameless ||
        !location ||
        !apiKey ||
        !host ||
        !forceRedirect ||
        !redirect_1.shouldRedirect(hostFrame)) {
        return;
    }
    var url = "https://" + host + "/apps/" + apiKey + location.pathname + (location.search || '');
    redirect_1.redirect(url);

If I add "admin" after "host" and before "/apps/" then the redirect works properly. I also found the same code in version 1.30.0 and it seems to have a different redirect url that still works for me:

v.1.30.0:

function redirectHandler(hostFrame, config) {
    var apiKey = config.apiKey, shopOrigin = config.shopOrigin, _a = config.forceRedirect, forceRedirect = _a === void 0 ? !env_1.isDevelopmentClient : _a;
    var location = redirect_1.getLocation();
    if (env_1.isFrameless ||
        !location ||
        !apiKey ||
        !shopOrigin ||
        !forceRedirect ||
        !redirect_1.shouldRedirect(hostFrame)) {
        return;
    }
    var url = "https://" + shopOrigin + "/admin/apps/" + apiKey + location.pathname + (location.search || '');
    redirect_1.redirect(url);
}
elanalynn commented 3 years ago

Sorry for the slow reply on this! We dug into the issue and it looks like the host encoding could be causing the problem here. Your approach of getting the host value from the query is preferred but if it doesn't find that (eg. in the initial installation) it's going to fall back to window.btoa?.(shopOrigin). Instead of btoa, we recommend using base64url as it is url safe. You're also going to be missing /admin from that shopOrigin value, so you can append it manually.

Also note that you shouldn't include the shopOrigin option in your config as of v2.

Could you try something like this?

import base64url from 'base64url';

let shopOrigin = action?.query?.shop;
let host = action?.query?.host || base64url(shopOrigin + '/admin');

const appBridgeConfig = {
    apiKey: process.env.REACT_APP_SHOPIFY_API_KEY as string,
    host,
    forceRedirect: true,
};
kylebuildsstuff commented 3 years ago

Adding the + '/admin' fixed everything!

Thank you for looking into this issue, it took me days before I settled on patching the node_modules directly but your solution is perfect.