ITP Middleware : requestStorageAccess is not a function (JS error)

Expected Behavior

When using the ITP middleware with third party cookies disabled, clicking on "Continue" should prompt the dialog to enable third party cookies... Or redirect me to the page to do it manually.

Current Behavior

Currently, I get the following JS error in my console when I click on "continue" :

ask:422 Uncaught TypeError: document.requestStorageAccess is not a function at HTMLButtonElement.handleStorageAccess (ask:422)

Failure Information

I'm using Chrome 88.0.4324.96 (last update) and Chrome Dev 90.0.4400.10. Both versions have the issue.

Steps to Reproduce

1. Disable third party cookies in your browser
2. Load a page of your app with the ITP middleware
3. Click on "Continue"

Context

• Package Version: v16.0.0
• Laravel Version: v7.0
• PHP Version: v7.2.5

Failure Logs

ask:422 Uncaught TypeError: document.requestStorageAccess is not a function at HTMLButtonElement.handleStorageAccess (ask:422)

[gnikyt]

Ah... its not supported by Chrome by default, has to be manually turned on, but other browsers it is.

I'll have to check for existance and if not, just show the manuel enable cookie screen.

[gnikyt]

@fraxool Would you be able to change your composer to "dev-bugfix/request-storage-access", this should show the manual enable cookies card for browsers that don't have requestStorageAccess.

@osiset thanks, it fixed it :)

It's a good workaround for the moment.

I tried to implement JWT tokens in my multi-pages app using Turbolinks especially but it was not stable at all. I will use this solution for the moment, thanks!

After doing more tests, I discovered that clicking on "Continue" (still using Chrome with third party cookies disabled) will not do anything if the third party cookies are not enabled OR if they are enabled but the page is not reloaded. With this console warning :

Storage access may be blocked. DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

@osiset, another idea based on this ITP middleware that could probably be better in my opinion :

1. If we detect that the third party cookies are disabled, we show an alert like now
2. Instead of asking the merchant to enable third party cookies (which is a big problem in terms of user experience I think), we ask him to open the app in a new tab (with a click on a button). That's what I do in my apps when I detect that Safari is used (because Safari always disable third party cookies by default)
3. We turn the "forceRedirect" parameter to "false" for AppBridge in that case, so the app is only used in a new tab (not in an iframe)

This allows the user to use the app directly without having to struggle with the technical requirement to turn the "third party cookies" on in the browser. Do you think it could be done?

[gnikyt]

Chrome probably needs to refresh the tab. On edge, if you enabled cookies it refreshes the page.

Shopifys ruby and koa implementations both show the same sort of screen, so my aim is to keep it consistent with that.

If you click refresh after enabling cookies does anything happen?

[gnikyt]

Sorry just read your comment about the reload... yes thats the issue. Hmm, in this case I can change the continue button to reload back to the app and since cookies are enabled it should work.

[gnikyt]

@fraxool Give the branch another try, I've updated it to redirect back to the app when the continue button is clicked for the manual cookie display.

[gnikyt]

In testing. This solution is working for Chrome.

Manual cookie card displays... enabling cookies in Chrome... then clicking Continue... redirects back to app fine.

Will close for now @fraxool, v16.0.2 includes the JS patches. If you feel theres more mods needed, feel free to reopen!