React SPA fetch request not hitting controller

[danlafram]

For bug reporting only! If you're posting a feature request or discussion, please ignore.

Using osiset/laravel-shopify: V17.1 and React SPA, requests aren't hitting my controller

Expected Behavior

Please describe the behavior you are expecting:

fetch("/test", {
    method: "GET",
    headers: {
        Authorization: `Bearer ${window.sessionToken}`,
    },
}).then((response) => {
    console.log("response", response);
    return response.json().then((data) => {
        console.log("data", data);
    });
});

This code should hit Route::get('/test', [StoresController::class, 'index'])->middleware(['verify.shopify'])->name('test'); in web.php and redirect to StoresController's index method.

Index method in StoresController looks like:

public function index()
    {
        info("Made it to controller");
        return response('Hello World', 200)
                  ->header('Content-Type', 'text/plain');
    }

But nothing is logged in laravel.log, and nothing returned in request to front-end.

Current Behavior

Please describe the current behavior?

I've placed logs in VerifyShopify.php in order to confirm the middleware is being hit, and it is. Here is the network request from chrome console:

Failure Information

Please help provide information about the failure if this is a bug.

Bug, I think.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. New laravel with Osiset/laravel-shopify
2. Use laravel react front-end scaffolding
3. Create endpoint in web.php or api.php that hits custom controller
4. Add fetch to react to call endpoint once window.sessionToken not null
5. Controller not hit

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Package Version: v17.1
• Laravel Version: v8.65
• PHP Version: v7.4.21
• Using a toolset (Docker, Laradock, Vagrant, etc.): MAMP with localtunnel for forwarding

Failure Logs

Please include any relevant log snippets or files here.

[benson336]

This is very similar to the problem I posted #1061. Looks like shopify.verify middleware didn't authenticate the frontend to access the backend route. If you take off the middleware you should have a response, but you will NOT able to access the Auth::user() and Admin API via graphql.

[danlafram]

Exactly the same. I noticed in that issue there isn't the authorization header with the sessionToken being attached but I imagine you would run into the same thing but get a 302 response instead of 403. I think the middleware authenticates (after logging out different areas of the middleware to confirm it reaches there), however something happens to the request between the shopify.verify middleware and the controller.

[benson336]

@danlafram I think we need setup a session token authentication. Since Jan 01 2022, all Shopify embedded app needs to use session token.

[benson336]

@danlafram I think I have a solution for you. Try to make your frontend fetch function an Async await function because you need to wait for the token to be available.

[danlafram]

@benson336 We are using session tokens here headers: { Authorization: Bearer ${window.sessionToken}, } as described by the documentation.

Per your comment on making it async, I have it setup to poll every 10 seconds to wait for the session token to not be undefined: useEffect(() => { setInterval(() => { if (window.sessionToken !== undefined) { console.log("Calling"); fetch("/test", { method: "GET", headers: { Authorization:Bearer ${window.sessionToken}, }, }).then((response) => { console.log("response", response); return response.json().then((data) => { console.log("data", data); }); }); } }, 10000); }, []);

This still doesn't hit the controller which leads me to believe its an actual bug, or an issue with how SPA's interact with the package. Could still be user error but I feel like I've tried most things to eliminate that possibility.

[Kyon147]

Hi @danlafram

I replicated your set-up above and was able to get the response fine (minus the fact it's plain text and we are trying to parse JSON in your response)

As it working as expected for me - I think there's something wrong somewhere else with your instance.

[danlafram]

@Kyon147 Just tried with a new install again with same result as I had before.

Are there any steps you're taking after setting up react within laravel?

Are you using ngrok? Or LocalTunnel? I'm using LocalTunnel and when I make the request outside of the react app, the request goes through no problem.

Can you share more of your JS file and your setup process to see if I'm missing something?

[danlafram]

@Kyon147 @benson336 Using axios instead of fetch seems to work. Closing now.