Firebase-js-sdk: auth/network-request-failed with Google signInWithPopup

[clayharris]

[READ] Step 1: Are you in the right place?

• For issues or feature requests related to __the code in this repository__
  file a Github issue.
  
  
  
  • If this is a __feature request__ make sure the issue title starts with "FR:".
  
  
• For general technical questions, post a question on StackOverflow
  with the firebase tag.
• For general Firebase discussion, use the firebase-talk
  google group.
• For help troubleshooting your application that does not fall under one
  of the above categories, reach out to the personalized
  Firebase support channel.

[REQUIRED] Step 2: Describe your environment

• Operating System version: OSX 10.12.4
• Firebase SDK version: 4.0.0
• Library version: _____
• Firebase Product: auth (auth, database, storage, etc)

[REQUIRED] Step 3: Describe the problem

Steps to reproduce:

What happened? How can we make the problem occur?
This could be a description, log/console output, etc.

On signInWithPopup via Google provider in Chrome 58.0.3029.110 (64-bit), signin popup displays no content (white page at about:blank) and then closes with a message in the console.

Sigin error N {code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."}
__stack_frame_overlay_proxy_console__ @ proxyConsole.js:43
(anonymous) @ App.js:96
e.lb @ auth.js:49
Ad @ auth.js:52 
wd @ auth.js:52 
A.Re @ auth.js:51
Xc @ auth.js:43
auth.js:157 Uncaught Error: Network Error
    at auth.js:157

This persists for my Chrome profile both with locally hosted instance and deployed copy of the app. It works normally in Safari and Firefox, so far. It also works (at least initially) in incognito mode for fresh launches, but it has occurred in incognito mode.

I have tried removing local storage, clearing cache, disabling cache via devtools, all with no luck. Something appears to be stored somewhere and is preventing google auth from loading correctly, or even launching the URL for auth.

Relevant Code:

ReactJS (15.5.4) application, with firebase initialized in componentDidMount(). Signin button onClick:

signIn() {
    const provider = new firebase.auth.GoogleAuthProvider();
    this.firebase.auth().signInWithPopup(provider)
        .then((result) => console.log('Signin result', result))
        .catch((error) => console.error('Sigin error', error));
  }

The catch triggers providing the error seen above.

I've verified that the initialization params are same as provided in the firebase console (though I felt they were ok due to it working in other browsers etc).

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[samtstern]

@jshcrowthe can you go in the webhooks panel and get me the whole event data for this one? The bot clearly failed to categorize it but I can't tell why from my functions logs. Specifically I want the issue opened event.

[bojeil-google]

Hey @Lanik42 are you seeing any network or any type of errors in the console? Would be great if you can provide a snapshot for that log when the signInWithPopup flow is triggered.
It would be even greater if you can provide minimal reactJS code to reproduce this. If I can't reproduce this, I basically can't fix it.

[mbleigh]

Do you have a service worker? It's likely serving up fallback content on
/__/auth/* which is reserved by Firebase.

On Wed, May 24, 2017, 7:45 PM bojeil-google [e-mail]
wrote:

Hey @Lanik42 https://github.com/lanik42 are you seeing any network or
any type of errors in the console? Would be great if you can provide a
snapshot for that log when the signInWithPopup flow is triggered.
It would be even greater if you can provide minimal reactJS code to
reproduce this. If I can't reproduce this, I basically can't fix it.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-js-sdk/issues/22#issuecomment-303907426,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAD_gmUkuSlGXr2ZrDx4bqwlqJbfblGks5r9OtFgaJpZM4Nkd6W
.

[clayharris]

@mbleigh I don't have a service worker of my own, but I see one from firebase when it attempts the popup flow. I see firebase loading a related iframe link (including screenshot of logs) that references that URL though.

@bojeil-google I'm attaching a screenshot of the log. My app is pretty simple at this stage - you can see it at https://coinage-166416.firebaseapp.com/ and try to login - in my case, I'd successfully logged in and out a couple of times, and then it stopped logging in and I got the white popup as mentioned.

The iframe url in full is https://coinage-166416.firebaseapp.com/__/auth/iframe?apiKey=AIzaSyB7BM9RgBCPJtu4vXyngnT9_nkwAgFU-KE&appName=%5BDEFAULT%5D&v=4.0.0&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.qXICbb5X-_w.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPa22lAm1LAtKY0sWwDzmRpS0gEKw

[bojeil-google]

hey @Lanik42. Thank you for the logs and the app link. This was extremely helpful. As @mbleigh speculated, this is clearly from the service worker. Load the page, disable the service worker. Then try to login by clicking the LOGIN button. The operation will work as expected. You need to exclude anything from /__/auth/ from your service worker fetch event handler.

[mbleigh]

My guess is that whatever app generator or boilerplate you used has a service worker with a catch-all fallback. You'll need to figure out how to conifgure that to exclude the /__ namespace, as those URLs are reserved for Firebase use.

See this section of the docs for a bit more info.

[clayharris]

You were right - I'd use the create-react-app generator, and apparently they added support for PWAs since the last time I used it, and I didn't even realize it. unregistering the service worker fixed it. Thanks for pointing me in the right direction!