[Bug] signInWithPopup creates new tab instead of popup in Chrome 59

[DanielAndrews43]

Describe your environment

• Operating System version: OSX Sierra 10.12.4
• Firebase SDK version: 4.1.2
• Firebase Product: Auth

Describe the problem

When using firebase.auth.signInWithPopup(provider) a new tab is created with the auth instead of creating a popup as it did in Chrome 58 and earlier.

https://stackoverflow.com/questions/44417724/facebook-authentication-opening-tab-instead-of-popup-in-chrome-59 seems to say that the parameter 'location=no' needs to be passed in window.open(), but this is not accessible using the SDK.

Steps to reproduce:

Create an auth button with signInWithPopup() and click on it. A new tab will pop up instead of a new popup window.

Relevant Code:

This link describes the problem perfectly.

https://stackoverflow.com/questions/44417724/facebook-authentication-opening-tab-instead-of-popup-in-chrome-59

[bojeil-google]

This is a chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=723655

[bojeil-google]

The only way we can fix it is via a hack.
We currently use something like this:
window.open('about:blank', '_blank', 'width=515,height=680,top=260,left=702,location=1,resizable=1,statusbar=1,toolbar=0');
This should open in a popup. However, chrome 59 broke this.
We'd have to set location=0 to get it to work as expected.

[bojeil-google]

The fix I mentioned is a hack in my opinion. This should be fixed on Chrome's end.

[yarnball]

Also having this issue. What is the work around? @bojeil-google could you be more specific?

Ideally I could do this in a modal even.

I was unsuccessful with this:

  handleGoogleLogin = () => {
        window.open('about:blank', '_blank', 'width=515,height=680,top=260,left=702,location=1,resizable=1,statusbar=1,toolbar=0');
        loginWithGoogle()
            .catch(function (error) {
                alert(error);
            });
  }

export function loginWithGoogle() {
    return firebaseAuth().signInWithPopup(googleProvider);
}

[bojeil-google]

This is a Chrome bug. There is no workaround. Chrome breaks this expected behavior. Please check the link: https://bugs.chromium.org/p/chromium/issues/detail?id=723655

[yarnball]

I see. Well I'm using react.js with it, and I used your "window.open" method for a new route which does the "loginWithGoogle". It opens a new window successfully.

However, I can't do 'window.close' when the sign in is complete. The promise doesn't seem to work.

Am I using it right?

This code never invokes the .'then'

'''
handleGoogleLogin = () => {
loginWithGoogle()
.catch(function (error) {
alert(error);
})
.then(window.close());
}
'''

This code causes the 'then' to happen immediately (ie before redirect even happens).

'''
export function loginWithGoogle() {
return firebaseAuth().signInWithreRedirect(googleProvider).then(window.close());;
}
'''

[bojeil-google]

Internally we call something like:
window.open('about:blank', '_blank', 'width=515,height=680,top=260,left=702,location=1,resizable=1,statusbar=1,toolbar=0');
In the current version of Chrome this opens a tab and not a popup. This is a bug in Chrome. There is not much we can do until it is fixed.

I am not sure about your case as you are using signInWithRedirect and not signInWithPopup.

[yarnball]

I'm using sign up redirect as I am opening it in a separate new window FIRST, then running the "login with Google" in that new window. How can I hook into the completion of the social sign up process?

…

On Tue, 18 Jul 2017 at 8:49 AM, bojeil-google ***@***.***> wrote: Internally we call something like: window.open('about:blank', '_blank', 'width=515,height=680,top=260,left=702,location=1,resizable=1,statusbar=1,toolbar=0'); In the current version of Chrome this opens a tab and not a popup. This is a bug in Chrome. There is not much we can do until it is fixed. I am not sure about your case as you are using signInWithRedirect and not signInWithPopup. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMcFex8SIyE7TV9U-r2o940k_-jQRdatks5sO-TlgaJpZM4N9CZc> .

[bojeil-google]

Oh, I see. So you are implementing your own sign in with popup where you open a popup and then signInWithRedirect on that window. You need to call firebase.auth().getRedirectResult() on the popup to get the result. If the popup is the same domain as the parent page, you should detect the sign-in completion without any additional work on the parent page via firebase.auth().onAuthStateChanged listener. You may need to pass the result.credential if you need the returned OAuth credential.

Let me know if I am understanding this correctly.

[yarnball]

I tried your suggestion, by doing

return firebase.auth().getRedirectResult(googleProvider)

However it gave this error:

auth.js:244 Uncaught 
O {code: "auth/argument-error", message: "getRedirectResult failed: Expected 0 arguments but got 1."}

Could you give a bit of an example? Thanks

[bojeil-google]

Check the documentation on this:
https://firebase.google.com/docs/auth/web/google-signin
When you start the sign in, you can firebase.auth().signInWithRedirect(provider)
When you return to the page and want to get back the result, you call firebase.auth().getRedirectResult()