Progressive Web App (PWA) in standalone mode OAuth error

Question

After I saved my PWA (Test App) built using Create React App to homescreen and launched the app in standalone mode on android using chrome and iOS using safari. Then in the app I initiate Firebase method signInWithPopup(GoogleProvider) the device asks me if I want to open the action with Test App or other browsers installed on device i.e chrome, firefox. If I select to open with my Test App the popup opens and I select the correct Google account.

Error: After the google account selection the popup closes without ever redirecting back to my Test App.

If I instead to open the Firebase method signInWithPopup(GoogleProvider) with chrome browser and not my Test App the popup opens for google account selection and after I select the google account the popup closes and redirects back to the Test App momentarily and then

Error: directs back to chrome tab where is asks for google account to select while showing a loading indicator, and just hangs there.

There are no console error or warnings that come up .

Note 1: The error of popup not closing and staying in loading also occurs if I add the App to homescreen on a Windows 10 x64 machine using Version 64.0.3259.0 (Official Build) canary (64-bit) and launch as a standalone window.

Note 2: The error also occurs for signInWithPopup(Facebookprovider) and signInWithPopup(Twitterprovider) Also If I uninstall app from Homescreen and launch purely in browser the signing in OAuth flow works fine.

Note 3: After further troubleshooting it seems the error more specifically occurs when user input is required in the OAuth popup. i.e If for example if user has previously given the Test App permissions through Facebook, the flow works fine and the popup closes. Also if only a single google account is detected and it has previously given app OAuth permissions then the popup works as it should. But If multiple google accounts exists on device then the user has to input a selection of which account to sign in through --> this leads to the previously mentioned error again. And using Twitter OAuth the error occurs every-time because twitter popup requires user to select Authorize App every-time.

UPDATE: I believe this may have something to do with google chrome recent changes to OAuth from Webview.

GIf of the error on windows machine: notice the popup for twitter auth never closes, even after authorizing the app, same thing occurs for google and facebook OAuth.

Answer 1

Reading Google documentation:

https://firebase.google.com/docs/auth/web/google-signin

Authenticate with Firebase using the Google provider object. You can prompt your users to sign in with their Google Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

So you have 2 options:

1. firebase.auth().signInWithPopup(provider)
2. firebase.auth().signInWithRedirect(provider)

The second must be used when you are into a mobile device.

So the question is: How I detect when I running into a mobile device ?

Code must be something like:

  if ( isInMobileDevice) {

   firebase.auth().getRedirectResult().then(function(result) { .... }

  }
  else {

  firebase.auth().signInWithPopup(provider).then(function(result) { .... }
}

Sorry, Im still searching the way to get the correct value (true/false) into "isInMobileDevice"

Answer 2

you can stablish in the manifest of the app "display:standalone" then detect the launch mode like this

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

Answer 3

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