The app not works on https://admin.shopify.com

[filipembcruz]

Expected Behavior

That the app works on the new shopify admin route. https://admin.shopify.com/store/store-name/apps/plugin-url

Current Behavior

The app not works. My app doesn't not approved because this "issue". It Shows the message:

app is outdated Shopify admin has migrated to a new URL, and this app is still pointing to the old URL. To use this app, relaunch it on the old URL.

Failure Information

The Shopify team tester sent me the feedback: Ensure your app is configured to handle billing decline charges properly. Merchants should be able to decline a billing charge without it cancelling a previously accepted plan. If the app requires a billing charge to be accepted, the billing modal must prompt the merchant again. See this screencast for additional details.

But actually, the issue is about the admin.shopify.com. Because after billing decline, the app redirect to this route.

Steps to Reproduce

1.To test against their newer rollout of admin.shopify.com URL format open a ticket on (https://help.shopify.com/pt-BR/support/login) with access request and your dev stores. 2. Access the plugin on store dashboard.

Context

• Package Version: v17.3
• Laravel Version: v8.54
• PHP Version: v8.0.11

Failure Logs

Shopify team messages:

• The full rollout of unified admin (admin.shopify.com) is not set to be completed until January 2023 which means some stores still have the old URL. I had my colleagues try but the same issue occurred for them, see this screencast for](https://shopify.click/18-39-92012-94052.webm)%C2%A0for) an example. It's vital that this issue is fixed to ensure that the app will work for all merchants.
• I tried again but I'm still being redirected to a blank page after cancelling the charges. See this screencast with the console.

console logs: 7fc3d326933c5a69607cc791205f528d.jpg:1 GET https://cdn.shopify.com/proxy/1ffe9593b7171ce710654568e3c345245cc5f045e5bf7931a554b5713a145133/www.gravatar.com/avatar/7fc3d326933c5a69607cc791205f528d.jpg?s=128&d=404 404 Image (assíncrono) xl @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 bl @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 vl @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 (anônimo) @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 _u @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 ou @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 w @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 j @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>'). Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>'). Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>'). Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>'). Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>'). vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com'). (anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2 vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com'). (anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2 vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com'). (anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2 vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com'). (anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2 vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com'). (anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2

[jhaineymilevis]

same problem, did you found any solution?

[jhaineymilevis]

@nikwen no solutions in any post

[talktohenryj]

Yea, I thought this would be a fix for the new URLs but its not for some reason.

        $response->headers->set(
            'Content-Security-Policy',
            "frame-ancestors https://$domain https://admin.shopify.com"
        );

[apurbajnu]

This line of code works for me now. I have tried.

$shop = Auth::user()->name; return response() ->view('welcome') ->header( 'Content-Security-Policy', "frame-ancestors https://$shop https://admin.shopify.com");

[talktohenryj]

This line of code works for me now. I have tried.

` $shop = Auth::user()->name;

    return response()

    ->view('welcome')

    ->header( 'Content-Security-Policy',

        "frame-ancestors https://$shop https://admin.shopify.com");`

Thanks for this. I'm going to try this tomorrow.

Do you have a multi page app or single page?

[jhaineymilevis]

hi @talktohenryj where do you put this code? i used it on default route but dont work

[talktohenryj]

hi @talktohenryj where do you put this code? i used it on default route but dont work

No, I didn't @apurbajnu said he figured it out. I'm going to try his code tomorrow.

[apurbajnu]

@jhaineymilevis, you need to use this with a default route. This one is working on my side. Image

[CedricVleminckx]

The latest version of the package provides the Content security policy header on all routes, but this is not giving us this issue. Shopify says it is an issue with the app bridge configuration and the host parameter.

We also opened multiple support tickets to request a dev store on the new admin.shopify.com domain, but they say they can not help us. So there is no way for us to test this :(

This was the latest response from Shopify: when we tried to open that last request to your /authenticate/token path in a new browser tab, it takes us to the legacy/store domain and They are getting a 500 error from your app if they don’t remove that host value attached to the target parameter, which is for redirection after authenticating.

[jhaineymilevis]

@jhaineymilevis, you need to use this with a default route. This one is working on my side. Image

yes i did it, but dont work

[CedricVleminckx]

@jhaineymilevis I tested this issue with a fresh laravel + osiset installation.

When you change the shopOrigin value to the new admin domain ex: admin.shopify.com/store/my-store in the AppBridge config in the vendor/osiset/laravel-shopify/src/resources/views/layouts/default.blade.php file, you will not get the error when the app was already authenticated.

This does not work when installing or reinstalling the app.

[ShirasuGyoza]

Hi, I have same problem and I also saw the discord of LaravelShopify, and Vicky pointed a solution maybe? https://discord.com/channels/1027205492155617304/1027205493338427464/1034919275967819957 *this is invitation link to LaravelShopify discord: https://discord.gg/WRRqYgvg

Could any maintainer take a look at this? :cry:

[abimwaqas]

Hi, I have same problem and I also saw the discord of LaravelShopify, and Vicky pointed a solution maybe? https://discord.com/channels/1027205492155617304/1027205493338427464/1034919275967819957 *this is invitation link to LaravelShopify discord: https://discord.gg/WRRqYgvg

Could any maintainer take a look at this? 😢

Yeah my Apps are working fine. Just do not remove shopOrigin from App Bridge initialization

[apurbajnu]

Hi, I have same problem and I also saw the discord of LaravelShopify, and Vicky pointed a solution maybe? https://discord.com/channels/1027205492155617304/1027205493338427464/1034919275967819957 *this is invitation link to LaravelShopify discord: https://discord.gg/WRRqYgvg Could any maintainer take a look at this? 😢

Yeah my Apps are working fine. Just do not remove shopOrigin from App Bridge initialization

Thanks a lot. Finally it worked for me after adding shopOrigin.

[ShirasuGyoza]

@abimwaqas @apurbajnu hihi, I still facing this issue.. Could you tell me which code did you modify?

[talktohenryj]

Me too. I cannot get into that discord.

Sent via Superhuman iOS ( @.*** )

On Wed, Nov 9 2022 at 6:23 AM, Akane Nakayama < @.*** > wrote:

@abimwaqas ( https://github.com/abimwaqas ) @apurbajnu ( https://github.com/apurbajnu ) hihi, I still facing this issue.. Could you tell me which code did you modify?

— Reply to this email directly, view it on GitHub ( https://github.com/osiset/laravel-shopify/issues/1248#issuecomment-1308841424 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AVA6MITVVSADEWTOVJ5I2CTWHOXXHANCNFSM6AAAAAARQ6LVRE ). You are receiving this because you were mentioned. Message ID: <osiset/laravel-shopify/issues/1248/1308841424 @ github. com>

[apurbajnu]

Firstly I use react. So I added SHOPIFY_FRONTEND_ENGINE=REACT. Token router is not needed and config should look like this const config = { apiKey, host, shopOrigin:shopOrigin, forceRedirect: true };

[developertester786]

$shop = Auth::user()->name; return response() ->view('welcome') ->header( 'Content-Security-Policy', "frame-ancestors https://$shop https://admin.shopify.com");

I am facing the similar issue in laravel app. I tried to use this with a default route as @apurbajnu mentioned in routes/web.php file . But I am still getting This app is outdated and will no longer function after Wednesday, September 6, 2023. Contact the app's developer to update the app. message.

Anyone found the solution for this? Please help!

[abimwaqas]

@developertester786 frame-ancestors is for clickjacking. It has nothing to do with outdated app. Check shopify documentation for host parameter which shopify implemented. You need to pass host parameter with app-bridge initialization. In short remove shopOrigin from default.blade.php inside vendor folder. It might work.

[filipembcruz]

I created a quick fix to approve my app (It has been approved). I change some files:

@ShirasuGyoza @developertester786 @jhaineymilevis

vendor\osiset\laravel-shopify\src\Traits\AuthController.php

    /**
     * Get session token for a shop.
     *
     * @return ViewView
     */
    public function token(Request $request)
    {
        $request->session()->reflash();
        $shopDomain = ShopDomain::fromRequest($request);
        $target = $request->query('target');
        $query = parse_url($target, PHP_URL_QUERY);
        $host = $request->query('host');

        $cleanTarget = $target;
        if ($query) {
            // remove "token" from the target's query string
            $params = Util::parseQueryString($query);
            $params['shop'] = $params['shop'] ?? $shopDomain->toNative() ?? '';
            $host = $params['host'];
            unset($params['token']);

            $cleanTarget = trim(explode('?', $target)[0] . '?' . http_build_query($params), '?');
        } else {
            $params = ['shop' => $shopDomain->toNative() ?? ''];
            $cleanTarget = trim(explode('?', $target)[0] . '?' . http_build_query($params), '?');
        }

        $shop_domain = $shopDomain->toNative();

        if (!$request->has('host') && empty($request->get('host'))) {
            if (!empty($host)) {
                $request->merge(['host' => $host]);

                $shop_domain = base64_decode($host);
            }
        }

        return View::make(
            'shopify-app::auth.token',
            [
                'shopDomain' => $shop_domain,
                'target' => $cleanTarget,
            ]
        );
    }

vendor\osiset\laravel-shopify\src\resources\views\layouts\default.blade.php

      var app = createApp({
        apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', base64_decode(\Request::get('host'))) }}",
        shopOrigin: "{{ base64_decode(\Request::get('host')) }}",
        host: "{{ \Request::get('host') }}",
        forceRedirect: true,
      });

vendor\osiset\laravel-shopify\src\Traits\BillingController.php

    /**
     * Processes the response from the customer.
     *
     * @param int $plan The plan's ID.
     * @param Request $request The HTTP request object.
     * @param ShopQuery $shopQuery The shop querier.
     * @param ActivatePlan $activatePlan The action for activating the plan for a shop.
     *
     * @return RedirectResponse
     */
    public function process(
        int          $plan,
        Request      $request,
        ShopQuery    $shopQuery,
        ActivatePlan $activatePlan
    ): RedirectResponse {
        // Get the shop
        $shop = $shopQuery->getByDomain(ShopDomain::fromNative($request->query('shop')));
        if (!$request->has('charge_id')) {
            return Redirect::route(Util::getShopifyConfig('route_names.home'), [
                'shop' => $shop->getDomain()->toNative(),
                'host' => base64_encode($shop->getDomain()->toNative())
            ]);
        }
        // Activate the plan and save
        $result = $activatePlan(
            $shop->getId(),
            PlanId::fromNative($plan),
            ChargeReference::fromNative((int) $request->query('charge_id'))
        );

        // Go to homepage of app
        return Redirect::route(Util::getShopifyConfig('route_names.home'), [
            'shop' => $shop->getDomain()->toNative(),
            'host' => base64_encode($shop->getDomain()->toNative())
        ])->with(
            $result ? 'success' : 'failure',
            'billing'
        );
    }

vendor\osiset\laravel-shopify\src\Http\Middleware\VerifyShopify.php

    /**
     * Undocumented function.
     *
     * @param Request $request The request object.
     * @param Closure $next    The next action.
     *
     * @throws SignatureVerificationException If HMAC verification fails.
     *
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        // Verify the HMAC (if available)
        $hmacResult = $this->verifyHmac($request);

        // if ($hmacResult === false) {
        //     // Invalid HMAC
        //     throw new SignatureVerificationException('Unable to verify signature.');
        // }
        
       ...

[jhaineymilevis]

@deepahir do you have an example approach for react use with this library?

[kurakin-oleksandr]

@filipembcruz with your fix, after /api/authenticate/token, I'm redirected to /admin/admin/apps/API_KEY/api/authenticate/token. Which is not correct. Any help is appreciated