Angularfire: Runtime Error: A network error when login with facebook on web browser

[bangive]

Version info

Ionic Framework: 2.0.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.5
OS Platform: Windows 7
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

How to reproduce these conditions

I setup following this link https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic2.md

Debug output

Error: Uncaught (in promise): Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.
at s (http://localhost:8100/build/polyfills.js:3:4211)
at s (http://localhost:8100/build/polyfills.js:3:4034)
at http://localhost:8100/build/polyfills.js:3:4574
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
at Object.onInvokeTask (http://localhost:8100/build/main.js:35843:37)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
at i (http://localhost:8100/build/polyfills.js:3:3671)

Actual behavior

The popup for facebook authentication is shown and disappeared shortly so i can't sign in.

Complete source code

https://drive.google.com/open?id=0B4dCHEToS7afNXM5WUN0ejlBMDA

[davideast]

Does this happen consistently?

[bangive]

yes, it does every time i try to click facebook login button. However the facebook login button works on android with some modification.

[ghost]

I am also facing the same issue on the android device. but not sure why it works properly when the device is connected with android studio.

[katowulf]

Seems likely to be a whitelist step that's missing here. I remember this about Ionic with Firebase. @mukesh51 is this something you could look into?

[ghost]

I checked and tried all, actually not sure, why it works when the phone is connected with android studio.

[ghost]

it says the same error both facebook and google login, but sometimes work.

[mukesh51]

Created a new app following the tutorial, everything worked as expected with one exception.

I was getting an error in my console (firebase not found), when running the app in the android phone, so have to add the following line in my auth-service.ts

import * as firebase from 'firebase';

I did not have this error, when writing the original tutorial.

@bangive @sdey0081 : What errors are you getting on the console, when running the app in the android phone. Currently the tutorial displays the Facebook display name in the console.
To view the console, when running your app on phone, you can use the following URL (chrome://inspect) on google chrome browser. This will connect your device and show your the console and errors if any. this is a brilliant tool to debug.

@bangive you said

The popup for facebook authentication is shown and disappeared shortly so i can't sign in.

Is it possible that you're already logged into you facebook account on your phone, which might cause this behaviour and which makes sense as well.

Also in the firebase console, when you enable your facebook sign-in authentication method, you need to provide your App Id and app secret, which I hope you're getting it from your App created under http://developers.facebook.com/apps.

you also need to add the add OAuth redirect URI to your Facebook app configuration, which is on the facebook dashboard page under Products -> Facebook Login --> Settings.. This is a key step for interaction between facebook and firebase.
Everything is here

Let me know, if this helps..

@katowulf @davideast
I'll update the tutorial to add these details and update the app to display the name on page itself, apart from displaying it in console.

[ghost]

Hi @mukesh51 , thanks for your kindness.

As I said, it sometimes works correctly, but sometimes not, I already set both facbook and google authentication on their dashboard. Only fired at the firebase. Here is the error app says:

I also attached a video file here which says this more detail.

Regards.

[mukesh51]

Hi @sdey0081 I downloaded your code and ran it locally, Despite running it at least 7-8 times, i was unable to reproduce the network error issue. I did see your video as well, but unable to reproduce it locally. Did you see this behaviour only in browser or in Android phone as well.

I've created a test repo here . You can try downloading it and running it locally to see, if you see the same behaviour. Before running, update your credentials in app.module.ts.

[ghost]

okay, let me try again, but i didn't share my code yet.

[mukesh51]

There was repo at the start of this issue. Oops, it was from @bangive and it works for me.

Please share your repo as well and try mine.

[bangive]

@mukesh51 I download your test repo, run it in chrome in windows 7. The popup still shown and dissapeared shortly. Still cannot sign in. Here the error in console:

EXCEPTION: Uncaught (in promise): Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.
ErrorHandler.handleError @ main.js:52867
main.js:52872 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ main.js:52872
main.js:52873 Error: Uncaught (in promise): Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.
    at s (polyfills.js:3)
    at s (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (main.js:36630)
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at i (polyfills.js:3)
ErrorHandler.handleError @ main.js:52873
polyfills.js:3 Unhandled Promise rejection: A network error (such as timeout, interrupted connection or unreachable host) has occurred. ; Zone: angular ; Task: Promise.then ; Value: O undefined
o @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.
    at s (polyfills.js:3)
    at s (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (main.js:36630)
    at t.invokeTask (polyfills.js:3)
    at e.runTask (polyfills.js:3)
    at i (polyfills.js:3)
o @ polyfills.js:3
polyfills.js:3 Uncaught Error: Network Error
    at http://localhost:8100/build/main.js:101979:31
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
    at invoke (http://localhost:8100/build/polyfills.js:3:10836)
    at e.args.(anonymous function) (http://localhost:8100/build/polyfills.js:2:30123)

[ghost]

Hi @mukesh51 , test project works without any issues now(both browser and device), and committed on this repo, just checking the issue I mentioned first on the other side.

[mukesh51]

@sdey0081 Glad it worked for you, but still a problem for @bangive.

Unfortunately unable to reproduce at my end, despite downloading @bangive repo. Need to dig more.
@bangive apart from enabling the facebook authentication in Firebase console, what are the domains you see on the same page below.

Once you get an error and if you try to refresh the page, what do you get.

Also seems like this issue is being reported here and seems to be in various forums in stackoverflow.

Could you please confirm, that your settings on facebook page are correct, as mentioned above. I suspect there might be a missing bit, since the same test project worked for @sdey0081

[bojeil-google]

I downloaded your test app, built in and tested facebook sign-in in a browser and on a nexus 5x device successfully.

[bangive]

Here is the settings on facebook page by image:

I forgot to say that i am testing on localhost

[mukesh51]

@bangive so is it working now.

[bangive]

no, it is not working

[mukesh51]

In the facebook dashboard page, when you click settings and under Basic tab, you should see your App ID and App Secret.

On the same page below, you need to add your platform (let's say Android in this case) and update the
Google Play Package Name with the Widget Id from config.xml.

Something like this
<widget id="com.ionicframework.yourAppName345871"

Hopefully, you've this entry in your dashboard.

[bangive]

Thank you for supporting, i have solved my problems.
I deploy my ionic app to firebase hosting and go to facebook developer page and enable Web OAuth Login.
The facebook login now works on real website but does not work on localhost.

[chit786]

I am getting this error with Email/Password based authentication as well.

Is this thread related?

https://github.com/firebase/firebaseui-web/issues/98#issuecomment-275888728

These are my 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",
"@types/lodash": "4.14.43",
"angular2-moment": "^1.0.0",
"angularfire2": "^2.0.0-beta.7.1-pre",
"chart.js": "2.3.0",
"es6-shim": "0.35.0",
"ionic": "^2.2.1",
"ionic-angular": "2.0.1",
"ionic-native": "2.4.1",
"ionic2-rating": "0.0.10",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"systemjs": "0.19.39",
"typings": "^1.4.0",
"whatwg-fetch": "^2.0.1",
"zone.js": "^0.6.21"

[bojeil-google]

Please make sure you enable xhr requests to https://www.googleapis.com. signInWithEmailAndPassword is just a simple request to that endpoint. Also make sure you are using the latest js version 3.6.9.

[mukesh51]

@chit786 This issue is related to runtime error while authenticating with facebook. Are you getting a similar error. If not, then please open up a new issue using the issue template to provide more details about your environment.

On a different note, I don't see firebase module in your dependencies section above. Also, did you get a chance to look at the user authentication tutorial here.

[chit786]

@mukesh51 No I am getting exact same network error with email password login as well. Also regarding the firebase module in dependencies : i had to remove it since angularfire2 itself imports firebase and the cli compiler was throwing "duplicate import" errors. please correct me if I am missing something. I am using firebase API as well due to some requirement on offline data availability which angularfire2 library does not provide.

Also I felt the issue may be something related to the timeouts as described by bojeil hence I placed it here , so I wonder how to achieve the update in angulrfire2 installed package to try this out.

note : I am using firebase.initializeAPP cofiguration inside my compoenent.ts, like below:

firebase.initializeApp({
apiKey: "xxxxxxxxxxxxxxxxxxxxx",
authDomain: "test.firebaseapp.com",
databaseURL: "https://test.firebaseio.com",
storageBucket: "test.appspot.com",
messagingSenderId: "12345678901"
},'app1');

and ,

firebase.auth().onAuthStateChanged function to check auth status of the user.

all the functionality works fine, both angularfire2 and firebase seem to work but after sometime this network error occurs.

lastly thank you for picking this up.

[mukesh51]

@chit786 Could you please share your repo.

[chit786]

@mukesh51 here you go. https://github.com/chit786/CAFFEIOT/tree/feature/chitrang-s_feature

[chit786]

also I check the firebase version and its 3.6.9 already. @bojeil-google i am not able to access https://www.googleapis.com. is this correct URL.

[mukesh51]

@chit786 i was able to download the repo and it worked successfully locally for me. After login into your app, I was able to see the coffee consumption dashboard page.

Do you have the correct user setup in your Firebase console. do you want to create a test user to see if its working.

[chit786]

I guess you need to logout and login again. Then pls wait for sometime, keep the wondow open, to reproduce it. Because I get error more frequently during logging in and logging out scenarios in pretty good network conditions.

[bojeil-google]

Underneath the Firebase Auth backend has a domain https://www.googleapis.com.
Make sure you are allowing requests to that domain. I haven't looked at your app code. For example, in some cases, there may be restrictions on outgoing requests in a Content-Security-Policy.

[chit786]

@bojeil-google I verified this on real device and I can confirm that i am getting network error only with auth services, like login and sign up using email/password verification. I added the domain under OAuth redirect domains sections on firebase console but this error is still there.

@mukesh51 can you try couple of times login in and out and check it out on real devices?

Thank you all once again.

[chit786]

HI All, any updates on this request? ~Thanks

[jwuliger]

When I have had problems connecting to firebase auth in the past, it was always my workstation's security software. In my case, I use Bitdefender Total Security and if you disable Scan SSL under your Web Protection area for whatever security software you use. It took me a very long time and headache to discover this. Now if you do not have any security/malware running then I am not sure. Just trying to help.

[mukesh51]

@chit786 It works fine for me. I tried running your app on android device and logged in and logged out at least 5 times in a span of 10 minutes. worked every time for me, although there was an error in the console (screen shot for your reference), but it still worked every time.

I was able to get rid of the error, by executing the following command in the project folder.

ionic plugin add phonegap-plugin-push --variable SENDER_ID=123456789

Let me know, how it goes at your end.

[chit786]

@mukesh51 Thank you for your response. can you please confirm on which android version did you try? I am trying on 4.4 Android since that is our minimum configuration support for the APP. Can you please confirm the same. Also on Web Chrome which chromium version do you have. mine is 56.0.2924.87 (64 bit).

I receive above mentioned issue ["Network error"] with the authentication and sign up API "on firebase.auth() " not sure but I am getting this a lot on 4.4 Android. If you have tried with the same version then may be its some issue in my configuration at which I am totally stuck at.

[mukesh51]

@chit786 I am on chrome version

Version 56.0.2924.87

and Android version on device is

5.0.2

Two quick suggestions
1) Why not try to test your app on android version 5.
2) Try creating the app from scratch, just to be doubly sure that while debugging you haven't changed two many configuration items.

[chit786]

Hi Mukesh I will try from scratch. Just to sure what is going wrong. Also just a point to add I have also tested on Android 6 nexus 6 and got same issue. So perhaps something may be wrong in configuration which is highly unlikely. Since It started throwing error after I upgraded to IONIC 2 final release.

[chit786]

Hi @mukesh51 ,

Today I tried again afresh by cloning my repo in another path ,and followed below steps , still I am getting the same issue, below example I carried out on my emulator

1. cloned repo to a folder
2. npm install
3. typings install
4. npm install firebase angularfire2 --save [using latest firebase and angularfire2]
5. ionic state restore [reinstall all plugins and platforms]
6. ionic platform add browser {Since I have the requirement of chrome extension as well}
7. ionic run android --prod {Creating prod build}

my package.json now looks like :

{
"name": "XXXX",
"author": "Chitrang Natu",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"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",
"@types/lodash": "4.14.43",
"angular2-moment": "^1.0.0",
"angularfire2": "^2.0.0-beta.8",
"chart.js": "2.3.0",
"es6-shim": "0.35.0",
"firebase": "^3.6.10",
"ionic": "^2.2.1",
"ionic-angular": "2.0.1",
"ionic-native": "2.4.1",
"ionic2-rating": "0.0.10",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.0-beta.12",
"sw-toolbox": "3.4.0",
"systemjs": "0.19.39",
"typings": "^1.4.0",
"whatwg-fetch": "^2.0.1",
"zone.js": "^0.6.21"
},
"devDependencies": {
"@ionic/app-scripts": "1.0.0",
"@types/request": "0.0.30",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-camera",
"cordova-plugin-compat",
"cordova-plugin-crop",
"cordova-plugin-file",
"cordova-sms-plugin",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
{
"variables": {
"SENDER_ID": "XXXXXXXXXXX"
},
"locator": "phonegap-plugin-push",
"id": "phonegap-plugin-push"
}
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
},
{
"platform": "android",
"version": "",
"locator": "android"
}
],
"description": "Test"
}

Please advice if i need to change something?

[davideast]

Closing due to inactivity and auth changes.

[bangive]

i have just create new app and still see this problem. After a while I found out that i need to upload my app to firebase hosting. And then i can login with facebook successfully on localhost:8100.
Be sure not to disable web oauth and client oauth in facebook developer page.
Besure to add this in Valid OAuth redirect URIs field in facebook developer page:
http://localhost:8100/__/auth/handler https://your-app.firebaseapp.com/__/auth/handler http://localhost:8000/__/auth/handler

I just cannot login with facebook on android. I logout facebook app and then login in my app. There is an error shown: App not setup: This app is still in development mode...
Then i make app public (or add an tester) in Facebook App Review page. Then it works.

[mjwdoek]

I also ran in to this issue.
I use the angularfire2 and firebase npm package in my ionic2 project.

At first, I had no problems. But when I did a upgrade of all of my npm packages (upgrade ionic to 2.3.0, angular to 2.4.8 and angularfire2 to 2.0.0 beta, in my case), the error appeared.
I can click it away, so it's not blocking (but very anoying!).

It's only visible when I run ionic serve in the browser (and not in the ionic view app for example):

Error: Uncaught (in promise): Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred. at s (http://localhost:8100/build/polyfills.js:3:4211)

solution:

• remove the build folder
• do a new ionic build ios command
• and run the app again with ionic serve

Now the network error is away

[miguelcarrascoq]

I faced the similar problem: everything alright on the browser but not in android.

I follow this steps: https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic3-Angular4.md

then I changed:

in package.json:
"firebase": "^3.6.6",
"angularfire2": "^4.0.0-rc0",

In my case, I'm using lazy loading so I imported the modules in my pages (e.g.: login.module.ts)
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
....
imports: [
IonicPageModule.forChild(LoginPage),
TranslateModule,
AngularFireModule,
AngularFireDatabaseModule,
AngularFireAuthModule
],

That works for me.

[AmarildoK]

EDIT2: I have found the problem that's causing it. I am hosting my app on firebase hosting and wrote my rewrite rules to redirect if a file or folder does not exist to index.html. After removing the rewrite it works everytime. Altough i can't find how to not apply this rule to https://barqueue.firebaseapp.com/__/auth/.
If anyone got any suggestions I would love to hear them.

~~EDIT: This only works half of the time. On edge on the other hand it seems to work always. I'm not using ionic. It's just a pwa.

Had the same issue. The login click handler was on a md-button without defining type. By setting type="button" this error resolved itself. The weird thing is this only happened in chrome all other browsers worked perfectly. I assume that only chrome sets the default button type to submit. Hope this helps anybody.

My solution:
Set button type to "button"~~

[renjithspace]

SOLVED

1. Install whitelist cordova plugin

ionic cordova plugin add cordova-plugin-whitelist

1. Add allow-navigation for all in config.xml

<allow-navigation href="*" />

That's it! Works fine for me