Amplify-js: Fails to load in an private/incognito browser session within an iframe

[karldanninger]

Describe the bug
When an amplify app is embedded via an iframe in a private/incognito browser session, a SecurityError stops the app from running.

To Reproduce
Embed an app in an iframe on another website and load it from a private browser session.

Expected behavior
The app should load as you would normally expect, regardless if in incognito mode or not.

Screenshots
Running the app through ngrok, here is the stacktrace. If you were to build/deploy the app, the iframe would be blank with the same error printed in the JS console.

Additional context
To me, it looks like Amplify has a dependancy that isn't guarding against accessing localStorage from within a private browser session, or amplify/pubsub is missing a fallback to accessing window.localStorage when in private browser. In the screenshot you can see one of the top dependancies being amplify/pubsub

[karldanninger]

Hey @amhinson is there anywhere I could help with this issue?
I'm unfamiliar with the @aws-amplify/pubsub repo as a standalone package. Is there sample repos I could fork? Alternatively could I split up aws-amplify deps in package.json to narrow down the issue?

[amhinson]

It looks like this is coming from paho-mqtt. From searching their repo, it looks like a PR to fix this issue has been merged a year ago, but there has been no release since then.

[karldanninger]

Sweet @amhinson! I'll poke to see if @icraggs could tag 1.1.1

[amhinson]

@karldanninger Just to follow up, are you using PubSub from Amplify? What other Amplify categories/libraries are you using?

[karldanninger]

Hey @amhinson does this help?

package.json dependancies:

    "aws-amplify": "^3.0.22",
    "aws-amplify-react": "^4.1.21",
    "aws-appsync": "^4.0.0",
    "aws-appsync-react": "^4.0.0",

[amhinson]

Are you using PubSub directly?

[karldanninger]

No, I'm not.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mkrn]

Is there a way to prevent paho from loading at all? I'd like to use this opportunity to switch to WebSockets (https://aws.amazon.com/blogs/mobile/appsync-realtime/) way but not finding how to do it?

[mkrn]

@karldanninger I went around it by patching the paho-mqtt with this https://www.npmjs.com/package/patch-package

[karldanninger]

@mkrn that is wonderful to hear! Wow.

Could you explain what you did to patch it? Was it literally just yarn patch-package package-name ?

I still hope that Amplify might either lose the dependancy or fix it somehow.. It seems the authors of paho-mqtt are non-responsive.

[mkrn]

@karldanninger

• Edit node_modules/paho-mqtt/paho-mqtt.js to match the PR
• Run npx patch-package paho-mqtt
• Add this script to package.json "postinstall": "patch-package"
• npm i patch-package

Worked like a miracle

[sammartinez]

resolving as the above workaround is what we would recommend to do to resolve this issue since its out of the control of Amplify as @amhinson has called out.