If PWA Installed, Chrome Login With Google Auth Breaks Redirect

[mdrideout]

[REQUIRED] Describe your environment

• Operating System version: Android 7.0
• Browser version: Chrome 69.0.3497.100
• Firebase UI version: 3.4.1
• Firebase SDK version: 5.5.5

[REQUIRED] Describe the problem

This is similar to issue #221 but different, because the login flow breaks in chrome if the PWA is installed.

Steps to reproduce:

1. Go through the "add to homescreen" process for your PWA
2. Close the PWA, and go to your site with Google Chrome
3. Attempt to login with Google Auth using redirect flow
4. Choose the account
5. Redirect tries to open the PWA, the PWA load screen briefly flashes and disappears, showing chrome again, chrome sits on a semi-transparent display of the account choosing page with the progress indicator flowing above. Never completes the redirect back to the website.

• If you have not yet added the PWA to homescreen, the chrome login works fine.
• If you uninstall the PWA, chrome login works fine
• If you attempt to login from within the PWA, the login flow works fine.

Update

• Also happens if I comment out credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO to use the default
• Only happens when there are multiple chrome users to select from on the account chooser page. Does not happen when there is a default google account that logs in automatically.

Relevant Code:

        // Conditionally build signInOptions
        let signInOptions = [];

        // Add Email / Password Auth
        signInOptions.push(firebaseAuth.EmailAuthProvider.PROVIDER_ID);

        // Add Google Auth only if not Facebook browser
        if(browser !== "facebook") {
            signInOptions.push({
                // Google provider must be enabled in Firebase Console to support one-tap sign-up.
                provider: firebaseAuth.GoogleAuthProvider.PROVIDER_ID,
                // Required to enable this provider in one-tap sign-up.
                authMethod: 'https://accounts.google.com',
                // Required to enable ID token credentials for this provider.
                // This can be obtained from the Credentials page of the Google APIs
                // console.
                clientId: ''
            })
        }

        var uiConfig = {
            signInOptions,
            signInFlow: "redirect",
            callbacks: {
                signInSuccessWithAuthResult: (authResult, redirectUrl) => {
                    // Anything we want to happen after signin success
                    // console.log("Auth Result: ", authResult);

                    postSignInAction(authResult);

                    // Disable overlay mode
                    toggleOverlayModeAction(false);
                    
                    // Scroll to top of page
                    window.scrollTo(0, 0);

                    return false;
                }
            },
            // Terms of service url.
            tosUrl: 'xx',
            privacyPolicyUrl: 'xx',
            // Required to enable one-tap sign-up credential helper.
            credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
        };

        // Initialize the FirebaseUI Widget using Firebase.
        // Checks to see if we have an existing instance, if not, creates a new one
        var ui = firebaseui.auth.AuthUI.getInstance();
        if (!ui) {
            ui = new firebaseui.auth.AuthUI(firebaseAuth());
        }

        // Auto sign-in for returning users is enabled by default except when prompt is
        // not 'none' in the Google provider custom parameters. To manually disable:
        ui.disableAutoSignIn();

        // The start method only if we're done checking the authState
        ui.start('#fbui-container', uiConfig);

        // Enable overlay mode
        toggleOverlayModeAction(true);
    }

[rejhgadellaa]

This issue isn't new (although I think it was fixed and is now broken again).

You can work around this by using the "popup" flow if the window is in standalone mode:

{
  // ...
  signInFlow: ("matchMedia" in window && window.matchMedia('(display-mode: standalone)').matches)
    ? "popup" : "redirect",
}

[sebastianovide]

just to confirm that I can still reproduce it and that with "popup" works well

[gbdubs]

Can also confirm that I can still reproduce this bug, and the popup solution also still works.

[krisgerhard]

+1

[JanOschii]

@mdrideout How do you solved it? I am exactly at your point now. Everything works fine until I install the PWA on Android and try to login in chrome.

• If you have not yet added the PWA to homescreen (installed the app), the chrome login works fine.
• If you attempt to login from within the PWA, the login flow works fine.
• If you have a installed PWA and try to login from androids chrome browser, it fails (see description below)
• If you uninstall the PWA, the chrome login works fine again

If i start the authentication process from the browser (with an installed PWA), then the browser is opening the PWA to login from there. We get the error message "Unable to process request due to missing initial state..." Also, the successfull login is not transfered back to the browser.

Seems logical for me, cause the initial state was not defined by the PWA App — it was started by the browser. So I would think, I should prevent the auth process from opening the PWA App. Maybe there is a setting for this?

How to solve this?

Also a popup is not a solution, cause popups are blocked on some devices and browsers like iPads.