Firebaseui-web: Chrome 61: tapping "Sign in using Google" opens in Custom Tab, breaks login flow

[rejhgadellaa]

I'm working on a PWA that uses Firebase. I use the Firebase UI library for user login. Everything worked perfectly fine until Chrome 61 hit my device. Now, when I tap "Sign in with Google" (haven't tested other methods) it opens a Chrome Custom Tab and breaks the login flow. The user ends up in a loop.

Unfortunately I don't have an example because the PWA is not ready for sharing publicly yet. I'd be happy to share it privately if that helps.

Reproduce:

• Open a site that is a PWA and uses Firebase UI for authentication
• Add it to the home screen (I have the experimental "enhanced add to home screen" flag enabled btw)
• Open the home screen shortcut (PWA in chrome-less mode)
• Try to log in using Google (haven't tested other providers yet)
• A Chrome Custom Tab is opened instead of just navigating to the firebase url for auth
• The user ends up at the login screen again, firebase ui library doesn't pick it up

[bojeil-google]

Are you using popup signInFlow?

[rejhgadellaa]

No. Well... Not that i know of. It used to work. I didnt update the library either (it worked after the last update).

I'll double check the popup option (on mobile atm) but im pretty sure i don't use it.

[bojeil-google]

If you are using redirect, why would it open a chrome custom tab?

[rejhgadellaa]

Well.yes excellent question. But wouldn't that mean that my pwa would've opened a new tab in chrome before v61 hit my device? Like I said, I didn't change anything. It still works as expected on another device that hasn't gotten the update yet.

[bojeil-google]

Unfortunately I can't help you if you don't provide details and sample code. I can't guess what mode you are using. I can't guess what type of PWA you are using. PWA is an overloaded term.
I don't work on Chrome so I have no I idea what they changed.

[rejhgadellaa]

I can provide the configuration I'm using. I could provide you a url to my app but I'd rather not share it here on a public place. UPD: maybe connect via twitter? My username is @rgadellaa :)

I simply call:

var ui = new firebaseui.auth.AuthUI(self.firebase.auth);
ui.start('#firebaseui-auth-container', AppCfg.firebase.AuthUI);

where AppCfg.firebase.AuthUI is declared somewhere else:

{
        callbacks:{
            signInSuccess: function(currentUser, credential, redirectUrl) {
                return false;
            }
        },
        signInOptions:[
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        ],
        signInSuccessUrl: window.location.href.split('?')[0] +"?signInSuccess=true",
    }

According to the docs the default for signInFlow is "redirect" and it's optional. So I would assume that's what it should do?

[rejhgadellaa]

Just did a test with explicitly setting signInFlow: "redirect". Still opens the redirect in a chrome custom tab when I tap the "Sign in with Google" button

[bojeil-google]

Ok, I understand. Unfortunately, we never properly tested in PWA mode as we never heard any issues in that environment until now. I will need to investigate this on Monday.
Thanks for reporting it.

[bojeil-google]

We use localStorage/indexedDB to pass the sign-in state back to the app to complete sign-in. I speculate that the chrome custom tab may not be sharing the same cookie jar as the PWA. This may explain why when you go back to the app, it is not getting detected.

[rejhgadellaa]

Thanks for looking into it :)

Regarding your last comment: yes but the link should not open in a custom tab in the first place, right?

It is possible that Chrome 61 does this with every link that leaves the origin of the PWA to signal the user he/she is leaving the site (there is no address bar to signal this in PWA mode)?

[bojeil-google]

I did a quick test with no manifest file. I added a test app I use to the home screen and it worked fine (popup and redirect) in chrome 61 on an Android device running the latest version. I suspect it may have to do with the address bar not showing. i will test it tomorrow.

[bojeil-google]

Hey @rejhgadellaa, I tested again with
"display": "fullscreen"
I have some good news and some bad news. The good news is that 'popup' flow should work in that case, but 'redirect' does not seem to work.

In fullscreen mode, redirect gets broken as it opens a chrome custom tab since a cross origin URL navigation occurs (this is a security measure so the user knows where they have been navigated to, you don't want the user entering their credentials on an unknown site). We use sessionStorage as part of the flow to detect the result when it goes back to the original page and since a new page is opened, sessionStorage will not be detected. In addition, at the end of the flow, we redirect back to the app but the redirect will happen in the chrome custom tab (you end up with 2 pages of your sign in screen!).

I don't think we can find an easy solution for this. signInWithRedirect is effectively broken as there is no redirect. It becomes a popup. signInWithPopup is the right thing to use here. We may have to throw an error when signInWithRedirect is triggered in that mode.

Ideally, instead of opening a chrome custom tab, they should show the URL when navigation occurs (without opening a chrome custom tab) to a page of different origin and when navigation goes back to original page, hide it again. I will try to reach out to the Chrome folks but I don't know how receptive they will be to this fix.

There is a post on how to detect the mode: https://developers.google.com/web/updates/2015/10/display-mode
You could use that to decide the mode used in firebaseui.

[bojeil-google]

I filed a bug with chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=771418

[rejhgadellaa]

Great thanks for investigating. I'll star the issue on Chrome and try your proposed workaround.

[NikitaChernykh]

@bojeil-google Can this be also added as an issue with chrome extensions? I can't use popup with the extension that is already a popup. I can only use redirect and get the same loop where I have to force quit the chrome and uninstall the extension to get out of the loop.

[bojeil-google]

This has nothing to do with chrome extensions.
You can't use signInWithPopup from a chrome extension browser action. The popup has to be opened from the background script as the authentication popup will cancel the browser action popup. This is mentioned in the official docs: https://firebase.google.com/docs/auth/web/google-signin#authenticate_with_firebase_in_a_chrome_extension
FirebaseUI-web as a result does not currently support OAuth sign-in in chrome extensions.

[NikitaChernykh]

I know that signInWithPopup cannot be used. Using this example: https://github.com/firebase/quickstart-js/tree/master/auth/chromextension with signInWithCredential sign-in flow works but when the user is not logged in on chrome it redirects to new tab and puts user through this endless loop I was talking about.

[bojeil-google]

I am vaguely familiar with that repo. Please assign to the owner of that repo. This issue is related to standalone PWAs. They are completely different.

[ajonp]

Does anyone have PWA working example?

[JasonMuteham]

Does anyone have PWA working example?

See https://github.com/firebase/firebaseui-web/issues/247#issuecomment-368233358

[bojeil-google]

Hmm, I just checked the firebaseui test app: https://fir-ui-demo-84a6c.firebaseapp.com/
I added it to homescreen on an android device (chrome 64.0.3282.137) and it seems to be working with popup/redirect. Is there something I am missing?

[JasonMuteham]

The firebaseui test is not a PWA.

[bojeil-google]

Hmm, we're missing a service worker. I have another test app with one. Will test it tomorrow.

[mariojfduarte]

Any solution yet?

[ajonp]

Forgot I had commented on here. I have been tracking against chrome issue.
https://bugs.chromium.org/p/chromium/issues/detail?id=771418

Here is full example code. Just make sure to log out of chrome first then try signon flow.
https://ajonp-firebaseui-pwa.firebaseapp.com/

[mariojfduarte]

Still not working on chrome mobile

Em 13/03/2018 10:48 p.m., "Alex Patterson" [e-mail]
escreveu:

Forgot I had commented on here. I have been tracking against chrome issue.
https://bugs.chromium.org/p/chromium/issues/detail?id=771418

Here is full example code. Just make sure to log out of chrome first then
try signon flow.
https://ajonp-firebaseui-pwa.firebaseapp.com/

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebaseui-web/issues/221#issuecomment-372845001,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI_b-97IrDv_-wbLfIaR4lkiMACblUAhks5teEzJgaJpZM4Poft4
.

[mwkldeveloper]

I have the same problem. and i follow @JasonMuteham 's suggestion:

247 (Option 2) - removed the configuration for icons 144x144 and above in the manifest.json

it works and still have icon on splash screen, but it use the icon for ios, not for android.
also, it will fails PWA requirement.

hope will have fix later....

[henrylearn2rock]

Good news, fixed in Chrome Canary https://bugs.chromium.org/p/chromium/issues/detail?id=771418#c84

[sandyeveliz]

I try it in Canary and works like a charm with Redirect, now we must just wait.

[phancey]

Doesn't work for me. I have canary and standard chrome installed side by side.
If I add my pwa to home screen and use the pwa home screen icon, then logging in using the firebaseui I get offered choices of how to complete the action. Whatever I choose does not work. https://react-2bytes-burger2.firebaseapp.com
How can this be fixed?

[zevdg]

@phancey, it sounds like you're using the popup flow. Are you sure you have signInFlow set to redirect?

Also, are you sure that you added the site to your homescreen from canary and not from regular chrome? The PWA will render with whichever browser you used to add it to the homescreen.

[ajonp]

@phancey make sure you uninstall and reinstall latest canary, it doesn't typically auto update that I am aware of.

The redirect flow definitely is working and will be released in 67 as it has been approved for merge.

[phancey]

you're right I was using popup. I have changed to redirect. Now got it working in Canary when using the proper manifest though I will probably revert to using the incorrect version for the moment while Canary is not standard.
Just for clarification - why does popup mode not work?
thanks

[henrylearn2rock]

Standalone/Fullscreen PWA cross origin redirects opening in a Chrome Custom Tab
https://bugs.chromium.org/p/chromium/issues/detail?id=771418#c97 said pop-up should work. Please comment on that bug if pop-up doesn't.

[nicolasgarnier]

Closing since there was no complains for a while. We'll re-open if needed :)

[JanneHarju]

I haven't any issues before. ALthough I changed my login from popup to callback in spring. In last Chrome update my application got broken in same manner. My problem has nothing to do with firebase, but with any login with callback function. Callback is opening to new tab if PWA application is installed to desktop win10 pc. This was still working last week(18.10.2018).

[kgrosvenor]

I'm having an issue related to another project but i think this is linked, even with the oidc-client the popup flow does not work, im sure the chrome installed apps open another instance of your app window rather then chrome which the callbacks expect? no idea just a guess

[towfiqi]

Started again with latest version of chrome.