<firebase-auth> fail to signInWithRedirect() from both mobile Chrome and installed PWA, after PWA is installed (i.e. Add to homescreen)?

[andrewspy]

Description

signInWithRedirect() fail to authenticate and redirect when sign-in from both mobile Chrome and PWA, after the PWA is installed (i.e. Add to homescreen).

I have posted similar issue with Stackoverflow without much luck: How to signInWithRedirect() without redirecting it to the Installed WebApp?

(Note: Everything is working properly if PWA is not installed/Add to homescreen)

Expected outcome

signInWithRedirect() should properly authenticate and redirect to mobile Chrome and installed PWA correspondingly.

Actual outcome

When sign-in from mobile Chrome

Mobile Chrome will redirect to "Sign in - Google Accounts" page, and after proper authentication, will redirect to the mobile Chrome for a brief moment, and back to "Sign in - Google Accounts" page with a never ending loading progress bar on top.

When sign-in from installed PWA (i.e. Add to homescreen)

PWA will redirect to "Sign in - Google Accounts" page, and after authentication, will return back to the PWA as if it's not authenticated.

Live Demo

https://x-psk3-init.firebaseapp.com/login

Steps to reproduce

This is a code snippet that I am using:-

  tapGoogleSignIn() {
    // Always allow select account, skip auto login
    let provider = new firebase.auth.GoogleAuthProvider();
    // provider.addScope('https://www.googleapis.com/auth/plus.login');
    provider.setCustomParameters({
      prompt: 'select_account',
    });

    this.$.auth.signInWithRedirect(provider)
      .catch((error) => {
        console.log('error:', error);
      });
  }

Browsers Affected

• [x] Chrome v65 - Android
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[mariojfduarte]

Having the exact same problem.

[andrewspy]

Does anyone know what is root cause of the issue? Is it a Google Auth, or a Chrome issue, or if there is any way to workaround it?

As of now, this issue is rendering all user of "Add to Homescreen" unable to login (at least with Google Provider, haven't try other OAuth provider).

[mbleigh]

Make sure your service worker isn't intercepting requests to /__/*

On Tue, Mar 20, 2018, 10:31 PM andrewspy notifications@github.com wrote:

Does anyone know what is root cause of the issue? Is it a Google Auth, or a Chrome issue, or if there is any way to workaround it?

As of now, this issue is rendering all user of "Add to Homescreen" unable to login (at least with Google Provider, haven't try other OAuth provider).

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/firebase/polymerfire/issues/332#issuecomment-374837571, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAD_nYQttCmdpNlQGD2cRrqgme2U6QCks5tgeXNgaJpZM4Sm9_E .

[andrewspy]

@mbleigh I have already bypass /__/* inside the service worker, and the fact that signing in Google without "Add to Homescreen" works flawlessly means service worker is working as expected in my case.

[andrewspy]

I have added a minimal, complete, and verifiable demo based on PSK at the following, and hope that someone can have a look:-

https://x-psk3-init.firebaseapp.com/login

(Note: Make sure to select login view AFTER you have "Add to Homescreen" to see the problem)

Source for my-login.html as follow:-

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-login">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <firebase-auth id="auth"
        user="{{user}}"
        status-known="{{statusKnown}}"
        signed-in="{{signedIn}}">
    </firebase-auth>

    <div class="card">
      <h1>Login</h1>
      <p>
        Status known: [[statusKnown]]<br>
        Signed in: [[signedIn]]
      </p>
      <p>
        <input type="button" value="Sign In (Google)" on-click="tapSignIn">
        <input type="button" value="Sign Out" on-click="tapSignOut">
      </p>
    </div>
  </template>

  <script>
    class MyLogin extends Polymer.Element {
      static get is() { return 'my-login'; }

      tapSignIn() {
        console.log('tapSignIn():');

        // Always allow select account, skip auto login
        let provider = new firebase.auth.GoogleAuthProvider();
        // provider.addScope('https://www.googleapis.com/auth/plus.login');
        provider.setCustomParameters({
          prompt: 'select_account',
        });

        // Using signInWithRedirect() to for mobile device.
        this.$.auth.signInWithRedirect(provider)
          .catch((error) => {
            console.log('error:', error);
          });
      }

      tapSignOut() {
        console.log('tapSignOut():');

        this.$.auth.signOut().then((res) => {
          // Redirect upon success?
        }).catch((error) => {
          console.log('error:', error);
        });
      }
    }

    window.customElements.define(MyLogin.is, MyLogin);
  </script>
</dom-module>

[crobinson42]

I am also experiencing this same issue but not using this library, only the firebase js sdk library. Seems the PWA / "add to home screen" is the cause of the probablem and rootly related to firebase js sdk and how the chrome browser.

[JaySunSyn]

Same here on mobile Safari iOS 11.3.

This is a PWA deal breaker :(

See also https://github.com/firebase/firebase-js-sdk/issues/77

[chakrachi]

experiencing the same issue on my end after installing to homescreen, it used to work before....

[JaySunSyn]

Same on iOS 11.3.1

[zbolo]

Hi, I've the same problem but I've found a way to make it works on android installed pwa (not suitable for production). This is my case:

-> in my app go to login view -> login using Google as provider -> redirect to accounts.google.com then redirect back to installed pwa without successful login (ui.isPendingRedirect() is false) -> go again to login view -> redirect to accounts.google.com and WITHOUT select an account, close the page with the X on top-left -> now if I look on my pwa I'm logged in

[kirillgroshkov]

deal breaker indeed:(

[iSuslov]

Same here..

[andrewspy]

It seems the problem has been resolved in Android Chrome v67. Closing the issue.

[mgiuca]

Hi,

I believe this issue is due to w3c/manifest#646. This isn't a browser-specific issue, but actually a problem with the PWA spec which requires browsers to open out-of-scope links in a separate browsing context (which causes all sorts of issues with redirects).

I've heard reports that this is still an issue on Chrome Desktop (which follows the spec). I would expect it to also be an issue on Firefox Android (which follows the spec). It was resolved in Android Chrome 67 by violating the spec (because this is one of our top complaints).

We will be fixing it similarly on Chrome Desktop in https://crbug.com/853593, and I am also proposing a (breaking) fix to the spec text in w3c/manifest#701.

[aSegatto]

It seems the problem has been resolved in Android Chrome v67. Closing the issue.

The issue was solved only on mobile chrome, desktop is still affected...

[mgiuca]

1. w3c/manifest#701 has landed, so the spec now requires the correct behaviour. Browsers will have to update.
2. If all goes according to plan, this will be fixed in Chrome on all Desktop platforms in v71. https://crrev.com/c/1272635