Firebaseui-web: firebase-auth.js:188 Uncaught Error: Network Error

[mackness]

issue

In the official demo seems to be throwing this network error on slower connections:

firebase-auth.js:188 Uncaught Error: Network Error
    at firebase-auth.js:188

Here is a gif of what happened when I tried to sign in with redirect with Facebook provider:
https://imgur.com/a/SUGka

how to reproduce

1) open dev tools
2) throttle network connection to slow 3G
3) preserve network and js logs
4) click sign in with redirect
5) click continue with facebook button
6) observe network error

environment

OS: macOS Sierra v10.12
Browser: Chrome Version 62.0.3202.94 (Official Build) (64-bit)

notes

I was not able to reproduce this issue on every system. Seems to work on some computers but not others.

[bojeil-google]

I just tried it with throttling in Chrome (Slow 3G). It worked eventually and the user was signed in successfully. The underlying SDK requests timeout in 30 seconds for desktop browsers and 60 seconds for mobile browsers. So simulating slow 3G in desktop will timeout in 30 seconds. This is not practical as slow 3G networks will occur in mobile browsers where the timeout is double the duration.

[bchohon]

@bojeil-google, thanks for the prompt response! We originally encountered this error while working in a coffee shop on their public wifi. We were then able to reproduce pretty consistently back at the office via Chrome DevTools throttling. The fact that this was discovered in a real-world situation leads me to believe that we are not the only ones encountering this issue.

Any objections to increasing the timeout to 60s across all platforms?

[bojeil-google]

Personally, I think the current timeouts are very lax (30-60). 60 seconds is quite slow for desktop applications. It's hard to do anything that requires an internet connection. Some users may prefer a quick failure, rather than wait the whole time and eventually fail regardless (very poor network connections). I am open to increasing this value but want to conduct some more research on this first.

[bchohon]

Another option for potential consideration would be to think about exposing timeout value as a configuration variable, so people have the ability to override as their own use cases dictate. Anyway, food for thought. Thanks again for all of the assistance on this issue, @bojeil-google.

[bchohon]

@bojeil-google: Just wanted to share some of our data with you...

Yesterday, we sampled a small percentage of users into our Firebase registration flow. In the first twenty-four hour window, the Firebase timeout affected ~10% of the calls to Firebase; within that 10% affected, 75% of the timeouts were desktop user-agents. So, this definitely appears to be an issue for our user base and as you can see the longer timeout does appear to be more fault tolerant. We'll continue to share data as we learn more.

[tanvirshuvo]

I have experienced numerous firebase user registration failures due to slow networks. Please let me know how to resolve this issue.

[andrea-bologna]

Hello, I'm having the same issue, I can't connect with Google in any way using Chrome. What's happening???

[ljcucc]

uh.....I have the same error message @ auth.js:161

[martindlarsson]

Same thing here. I get this in my development project now and then. I get completely stuck not able to test my app. I always forget what I do to resolve it. Right now I have flushed Chromes history and cache and restarted Chrome. I have rebuild my project and restarted the development server but nothing works.
I am running firebaseui/2.5.1/firebaseui.js.

[VictorParraCant]

Same here!

[santiagohgarcia]

Same issue 👎

[rilittleford-bsu]

I am encountering the same error message as @ljcucc at auth.js:161. The interesting thing is that I set up a firebase project, set up the auth and everything works fine but when I come back a couple hours later, it does not work even though I have not changed anything on my machine or in my code. If I create a new firebase project and use that configuration, it works again.

[wti806]

@rilittleford-bsu Could you please check the value of navigator.online from browser console when you see network-error? Because we rely on navigator.onLine to determine network status. Thanks

[rilittleford-bsu]

@wti806, thank you for responding. navigator.online was true before and after I made the request. https://imgur.com/a/LQqD5

[bojeil-google]

Hey @rilittleford-bsu, there must be something unique to your environment. If this happens consistently, it would be great if you can host this somewhere so we can take a look.
Steps to reproduce this would be very helpful. It is not even clear when this error occurs on your end. Does this happen when you return from a signInWithRedirect operation?

[rilittleford-bsu]

@bojeil-google Unfortunately, I'm not getting the error consistently. I'm creating a React app with create-react-app (https://github.com/facebook/create-react-app) and using the React Wrapper for firebaseUI Web (https://github.com/firebase/firebaseui-web-react). I'm using this example code: (https://github.com/firebase/firebaseui-web-react#using-firebaseauth-with-local-state). The reason I posted here was because I found the comment by @ljcucc when searching. I'll see about getting this hosted outside of my local environment and see if I can reproduce the error there. I'll comment again once I have done so. Thank you.

[rilittleford-bsu]

@bojeil-google I was able to host it outside of my local environment yesterday and I have not been able to replicate the issue. Everything is working fine now. It must be a configuration error on my machine or an issue with the local network. Thanks.

[martindlarsson]

Got this error again. It is really intermittent and seems to be happening when the browser and tab has been open for a long time. Im running my app in Chrome and has had the app reloaded in the same tab for many weeks now.
Tried restarting the development server and closing the tab but no change. There is nothing wrong with my connection to internet.

navigator.online is false in my case.

https://imgur.com/a/Xj78P

[martindlarsson]

I just restarted Chrome and now the error is gone. The interesting thing is that when I opened my app again I was already logged in!

[bojeil-google]

This is the navigator.onLine issue in the underlying Auth SDK. We are trying to figure out a good compromise on this. The thing is if the network is clearly offline, there is no point sending the request and waiting for it to timeout. However, this is unreliable in some cases and returns a false alert. We need to find some other confirmation signal in that case.

[akurdyukov]

I have this problem in Chrome. But I see login window when I open the app in Chrome Incognito Window. Safari works alright.

[akurdyukov]

I found that the problem was in FireBase redirects. I added rewrite for /__ which is illegal. Removed that, now works.

[hiepxanh]

how to add rewrite for /__ sir? @akurdyukov

[akurdyukov]

Well, I just added only the files I need to rewrite. Please see https://github.com/akurdyukov/stratotalk

[hiepxanh]

where that line of code? I can't find it :( please help me

[akurdyukov]

AFAIR, everything is in firebase.json

[nicolasgarnier]

Just to sum up this bug: Sometimes navigator.online is false despite the user being online. FirebaseUI depends on this so we'd need find a more reliable way to check for user online/offline status.

[bojeil-google]

We had fixed an issue in that in the core SDK:
https://firebase.google.com/support/release-notes/js#4.13.0
I am closing this.

[Thkasis]

I am having this issue with the latest 5.8.8 and firebase ui 3.5.2. I tested one version lower too and I'm still getting the error
firebase-auth.js:1 Uncaught Error: Network Error
at firebase-auth.js:1

[MatthewPringle]

Also seeing this error
Error: Network Error
auth.esm.js:5240

[collinmesser]

I had this error for a while and saw multiple people posting about in various places. Here's what worked for me. My click event for the auth call was on a button inside of a <form> element. Removing the <form> element makes everything work.

[hariria]

Hi, I'm noticing this error as well...
auth.esm.js:255 Uncaught Error: Network Error
at auth.esm.js:255
My div is not wrapped in a <form> element

[carloscastelano]

Any updates about this issue? I'm still looking for a solution..

[berndartmueller]

https://github.com/firebase/firebase-js-sdk/issues/3081

[MAlecuPenta]

I'm still getting this issue when using firebaseui with React

• the <form> tag is in firebaseui
• I'm getting this error only with custom auth domain - but I'm using firebase hosting

[lordlpua]

Yep, we have the same problems. And can't resolve it. We have

(Redux Form, Formsy) And button with a click inside, not submit. And this problem we see every day. How can I fix it??

[vishalsinghpoker]

Try closing your button in tag and use type as button. using type button without form tag working for me

[mustafa89]

Also getting the same error on React.