Google as an Auth provider doesn't work on iOS saved to homescreen

[Haroenv]

[REQUIRED] Describe your environment

• Operating System version: iOS 10
• Firebase SDK version: 4.1.3
• Firebase Product: auth

[REQUIRED] Describe the problem

Steps to reproduce:

0. Save the app on the homescreen on iOS
1. make a redirect or popup login with google Auth provider
2. if redirect:
   • webview is not a "valid user agent"
3. if popup:
   • gets stuck in Safari about:blank, doesn't open the app again to pass on the token

Relevant Code:

import firebase from "firebase";

const config = {
//...
};

firebase.initializeApp(config);

const googleAuthProvider = new firebaseAuth.GoogleAuthProvider();

firebase.auth().signInWithRedirect(googleAuthProvider);
// or
firebase.auth().signInWithRedirect(googleAuthProvider);

[Haroenv]

related issue: firebase/quickstart-js#94

[bojeil-google]

This is a known issue and not really Firebase related (in the case of redirect) which is Google sign-in related. Webviews are insecure and Google sign-in no longer works in that environment anymore. Google sign-in recommends using SFSafariViewController for this but homescreen apps cannot run in a SFSafariViewController, instead they always run in a webview environment.
As for popups, they won't work for a different reason since Firebase OAuth popup relies on web storage to pass the result back to the app. However homescreen apps do not share the same web storage as the system browser (which is how the popup is opened).

[Haroenv]

I totally understand that, but saving to home screen isn’t something I have control over as an author. Does this really come down to “it’s impossible”?

[bojeil-google]

Unfortunately, it is currently impossible if you wish to use Google Sign in. If you are using other providers, you can use the recommended signInWithRedirect for that mode (it should work).

[Bretto]

This is a pretty big, deal breaker, any hope/news on this ?

[bojeil-google]

Sorry, it is out of our control. You need to reach out to the Google OAuth folks about this. I don't think there is currently anyway to get Google sign-in to work in a home screen iOS app.

[RileyDavidson-Evans]

Android is also effected by this issue, this is definitely a deal breaker for pwa

[zywyz]

There are still no solution for this problem?

[cdharris]

Have just run into this issue myself, some of our users are trying to launch from iOS bookmarks and are unable to sign in. I appreciate this is not a firebase issue per say but wanted to add my voice here to draw attention that there are more affected users.

I am using firebase web authentication, is there no way to allow login from iOS in this instance?

Thanks

[ghost]

This makes me sad.

[bojeil-google]

Facebook login and other non-Google providers should work in redirect mode only.
As I mentioned earlier, it is impossible to get Google sign-in in that iOS homescreen mode. From the Google sign-in perspective, it is coming from an embedded webview which are now blocked.

[Bretto]

Does anyone know where we can follow the progress on this PWA deal breaker ?

[mikeatmarvel]

We would welcome a solution to this problem as well. Unfortunately this is a "deal breaker" for us as well.... I wanted to share on this thread as we are running into this same issue and did not want to be silent about it.

Looking forward to a resolution soon!

[codercatdev]

How do we upvote a solution?

[mesqueeb]

Does anyone know where we can follow information on how this problem is being treated by either Google OAuth, Apple or Firebase?

Is there a way for firebase to detect if the app is launched from the home screen so we can display an explanation for our users?

[bojeil-google]

The iOS embedded webview has a distinct useragent. You can test for that and display a message to the user. Embedded webviews for iOS 9 and above are blocked from accessing the Google OAuth page for security reasons: https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

[tcha-tcho]

Why not just:

  var fbAppId = 'XXXXXXXXXXXXXX';
  var fburl = "https://www.facebook.com/dialog/oauth?";
  fburl += "client_id="+fbAppId;
  fburl += "&redirect_uri="+window.location.href;
  window.location.href = fburl;

When popup is not possible, like in Safari?

[henrylearn2rock]

@RileyDavidson-Evans
Look: https://bugs.chromium.org/p/chromium/issues/detail?id=771418 seems to be fixed in Chrome dev 64.0.3254.2

Actually, I tried https://fir-ui-demo-84a6c.firebaseapp.com/ posted in the thread above with just the latest stable Chrome and couldn't reproduce the endless loop. Maybe someone fixed something behind the scene already?

[nicolasgarnier]

For me it looks like redirect auth works on https://friendly-pix.com/ on iOS homescreen apps with Google sign-in. But perhaps, since this is an old app, I was grandfathered into an exception.

Popup auth works on Android Homescreen apps.

This is how I implemented an exception just for iOS homescreen apps:

  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());

[tomodian]

Curious that iOS Safari on iPhone (11.4) doesn't work, however iPad (11.2.5) works without any problem.

[socceroos]

@tomodian The change in browser context handling on iOS was introduced in 11.3. 11.2 is unaffected. 👍

[jorge-valvert]

I´m assuming that you have a "manifest" meta tag to reference manifest.json file.

I suggest to do this workaround, that works perfect in ios safari web app:

https://stackoverflow.com/a/52286655/8390589

[danielruiz7]

@jorge-valvert is right. Tested in my own project and social login is working now. Thanks for sharing.

[aSegatto]

@jorge-valvert solution works on iOS also for us, breaks Chrome so it still needs some imprevements.
Thanks !

[danielruiz7]

@aSegatto for me is working both. What I did was adding two link tags for the same manifest:

When page is loaded I check if it's on iOS and do the following in order to avoid safari to read the rel="manifest":

document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");

I'm not sure if it's necessary though.

This way Chrome is able to read the manifest via rel="manifest" and pwacompat.js is able to prepare the meta tags for iOS using rel="pwa-setup".

[jvitor83]

With:

The https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js modified at https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js#L36 to const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

and this configuration at index.html:

  <link rel="manifest" href="manifest.json">
  <link rel="pwa-setup" href="manifest.json">
  <script src="pwacompat.js"></script>
  <script>
   var iOS = !!navigator.platform && /iPhone|iPod/.test(navigator.platform);
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }
  </script>

it works!

[rodolfocop]

We are having a problem similar to this in our application.
If you want you can use the following code above that my friend @jvitor83 created.
Thank you for your help @danielruiz7 .

[theigl]

This works for me but without the manifest all the internal links in my application open a browser window. Did anyone run into this issue and resolve it?

[rodolfocop]

@theigl You have tried using code the @jvitor83 ?
I am saying because this problem not occur to us.

[satoshi-m8a]

Is this article helpful?
https://medium.com/@jonnykalambay/progressive-web-apps-with-oauth-dont-repeat-my-mistake-16a4063ce113

[robert-king]

@jvitor83 the modified pwacompat.js solution stopped working for me recently. Was working a couple of weeks ago. Not sure what changed, perhaps it's because I updated to the latest version of angular and firebase.
Is anyone else having issues with pwacompat? I'm just going to not use google login for PWAs, seems like PWAs aren't there yet.

[joewoodhouse]

@jvitor83 thanks for your solution, a few comments/thoughts

Looking at the pwacompat.js script, the const manifestEl is just used to get the URL of the manifest.json file. So if you're going to modify the script, you may as well just hardcode the path to the manifest file - this would remove the need for having the 2 <link> tags I think? i.e.

 <link rel="manifest" href="manifest.json">
 <script src="pwacompat.js"></script>
 <script>
   var iOS = !!navigator.platform && /iPhone|iPod|iPad/.test(navigator.platform) && !window.MSStream;
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }
 </script>

  // pwacompat.js around line 36
  function setup() {
    const manifestHref = 'manifest.json';
    const hrefFactory = buildHrefFactory([manifestHref, window.location]);
    ...

Note I also tweaked the iOS detection to include iPads and to disregard some versions of IE that tried to be iPhones.

Whilst I'm pleased that the fix is getting my app working, has anyone actually worked out how/why this fixes the OAuth issue? From reading the script, all it does is read your manifest.json file and then add some meta tags to the page accordingly (plus some other bits with splashes and icons)- I'd be interested to know which of those tags actually makes the difference, then potentially I could remove the use of the script. Anyone have any ideas?

[gmjelle]

Did this "fix" stop working?

• I have both Facebook and Google auth providers. They both are with a redirect.
• I added the pwacompat file, and used this code to "fix the bug": Google as an Auth provider doesn't work on iOS saved to homescreen #77 (comment)

When I save the PWA to homescreen and try to log in, it opens Safari, I go through the oauth2 process and am redirected to the app in the Safari browser - not in the installed PWA. When I go back to the installed PWA it's still not authed.

Authentication part:

    // this.auth is refering to firebase auth
    doSignInWithFacebook = () =>
        this.auth.signInWithRedirect(this.facebookProvider)
    doSignInWithGoogle= () =>
        this.auth.signInWithRedirect(this.googleProvider)

PWA Compat Hack HTML:

  <link rel="pwa-setup" href="manifest.json">
 <script src="./pwacompat.js"></script>
    <script >
     var iOS = !!navigator.platform && /iPhone|iPod|iPad/.test(navigator.platform) && !window.MSStream;
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }
    </script>

PWA Compat Hack, pwacompat.js ~line 36
const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

Tested on physical iPhone X with iOS 12.1.2. Tested in Xcode simulator on various simulators.

[aSegatto]

We are currently using the solution proposed incomment and it's still working.

[PutziSan]

Will Google Auth work with the next release of iOS 12.2? (Mike Hartington's comment on twitter seems to suggest this)

[powerspowers]

I just tried the solution and while it lets you start the login to your google account you cannot complete it if Google decides to send you a text message code to confirm. When you leave to get your code and then come back the page for typing in your code disappears and you have to start the sign in process again. (iOS 12.2 - redirect)

The Facebook login works now with this modification ... although, its not asking for 2-step authentication so who knows what happens if thats enabled.

[powerspowers]

I just tested in iOS 12.3.1 and google login in my web app works correctly. I was able to complete 2 step verification by leaving my web app, picking up the number via text and popping back into my app. It looks like google login on the home screen is fixed! Facebook login works correctly as well.

[MeghaB]

Closed, as the issue has been fixed.