Verfiy Scope middleware Shopify error

[megabait1212]

Hello,
I don't know if it is a bug or not, but it looks suspicious. I added verify.scopes middleware, and after that, I was redirected to the Shopify page apps page with an error message: "This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support.". I tried to clear cookies, but it doesn't help. If I remove the middleware, everything will be fine. I rewrote the middleware because I have a redirect with JS and the same problem.
How can I solve the problem and update the app's permissions?

[Kyon147]

I've not seen this issue before with the scopes but I am assuming you are on Blade templates?

[megabait1212]

No, I am using Polaris. There are errors once I add middleware.
My scopes: SHOPIFY_API_SCOPES=products_read,products_write,customers_read,customers_write
Routes:

Route::middleware(['verify.shopify', CheckAccessScopes::class])->group(function () {
    Route::view('/', 'app')->name('home');
    Route::post('/fake-data', [FakerController::class, 'store']);
    Route::delete('/fake-data', [FakerController::class, 'destroy']);
});

I tried a variant when I added logic from the middleware to mine:

class CheckAccessScopes
{
    /**
     * Handle an incoming request.
     *
     * @param \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response) $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        if (!$request->ajax()) {
            return $next($request);
        }
        $shop = $request->user();
        if ($shop->force_scope_update) {
            $scopesResponse = $shop->api()->rest('GET', '/admin/oauth/access_scopes.json');
            if ($scopesResponse && $scopesResponse['errors']) {
                return $next($request);
            }
            $scopes = json_decode(json_encode($scopesResponse['body']['access_scopes']), false);
            $scopes = array_map(static function ($scope) {
                return $scope->handle;
            }, $scopes);
            $requiredScopes = explode(',', Util::getShopifyConfig('api_scopes'));
            $missingScopes = array_diff($requiredScopes, $scopes);
            if (count($missingScopes) === 0) {
                return $next($request);
            }
            return response()->json(
                [
                    'forceRedirectUrl' => route(
                        Util::getShopifyConfig('route_names.authenticate'),
                        [
                            'shop' => $shop->name,
                            'host' => $request->get('host')
                        ]
                    )
                ],
                403
            );
        }
        return $next($request);
    }
}

And this is part from Axios:

const responseInterceptor = axios.interceptors.response.use(response => response, error => {
            if (error.response.status === 403 && error.response?.data?.forceRedirectUrl) {
                top.location.href = error.response.data.forceRedirectUrl;
            }
            return error
        })

[Kyon147]

Why are you using CheckAccessScopes::class and not just verify.scopes middleware?

[megabait1212]

Otherwise, I got the following problem: I was redirected to the Shopify page apps page with an error message: "This app can’t load due to an issue with browser cookies. Try enabling cookies in your browser, switching to another browser, or contacting the developer to get support."

[Kyon147]

@megabait1212 is your template engine set to REACT in the Shopify config? Wondering if you are still loading some of the blade based logic on top which might be conflicting.

I've not seen this issue before and I am also using Polaris etc on one of my apps and verify scopes seems to work fine. The app should not need to use cookies being auth'd through JWT, so it is strange.

[megabait1212]

Yes, SHOPIFY_FRONTEND_ENGINE=REACT.
Yes, I agree that it shouldn't ask for any cookies. I don't know why this happened. I tried to delete cookies, a different browser, and the same problem

[Kyon147]

Without further knowledge of your code it is going to be hard to diagnose as I can't replicate the issue locally.

[megabait1212]

Could you check if I upload the project to GitHub on weekends?

[megabait1212]

Hi Kyon147, I uploaded the project https://github.com/megabait1212/laravel-shopify
There is nothing special, just a tutorial. I don't know, maybe a problem with docker and ngrok, but it will be very strange
Example of .env
SHOPIFY_APPBRIDGE_VERSION=latest
SHOPIFY_APP_NAME=test-app
SHOPIFY_API_VERSION=2024-07
SHOPIFY_API_KEY=
VITE_SHOPIFY_API_KEY=
SHOPIFY_API_SECRET=
SHOPIFY_API_SCOPES=products_read,products_write,customers_read,customers_write
SHOPIFY_FRONTEND_ENGINE=REACT
SHOPIFY_BILLING_ENABLED=true

I really appreciate any help you can provide.

[Kyon147]

Hey @megabait1212

I'll take a look at this next week, thanks for setting up the github project for me to use.