search

firebase / firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
https://firebase.google.com/
Apache License 2.0
4.57k stars 1.05k forks source link

FirebaseUI broken in iOS13.4 (Result: White Screen, Cause: Third-Party Cookie Blocking... or something else?) #690

Open chrisjacob opened 4 years ago

chrisjacob commented 4 years ago

Using Safari app in iOS13.4 (using normal browsing i.e I'm not using "Private"), if I go to the URL https://fir-ui-demo-84a6c.firebaseapp.com/ all I get is a blank white screen.

Perhaps this has been caused by the following announcement?

Full Third-Party Cookie Blocking and More Mar 24, 2020 https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/

...

Your REAME mentions these two know issues seem potentially related...

Firebase Auth does not work in Safari private browsing When a user has enabled the private browsing mode in Safari, the web storage is disabled. This currently results in an error being thrown upon Firebase Auth initialization. Therefore, when following the snippets above, FirebaseUI will never get initialized and no UI will be displayed.

... sounds like what is happening to me. But I'm NOT in Private browsing mode.

... also it would be nice if this library could more gracefully handle this situation e.g. provide a message to the user that explains Private browsing isn't supported. ;)

Firebase Auth OAuth popup/redirect operations may not work when 3rd party cookies are disabled When a user disables 3rd party cookies in their browser, the mechanism for returning the result of an OAuth popup/redirect as implemented by the underlying firebase-auth.js library may be broken on some browsers.

... I never got to a popup/redirect. But this mentions 3rd party cookies. So thought I would raise it here.

Really keen to hear your thoughts on how iOS13.4 has impacted FirebaseUI (and any ETA's on bug fixes ... or whether this iOS upgrade has killed FirebaseUI on iOS?).

Thank you

chrisjacob commented 4 years ago

FYI tested the demo page on 13.3.1 and it works fine. Seems 13.4 upgrade is the culprit. Getting a fully blank screen in the latest production iOS release sounds like a P1 Blocker issue (hopefully this is only failing for me ... but if it's not.... then this kind of issue I'm sure would be a big concern to the FirebaseUI community as it would essentially block their users from logging in on iOS devices).

bojeil-google commented 4 years ago

I tested 13.3.1. and it is working fine on my end. I don't currently have access to 13.4.

chrisjacob commented 4 years ago

Ok strange... it's now working.

I tried saving the page to Home Screen... and when I launch it from Home Screen the demo page was fine.

I tried opening the Demo page in Chrome app... and it was fine.

Then I tried copy + pasting the URL from my 1st Safari app tab, and put it in a new tab and navigated to the demo page and it loaded totally fine.

If I go back to my original Safari tab and try reloading the demo page still is blank, and doesn't fix it self.....but in new tabs it's working totally fine.

Very strange. Maybe this is just a false alarm.

Hopefully it's not a bug that only impacts first page loads (then work afterwards because files are coming from cache). That would be nasty for first time users.

Still keen to hear your thoughts (things are looking more positive now ;) )

bojeil-google commented 4 years ago

FirebaseUI depends on the underlying implementation in the core JS SDK (signInWithPopup and signInWithRedirect) which is widely used. I haven't seen any reports about this issue but will keep an eye on anything related to this. I tested on an iOS device that I don't personally own for the first time and didn't have any issues. Will test again in the newer version when I get the chance.

boldtrn commented 4 years ago

I think my site is seeing issues due to that.

In this example my site would be siteA.com. siteA.com is embedded as iFrame on a different domain, siteB.com. When users attempt to login, a new windows is opened that contains firebaseUI to login, the code is on siteA.com. The new window is opened and users can login just fine. But users don't get logged in the iFrame on siteB.com, when users go to siteA.com straight away, they are logged in just fine.

As far as I know, this issue only appears on iOS.

Are there any options to solve this?

bonatoc commented 2 years ago

I have the same problem with Safari on:

I have implemented the following providers:

None of the methods work, the redirect after submitting the credentials gives a blank page. The app is hosted on Firebase servers.

Oddly, I "installied" the PWA on the iPad (I can't remember how I did it, but I suppose I used the "add to desktop" option in "sharing", I can't think of another method for adding a PWA to the desktop on an Apple device), and all methods work!

It looks like the "encapsulation" of the web engine, when in PWA mode, is different than how Safari reacts natively. This seems to be confirmed here.

You can test the registering/login here: https://tethys-pwa-staging.web.app/

If you install the app on the desktop as a PWA, it should work.