Firebaseui-web: Google auth for iOS Safari web app mode doesn't work because of Google's 'Modernization'

[mikkopaderes]

In iOS Safari web app mode, I'm unable to use Google auth using redirect flow because of this. I tried doing the popup flow but it doesn't seem to work since it doesn't go back to the app.

What's the recommended workaround for this?

[bojeil-google]

Hmm, this is Google OAuth related. Not sure what could be done as Safari web apps are treated as webviews.

[jamespdaily]

Was there ever a proposed solution to this? My users aren't able to sign-in on their apple devices.

[bojeil-google]

This is a Google sign-in issue and not Firebase Auth specific. As far as I know, it is impossible for us to workaround this. Check this for more context: https://github.com/firebase/firebase-js-sdk/issues/77

[zxchew2014]

@jamespdaily check are u able to solve it for apple devices to sign in?

[mesqueeb]

When a user has added my web app to the homescreen on iOS, I'm currently showing a message to the user:

"This app is unavailable when added to the homescreen because of security reasons. Please use the app directly from Safari.
We hope to improve this as soon as possible."

Just waiting now until there is a workaround. But no-one has found one so far as far as I know.

[nicolasgarnier]

I just tested and it seems that the "Redirect" auth mode works in an "Added to homescreen" app on iOS. So you can use this as a workaround for now.

I did get stuck with the "Popup" auth mode though so it looks like we have a bug.

@bojeil-google: it looks like popup auth is broken for "Added to homescreen" app on iOS. Would be nice if there was a workaround to fix it because the experience is somewhat a lot better in popup mode than in redirect mode on iOS homescreen apps: You see the URL in a custom tab whereas with the redirect mode you don't see the URL of the Google signin page and you're basically entering your password in an unknown website...

In the mean time you can use this workarround to detect homescreen iOS apps and use the redirect flow only on these apps.This is an example if you are using firebaseUI:

  var signInFlow = 'popup';
  // For iOS full screen apps we use the redirect auth mode.
  if (('standalone' in window.navigator)
      && window.navigator.standalone){
    signInFlow = 'redirect';
  }

  // FirebaseUI config.
  var uiConfig = {
    'signInFlow': signInFlow,
    'signInOptions': [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID
    ]
  };
  var firebaseUi = new firebaseui.auth.AuthUI(firebase.auth());

[nicolasgarnier]

I've deployed the workaround in friendlyPix if you wanna test it out:

https://friendly-pix.com/

[nicolasgarnier]

Ah I just saw on https://github.com/firebase/firebase-js-sdk/issues/77 that this is a known issue. Let's close this bug in favor of https://github.com/firebase/firebase-js-sdk/issues/77

[markcpsw]

@nicolasgarnier I have noticed some odd behaviour on an app I am developing that also appears on https://friendly-pix.com. If you pin the app to an ios home page, login works using the redirect, and you can then log out. If you log in a second time it then logs you in straight away as the same user. Therefore you cannot switch to another user.

[bojeil-google]

If you are using OAuth sign in, your account will be remembered. You can pass some custom parameter to force account selection. For example:

ui.start('#firebaseui-auth-container', { signInOptions: [ { provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID, scopes: [ 'https://www.googleapis.com/auth/plus.login' ], customParameters: { // Forces account selection even when one account // is available. prompt: 'select_account' } } });

[mdrideout]

Redirect flow does not work for me for iOS safari 12. If the user is in the PWA, tries to login using the firebaseui with redirect flow, after successful Google login, they are redirected back to the "URL" in safari browser that they would have been at in the PWA. So they end up in the traditional browser view, not the PWA. Still usable, but any time a google user logs in, it's not a great experience because it's back in the browser.

[italodeandra]

Redirect flow does not work for me for iOS safari 12. If the user is in the PWA, tries to login using the firebaseui with redirect flow, after successful Google login, they are redirected back to the "URL" in safari browser that they would have been at in the PWA. So they end up in the traditional browser view, not the PWA. Still usable, but any time a google user logs in, it's not a great experience because it's back in the browser.

Could you find a solution?

[mdrideout]

@italoandrade - no, this is still an issue. I am no longer encouraging iOS users to install the PWA. I am working on a flutter app for "downloadable / installable" version now.

Big picture: Flutter has arrived and gotten great in a short time, and PWA's still have a ton of implementation barriers on iOS - so I'm not relying on PWA's as an alternative to building a downloadable app anymore. Additionally, my users as literally asking me when it will be in the app store. No one wants to use the PWA feature - it must seem weird or sketchy to them.

[italodeandra]

@mdrideout Yeah, I understand. I also stopped using it, but I didn’t choose anything else’s yet. It’ll also be Flutter or maybe React Native that I’m more familiar with.
But thanks for answering me.

[mdrideout]

Just updating that I tested the flow this morning on the latest version of iOS and the user is redirected back to the PWA properly.