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
• angular#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

[gopchi]

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

[gopchi]

@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 angular#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

[satyagupta]

why was it closed? there are many still facing the same issue. It works only 20% else it would keep showing network error.

[katowulf]

Checked up on this today with the auth team and they pointed out this interesting fix in the 3.6.8 release:

Could someone test this out and verify that it's fixed in 3.6.8 of the Firebase SDK? I think that will resolve many of the reports here.

[satyagupta]

@katowulf update firebase to latest 3.6.9 and still facing the same issue :(

[dcinadr]

@satyagupta is correct. It still does not work. I am using it with Ionic2 which requires angular 2.2.1. This requires me to use angularfire2 no later than v2.0.0-beta.6. I am not sure if this causes an issue. Cause I have another project that uses the latest angularfire2 and the latest angular (not an ionic project) and there is no problems on that project.

[satyagupta]

@dcinadr can you share the version/specs of other project where it works? i ahve been trying a lot of things but its does not fix it.

[katowulf]

For the "does not work" replies, please open a new issue, with more specific errors/stacks/details and minimal repros, as well as networking logs. To move this forward, we'll need to build a strong case here showing that this is an issue in the SDK and not related to the many other moving parts in an Ionic build.

[dcinadr]

@satyagupta - here are my dependencies

"dependencies": {
    "@angular/common": "2.4.3",
    "@angular/compiler": "2.4.3",
    "@angular/core": "2.4.3",
    "@angular/forms": "2.4.3",
    "@angular/http": "2.4.3",
    "@angular/platform-browser": "2.4.3",
    "@angular/platform-browser-dynamic": "2.4.3",
    "@angular/router": "3.4.3",
    "@angular/upgrade": "2.4.3",
    "@types/lodash": "4.14.50",
    "angular-calendar": "0.6.2",
    "angular2-datatable": "0.5.2",
    "angular2-ladda": "^1.0.6",
    "angular2-toaster": "2.0.0",
    "angularfire2": "2.0.0-beta.7",
    "chart.js": "^2.3.0",
    "core-js": "^2.4.0",
    "dragula": "^3.7.2",
    "firebase": "^3.6.9",
    "moment": "2.17.1",
    "ng2-bootstrap": "^1.2.5",
    "ng2-charts": "^1.5.0",
    "ng2-dragula": "^1.3.0",
    "ng2-select": "^1.2.0",
    "rxjs": "5.0.3",
    "ts-helpers": "^1.1.2",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "angular-cli": "1.0.0-beta.25.5",
    "codelyzer": "2.0.0-beta.4",
    "extract-text-webpack-plugin": "^2.0.0-rc.0",
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.4.0",
    "protractor": "5.0.0",
    "ts-node": "2.0.0",
    "tslint": "4.3.1",
    "typescript": "2.1.5"
  }

[satyagupta]

"dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/compiler-cli": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/platform-server": "2.2.1", "@ionic/storage": "^1.1.7", "angularfire2": "^2.0.0-beta.7", "autolinker": "^1.4.0", "crypto-js": "^3.1.9-1", "firebase": "^3.6.6", "font-awesome": "^4.7.0", "ionic-angular": "2.0.0-rc.5", "ionic-native": "2.2.11", "ionicons": "3.0.0", "localforage": "^1.4.3", "rxjs": "^5.0.0-beta.12", "sw-toolbox": "3.4.0", "typescript": "^2.0.0", "zone.js": "0.6.26" }, "devDependencies": { "@ionic/app-scripts": "1.0.0", "typescript": "2.0.9" }

here is mine, i had to down grade the firebase and angular fire to make it work.

BTW i keep getting error that Angular needs rxjs 5.0.0 if i do npm update

[dcinadr]

@satyagupta - i believe the problem is with ionic2. It doesn't support the latest version of angular. thats why this project works for me. Because it is not an ionic project. When I use it my ionic project i am getting the same problems as you.

[satyagupta]

oh k so you are using it as a AngularProject right?

[uzumakinaruto123]

@katowulf check dependencies posted by @dcinadr above. That project does not even include ionic.

Debug output has been included in the OP (by me). That is complete js error that is thrown everytime.

Maybe I will post again ,

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

What can be more specific ? I will post if I can

Thanks

[satyagupta]

@uzumakinaruto123 bro create a new ticket with same details.

And i confirm the same issue that we face too. verifyPassword works but then the next request does not goes through and same error throws.

[kleeb]

angularfire2 beta.7 requires rxjs ^5.0.1, however angular 2.2.1 beta 12 there are more mismatches with versioning that may produce some bugs

[dcinadr]

I believe the root of the problem is that ionic-angular requires us to use v2.2.1. And if we want to update angularfire2 and firebase to a version that doesn't produce this bug it requires us to update rxjs. And if we update rxjs than angular v2.2.1 is not compatible. And since ionic-angular requires us to us v2.2.1 we can not update rxjs. So we have a circular problem that requires us to use older versions that will not solve this problem until ionic updates the version of angular that they are using. I have reached out to ionic and they have not responded with an update yet.

[satyagupta]

Which is why i had to downgrade the version of firebase after i updated it to 3.6.9.

I just wonder why others are not responding to this issue since many should be facing this very problem!! and why was this issue closed?

[dcinadr]

People that are experiencing it are probably just working around it since it is not a show stopper. You can use another browser or you can skip the message or you can load your dev tools after the app is loaded.

[satyagupta]

Any code snippets would be very helpful @dcinadr we are stuck with this app where most of the part is ready but we cannot test on device :(

[kleeb]

Switching to rxjs >= 5 is not breaking anything. Npm is showing some dependency warnings, but not errors. Ionic team is fully aware of it, they are even using rxjs version 5 in the alpha version of the new ionic-native, so I guess the final release is a matter of time.

[Qyoom]

Please, why does this issue keep getting closed? What is the resolution? I can create a Firebase account with email/password in Firefox, but not with Chrome (Dev Tools off). Just straight up web, not Ionic. @dcinadr what is the work around you refer to? I do not have DevTools open in Chrome and get the network error. I'm using the code straight out of the documentation:

this.auth.createUserWithEmailAndPassword(email, password).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // ... console.log("createUserWithEmailAndPassword errorCode: " + errorCode); console.log("createUserWithEmailAndPassword errorMessage: " + errorMessage); });

ERROR: createUserWithEmailAndPassword errorCode: auth/network-request-failed createUserWithEmailAndPassword errorMessage: A network error (such as timeout, interrupted connection or unreachable host) has occurred.

[dcinadr]

@Qyoom - please refer to my previous post for my workarounds. However, you are running a command that I am not running yet. So it is possible that my workaround will not work for you. And I may run into the same problem you are experiencing once i use that command.

[nilebma]

Hi everyone !

I have this problem with Ionic 2 on Android Phones below KitKat (<4.4), even with crosswalk plugin installed. I use theses versions :

Ionic 2.1.0 Angular 2.2.1 (this version is mandatory for Ionic 2.1.0) Rxjs 5.0.1 or 5.0.0-beta.12 (both tested) angularfire2 2.0.0-beta.7-pre or 2.0.0-beta.8 (both tested)

If anyone have a clue on how to fix this, that would be greatly appreciated ! :-)

[AlvaroHerrero]

Fixed using firebase 3.6.1 with an ionic project with this configuration Ionic CLI Version: 2.1.13 Ionic App Lib Version: 2.1.7