signInWithCredential error code auth/network-request-failed

[uzumakinaruto123]

Version info

Angular: 2.0.0-rc4

Ionic: 2.0.0-beta.35

Firebase: 3.3.0

AngularFire: 2.0.0-beta.2

Google plus sign in using signInWithCredential(idToken) .

var provider = (<any> firebase.auth.GoogleAuthProvider).credential(null,res.idToken);

     firebase.auth().signInWithCredential(provider)
      .then((success) => {
        this.navCtrl.setRoot(TabsPage);
        console.log("Firebase success: " + JSON.stringify(success));
      })
      .catch((error) => {
        this.error = error
        console.log("Firebase failure: " + JSON.stringify(error));
      });

Google sign is sucessfull and idToken is received. But , it gives 404 (Not Found) on https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=<My-Api-Key> at firebase.auth().signInWithCredential() method.

Debug output

** Errors in the JavaScript console **

POST 
https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key=My-key 404 (Not Found)                                      zone.js:101

Firebase failure: {"code":"auth/network-request-failed","message":"A network error (such as timeout, interrupted connection or unreachable host) has occurred."}       app.bundle.js:254

Expected behavior

Should sign in into firebase using google sign in access token.

[katowulf]

How often does this occur? Every time? 10% of the time? How many attempts did you make and over white time period? Can you upgrade to the latest (currently 3.4.0) and try again? If it's still an issue, we'll probably need a jsfiddle or plunkr that reproduces this to be much help, and it's probably not AngularFire-related.

[otherjohn]

I am getting the same behavior happen. But I don't know what do to put it on plunkr or jsfiddle.
I used this tutorial though: https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/

https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=MYKEYWASHERE Failed to load resource: the server responded with a status of 404 ()

XMLHttpRequest cannot load https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=MYKEYWASHERE. Response for preflight has invalid HTTP status code 404

R {code: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."}

[otherjohn]

Damn, right after posting I decided to try loading the code in firefox instead of google chrome. I didn't have an issue! This is a Google Chrome issue.
Aggh. I can't believe I wasted so much time on this.

[katowulf]

Nice! Well that's a useful note. It's at least a starting point for a fix. What's the minimal code needed to reproduce this? Can it be recreated with vanilla Firebase or only if AngularFire is involved? If we can whittle down the scope just a bit more, I can start looking for a solution.

[otherjohn]

I have the following via localhost:8100:
// stripped out unnecessary code

The login page has a click action called loginUser()
Error happens on clicking the loginUser.
login.ts page

import {AngularFire, AuthProviders, AuthMethods} from "angularfire2";

@Component({
    selector: 'page-login',
    templateUrl: 'template.html'
})
export class LoginPage {
    user = {email: 'myemail@domain.com', password: 'mypass'}; // used for testing
    constructor(private af: AngularFire) { }
    loginUser(){
         this.af.auth.login(this.user,{
             provider: AuthProviders.Password,
             method: AuthMethods.Password
         }).then((user)  => {
            console.log('user',user);
        }).catch((error) => {
            console.error(error);
        });
    }
}

In firefox it works just fine. In google chrome (Version 53.0.2785.143 (64-bit)) Mac, it does not.

[otherjohn]

Restart fixed the issue on google chrome.

[uzumakinaruto123]

I actually updated my Ionic to final version of angular 2 and also updated angularfire2 firebase. The issue was not present in the updated version , so I couldn't reproduce it. Can be closed. I think update is the solution

[kleeb]

I am having the same with all updated libraries, but only on iOS native.
Tried custom auth and anonymous. All work for Android native, as well as webapp chrome, firefox and Safari. Only failing on iOS (tried iOS 9 and 10 + simulator).

Ionic 2.0.0-rc.1
angular 2.0.0
firebase 3.5.1
angularfire2 2.0.0-beta.5

User is being created, but methods are throwing exceptions, which makes it impossible to retrieve the user id.
I guess there is some problem with Firebase response codes on iOS.

[hughred22]

I am also on Ionic 2.0.0-rc.1. I notice error as below:

I already logged in with Google OAuth. It is when I refresh the google chrome browser and see this error. And it is not all the time. It is like 60% of the time when I refresh the browser. I see this. And this is pretty recent as well. Now sure why....

[ikabod-bubwit]

Hi,
I have had the same problem with signInWithCredential which returns an error code auth/network-request-failed on Android, I have yet to test on IOS.

• firebase#3.1.0
• angularfire#2.0.1
• Developer should be able to declaratively set a queried, interactive Firebase collection to a class field #1.5.3
• ionic#1.3.1

I am posting how I fixed my issue here to hopefully provide a possible solution to someone who may be experiencing the same issue. I have 2 identical ionic projects with the same exact versions of the previously mentioned libraries. The prototype project with the working signInWithCredential which I use to develop new features and my main project. The code in the main project is an exact copy and paste of my previous project yet my main project was having this issue.
I found that I had the cordova-plugin-whitelist installed on my prototype project.
Installing cordova-plugin-whitelist in my main project and adding the following lines on my config.xml file fixed my issue.

<!-- Don't block any requests -->
<access origin="*" />
<!-- or -->
<access origin="https://*.googleapis.com" />

[hughred22]

@ikabod-bubwit Try your fix and it is not helping on Chorme browser situation (I have not tested on iOs yet). Whitelist plugin is only in Cordova situation NOT in ionic server. I am in Ionic RC2 now and still same problem. The error show up like 80% of the time when hard refresh. Please help!

[wilsoncx]

Has anyone managed to solve this problem, I have the same problem in my ionic 2 app

[dcinadr]

I am also getting this same issue. Any solutions??

[uzumakinaruto123]

I am facing this again ! Time to reopen I guess...

[dcinadr]

I should note that this only happens when I have dev tools open in chrome.

[joshgarwood]

This is also an issue for me in Ionic RC4 using the latest firebase version

[uzumakinaruto123]

I tried it twice , and can confirm we dont get this error on firebase : 3.6.1 version 3.6.5 still has the issue.

So , use version 3.6.1

[ghost]

Still, does not work even with firebase 3.6.1. I tried running the app in Firefox or Edge and it worked nicely. I don't know what is causing this.

[dcinadr]

angularfire2 dependency for firebase is v3.3.0

[ghost]

@dcinadr This really did the job mate, thanks a lot!

[apatton724]

For anyone using firebase and phonegap/cordova, I ran into the same issue.

Using firebase version 3.6.1 fixed the issue for me.

[zwhitchcox]

This happens for me too on Chrome, even if I'm using 3.6.1 of firebase. However, it works on firefox

[zwhitchcox]

@dcinadr I don't think it has to do with angularfire, it has to do with firebase itself. I'm using react and still getting the error.

[zwhitchcox]

[redacted]

[katowulf]

We do love feedback, and appreciate it. But please keep it civil, constructive and on topic.

[gerhardcit]

@apatton724 I can confirm this. I use
#1.5.8
ionic#1.3.2
firebase#3.6.1
angularfire#2.3.0

with firebase#3.6.6, when using $firebaseAuth().$signInWithCustomToken on and Android app (6.0 and 4.4) I get the "auth/network request failed even though I have already logged a connection info to the firebase db.
This does NOT happen in a browser, or on iOS (same app) only Android app.
There seem to be something wrong with the timing of sign-in of firebaseAuth.

if you watch $firebaseAuth.$onAuthStateChanged you will see it fires twice when you use
$firebaseAuth().$signInWithCustomToken.
Once without a firebaseUser and once with the actual signed in user. (Ver 3.6.1)
In ver 3.6.5 and 3.6.6, and 3.6.7 the 2nd $onAuthStateChanged does NOT fire (because the signInWithCustomToken does not complete)

[katowulf]

Can you reproduce the same behavior without AngularFire, by dropping to the Firebase SDK and running auth?

[whispyy]

also have the same issue, i tried this following :

• add cordova-whitelist-plugin
• check meta content-security-policy
• remove "form" balise, to avoid ng-submit

using :
ionic#1.3.1
firebase#3.6.6

[AbdullahAdeeb]

I'm facing the same issue building Ionic2/AngularFire2 app and also with Ionic2/Firebase sdk.
It works fine with serve on chrome and firefox but issue occurs with run on browser or android (i.e. ionic run android) or run using cordova is essentially the same. Therefore, it seems like its an issue with cordova and firebase.

Those are my dependencies:
cordova@6.3.1
firebase@3.7.5
angularfire2 @2.0.0-beta.7-pre
angular@2.4.8
ionic-angular@2.3.0
ionicons@3.0.0
rxjs@5.0.1
sw-toolbox@3.4.0
typescript@2.0.9
ionic@2.2.1

Thanks to the folks here, I was able to fix it by downgrading to firebase@3.6.1 and now its working fine on android.

[kleeb]

I feel that the most stable Firebase version with angularfire2 beta8 is 3.4.0

[dovk]

I have meanwhile moved up to Ionic3/Angular4 and all is well except for having to keep Firebase
at 3.3.0 (I tried Firebase@3.4.0 as mentioned above but it did not work).
You can see my package.json here https://github.com/dovk/ionic3-calendar
(and if anyone is looking for a simple Calendar/Datepicker - feel free to use it)

[lawlesscreation]

+1 for rolling back to Firebase 3.3.0. I've been having a problem with intermittent connections to Firebase on Android devices. But rolling back seems to have resolved the issue.

[gammafilho]

downgrade from 3.7.5 to 3.3.0 works for me.

[ghost]

I've been trying to fix this ionic/firebase issue on my android device for 2 days straight. Worked great in browser but not on android device. Downgrading to 3.3.0 did the trick. If only I found this faster -__- Thanks!

[deoxen0n2]

Hi, I'm also using ionic. I can reproduce this 100% of the time on my phone (also tested on Firefox and Chrome desktop, but never encounter this problem). cordova-plugin-whitelist is configured and has been worked in the past. I experimented a lot, the steps to reproduce is like this:

From Android phone:

1. Use login form with login button, with or without ngSubmit, does not matter
2. Tap and enter email and password
3. While device keyboard is still opened, press enter (big right arrow on some keyboards) or the login button and auth/network-request-failed will be thrown
4. Tap somewhere else to close the keyboard, press the login button and auth/network-request-failed will be thrown again
5. Tap into email or password input, press enter (big right arrow on some keyboards) or the login button and now it will log in successfully

It should has nothing to do with the keyboard or input focus / refocus but I don't have any clue either.

Finally I tried downgrading to 3.3.0 and it solved the issue. But this should not be an acceptable workaround.

I think we should also try the recent Firebase SDK 4.0.0 and since it is open sourced it should be easier to debug (https://github.com/firebase/firebase-js-sdk). I will try and if the problem still persist I think we should open the new issue there.

[brunolemos]

I have this issue with 0.5% of the user requests, which is low but that's a lot of users. (using v3.9).
Has anyone tried v4.0?

[iturn]

+1

[pvdyck]

same problem here ... inconsistent and impossible to reproduce for now.

[iturn]

I have this issue with angularfire-4.0.0

[washowasho]

Including the cordova-plugin-network-information corrected this issue for me. I confirmed that the 'navigator.onLine' was occasionally 'false', which I believe was causing Firebase to think there was an issue. Once I added the cordova-plugin-network-information to my project, the problem went away. I didn't dig deep into why, but I suspect this plugin has a better wrapper around the navigator which may be giving Firebase better information. I did confirm this problem came back after removing the plugin, but re-applying it fixes it. I will update this if I dig deeper. I hope this helps.

[brunolemos]

@washowasho interesting, so in theory this should help:

 Object.defineProperty(navigator, 'onLine', {
   get: function() { return true; },
   set: function() {}
 });

[razgriz-detroit]

@washowasho THANK YOU SO MUCH!!! Solved it for me!

[washowasho]

Looks like this may have been solved in the latest release of Firebase 4.2.0. I'll be verifying when I get a chance.

"Refactored to not use navigator.onLine for offline detection in Cordova environments."

https://firebase.google.com/support/release-notes/js#4.2.0

[ghost]

Seems like after I downgrade firebase to 3.3.0 it is resolved. Before this I was continuously getting 'auth/network-request-failed'. Let me know if there is solution for this in newer versions.

[harishmahajan]

i tried all above solutions but not works for me

[dovk]

At some point later on I moved most versions up to latest and tried again and it now works.
Here are the relevant entries in my package.json
"angularfire2": "4.0.0-rc.1",
"firebase": "4.1.3",

[derwaldgeist]

Looks like this may have been solved in the latest release of Firebase 4.2.0

Unfortunately, it isn't. With 4.4.0, the problem is still there. I'm not using angularfire2, though.

[stevenyap]

I confirm that it is not working with 4.4.0 but downgrading to 3.3.0 works for me

[derwaldgeist]

I got it working by adding cordova-plugin-network-information to my Cordova app. Downgrading to 3.3.0 did not help, since I need phone number auth.

[kimmanwky]

I have faced the same issue, and i tried most of the solution above (including downgrade to firebase 3.3.0 or add cordova-plugin), and none of them work for me.

I'm currently using firebase 4.4.0. I was able to fix the problem by adding the line below in platform/android --> AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />

My firebase signin able to go through now after adding the line. Please try see if you can make it work. I not sure why the line is missing out at the beginning.

I not sure if this is the best way of fixing it. But it should the easiest and fastest way (without downgrading or install plugin)

[derwaldgeist]

I already had this permission in my app. Still, the logon did not work reliably. The only solution I found was to either add the plugin mentioned above or override navigator.onLine to return true every time it is being called. This solved the problem as well, but seemed to be a too weird hack, especially if another plugin relies on this getter variable.

[dovk]

Can you show the code you added regarding the network plugin and where you added it? I want to check it makes things more stable. Thanks

[derwaldgeist]

It's this Cordova plugin: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-network-information/, but this would only make sense if you're building a Cordova application.

What it basically does (that fixes the Firebase problem) is to override the navigator.onLine getter. You could achieve a similar "fix" with this code:

  Object.defineProperty(navigator, 'onLine', {
      get: function() {
        return true;
      },
      set: function() {}
    });

But beware this overrides the standard navigator property onLine with a monkey-patch and thus may break other code that relies on this information. The aforementioned Cordova plugin does more than this, it uses actual native code to implement navigator.onLine.

The main reason why Firebase auth fails is that it relies on navigator.onLine returning a correct connection status. My phone - as many others - report it as false, however, even if there's a working connection. I have no clue why this happens.

[Luiz-N]

I'm not using angularfire but I am on firebase 4.4.0 and seeing this issue trying to use auth via with onAuthStateChanged and onIdTokenChanged listeners in election (an atom package specifically). I believe it was after adding the onIdTokenChanged listener and then closing my laptop and opening it up again a few hours later to see my screen flooded with this error. My guess is this has to do with my mac waking itself up periodically which establishes an internet connection but then going back to sleep which is confusing firebase.

[hiepxanh]

the same issue, I'm using universal with angularfire 2

rejection:
   { [Error: The XMLHttpRequest compatibility library was not found.]
     code: 'auth/internal-error',
     message: 'The XMLHttpRequest compatibility library was not found.',

[katowulf]

@hiepxanh "library was not found" is by no means the "same issue" as "auth/network-request-failed". Please submit a new issues.

Folks, this is a closed issue. Locking this issue to encourage value-add contributions over more "me too" and "does not work replies. Please open a new issue if you think you have done sufficient due diligence to show a bug with this lib, including specific errors/stacks/details and minimal repros with complete and minimal code/versions/sample data required to run them. Always include networking logs for issues like this as well.