Firebase Auth in PWA Starter Kit causes Recaptcha to be blocked from accessing a cross-origin frame.

[freshgrapes]

I am using the PWA Starter Kit, and when I try to integrate Firebase Auth, this error always pops up: recaptcha__en.js:515 Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.

I've already tried to set my cors.json to Access-Control-Allow-Origin: *, and I used npm start -- -c . -P https/1.1 to make sure that I am running my development environment on https, however, that same error still pops up.

I tried using the FirebaseUI, and it works fine ONLY when I put its code in index.html, however, that will put the entire FirebaseUI in every page of the app, instead of on a specific signup page (or modal), so I moved the FirebaseUI code to places like my-view1.js and the same error message from paragraph 1 pops up again immediately. The FirebaseUI and Firebase Auth stop working when that error message is present.

Has anyone used PWA Starter Kit with Firebase Auth? Please kindly help!

Thanks!

[keanulee]

I actually experimented with adding Firebase Auth a while ago - it's in the firebase-auth branch. I was using the @firebase/auth library directly and redirecting to Google for sign in tho; I suspect there would be issues with FirebaseUI/UI provided be third parties if they aren't designed to be embedded in Shadow DOM.

[freshgrapes]

@keanulee Thanks for your reply. I tried to use @firebase/auth like how you used it in the firebase-auth branch, but it gives me the same error message when I tried to authenticate with phone number.

I think it has to do with reCAPTCHA ---which is required when authenticating with phone number--- not being happy with the PWA_Starter_Kit infrastructure.

For now I just ended up using the FirebaseUI, put it in index.html, and hide it until the user is in the signup page.

Hopefully there will be full support on the integration of PWA_Starter_Kit and Firebase Auth using phone number soon, because FirebaseUI is very limiting when it comes to full UI/UX customization.

Thanks for your help!

[keanulee]

Had a chance to debug this further. Seems like the reCAPTCHA library is using window.frames[] (search .frames[ in source code) to communicate between iframes. The iframe inside Shadow DOM isn't accessible through this API, so the browser throws the DOMException when it can't find the iframe (which is disguised as a crossorigin thing because the idea is that an iframe isn't supposed to see something it's not supposed to). If the recaptcha-container is outside Shadow DOM (e.g. in index.html), the iframe becomes accessible through window.frames[] (can verify by seeing window.frames.length is larger in this case).

[keanulee]

Related links:

• iframes not registered on window.frames with shadow dom polymer#4086
• <iframe> and the History API WICG/webcomponents#184
• https://w3c.github.io/webcomponents/spec/shadow/#other-clarifications