20

I'm running into a strange problem with my Cordova Project that uses Firebase. It works perfectly in browser, but when I run my app on an emulator or phone (Android), (at least) the first login attempt per load always results in an "Auth/network-request-failed" error. Here is my relevant Firebase code:

<!-- Import Firebase JS -->
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>

<!-- Import Firebase Authentication-->
<script src="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.4/firebase-ui-auth.css" />

And here is my security meta-tag (which I heard could result in a similar problem):

<meta "content_security_policy": "script-src 'self' https://apis.google.com https://www.googleapis.com https://securetoken.googleapis.com; object-src 'self'", "permissions": ["https://*/*","activeTab"]>

EDIT: I have not changed any code but now I experience this error occasionally in browser (Chrome) as well, if less often. I can't find a pattern, although the issue seems to go away in a session after the user registers. Any help would be greatly appreciated, thank you so much.

tony19
  • 125,647
  • 18
  • 229
  • 307
Lior Hirschfeld
  • 751
  • 1
  • 6
  • 12
  • Also deal with this problem. Solution here: https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – Lukas Aug 22 '17 at 21:57
  • 1
    Just to complement Lior's answer. Actually, the problem usually isn't with the button type being equal to 'submit', but the lack of an event.preventDefault() in the click handler. – Vitor Rodrigues Jan 22 '21 at 18:23
  • Did you found any solution for this? I'm also stuck on this problem. – Mayank Kataria Feb 28 '22 at 20:11

15 Answers15

41

I arrived at this answer with the help of Firebase support. It turns out that my button which was calling the login function was of type "submit," which was causing my page to refresh every time it was pressed. This would interrupt the authentication process, resulting in the "network-request-failed" error. To fix this get rid of type="submit" in the button.

Lior Hirschfeld
  • 751
  • 1
  • 6
  • 12
  • 4
    My button wasn't of type submit but my button was in a form it wasn't working either. After removing the form element it worked. Thanks a lot, I'd still be at it in two days if it wasn't for this answer – Ced Sep 09 '17 at 21:44
  • 7
    I had this same issue and this answer sent me on the way to a fix. It turned out that my `submitHandler` for the form was bubbling, a simple `e.preventDefault()` solved the problem. – dooburt Dec 05 '18 at 16:52
  • This has been so explaining and helpful. Thank you so much. – luc May 15 '23 at 19:06
11

Finally, I fixed this problem!

  1. Don't use form tag! I changed form tag into div tag then it works!!!
  2. Don't use input type="submit", as someone's answer up there.

So far, I am not really sure why. But that's the two places I have changed, and then the firebase sign up network problem finally fixed.

Jann
  • 1,799
  • 3
  • 21
  • 38
mengru zhang
  • 379
  • 3
  • 9
5

I have spent a great deal of time confused about this and it was only when I disabled the CORS Chrome extension when it began to work on Chrome.

Chrome Canary and Firefox without any CORS extension were fine too. I do not believe the submit type is at all relevant.

Jay Ordway
  • 1,708
  • 2
  • 11
  • 33
3

Well by the [CORS ORIGIN POLICY]1 chrome will not allow you to access any other sites without(http, https). It will Resolved once you host your website, for temporary testing purpose you can use Mozilla Firefox which allows you to access. Have a nice day!!

Ragul CS
  • 417
  • 3
  • 11
3

It's been second time that I have this issue and spend some unreasonable time trying to find solution. So I'm posting this for my future self (and hopefully someone else):

Make sure you either don't use firebase emulator or your emulator is enabled.

Boris Zagoruiko
  • 12,705
  • 15
  • 47
  • 79
2

If you are using the "HTTPS Everywhere" extension, then go to the "HTTPS Everywhere" settings and click on the "Disable HTTPS Everywhere for this site" button. It helped me.

ARSLN
  • 21
  • 2
2

For those who are experiencing this issue using ReactJS or NextJS, one possible issue is that you are passing a reference to the input field, instead of the value of the field, to Firebase.

When using the useState or useRef hooks, ensure that you pass the value of the input field, for example emailRef.current.value.

Leon van Zyl
  • 121
  • 5
  • This is why you scroll down to the very bottom of the Stack Overflow answer page... Saved me from hours of debugging when the problem was really that simple. – BestCoderBoy Jun 27 '23 at 23:10
1

My problem was I was caching everything in my serviceworker.js file. So I added these lines:

if (
    url.origin === "https://securetoken.googleapis.com" ||
    url.origin === "https://apis.google.com" ||
    url.origin === "https://www.googleapis.com"
) {
    return;
}
ayyfahim
  • 134
  • 1
  • 3
1

For me I just added some event.preventdefault() and it works very well.

document.getElementById("submit").addEventListener("click", function(event){
  event.preventDefault()
});
Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
Pratham
  • 7
  • 4
0

Disable CORS Chrome plugin worked for me

Christer
  • 2,746
  • 3
  • 31
  • 50
0

So this happened to me and it turned out Privacy Badger suddenly added my app's firebase domain to its block lists, randomly and without warning after months of Mr. Badger being okay with it...

Allowing the firebase domain to set cookies (moving the slider all the way to the right) fixed the issue.

Steven Huang
  • 490
  • 4
  • 16
0

struggled with this error for several hours and got every single solution that people pointed.

One of them finally solved my problem. I'm not sure which one will solve yours, so try everything.

  1. Deactivate your emulators (Close the terminal holding your local hosts),
  2. Get the button out of a form tag, prefer div tag
  3. Get the button out of a submit type,
  4. Add this piece of code for your button don't bubble:
  5. If you're indeed testing on localhost, prefer 127.0.0.1/ to localhost/

document.getElementById('signup-btn').addEventListener('click', function(event){
    event.preventDefault()

  1. If you are using the "HTTPS Everywhere" extension, then go to the "HTTPS Everywhere" settings and click on the "Disable HTTPS Everywhere for this site" button. It helped me.

  2. Disable CORS Chrome plugin

  3. Make sure you're passing actual values instead of the reference to the button

  4. prefer testing on chrome instead of edge.

faynercosta
  • 1
  • 3
0

Situation 1:

  • first, you check all the parameters passed in the function if some of the parameters are undefined at that time this error occurs.

Situation 2:

  • otherwise, your submission handler function does not contain event.preventDefault() at that time this error may occur.
JASH_PATEL
  • 1
  • 1
0

Sometimes this error just shows up because you don't have a proper internet connection.

Just make sure your system is connected to the internet properly.

And start again your program for execution.

Zahid Sikdar
  • 41
  • 4
0

Make sure you ran firebase emulators:start --only auth

Jae Lee
  • 31
  • 5