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??