AngularJS using AngularFire throwing Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred

0

I am trying to work with something new and don't fully understand how AngularJS and Firebase interact. The application that I'm creating is written in AngularJS with Firebase and AngularFire. I'm currently testing in IE.

The application logs me in without issue, but when it sits idle for a while the $onAuthStateChanged() function no longer returns an authenticated user, however the $requireSignIn() function continues to return true. This means that I can browse to any of my pages that require authentication, but I don't actually have an authenticated user so a lot of the features on my website are hidden (I'm using ng-show to show controls when there's a user).

When I turn on debugging I get this error on line 12 of auth.js

Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.

This error is constant, and as soon as I click no to debugging I get another.

This is also in the console, but I don't know if it's related:

XMLHttpRequest for https://securetoken.googleapis.com/v1/token?key=<removed key> required Cross Origin Resource Sharing (CORS).
XMLHttpRequest for https://securetoken.googleapis.com/v1/token?key=<removed key> required CORS preflight.
XMLHttpRequest: Network Error 0x80070005, Access is denied.

I've tried using console.log() to see how far I'm making it but the site doesn't appear to be getting anywhere once the issue starts happening. Again, it works fine at first until it sits idle for a while.

I cant tell if I get the same issue with Google Chrome or not, so far it hasn't happened. Any suggestions would be greatly appreciated and please let me know if seeing any of my code would be helpful.

angularjs
networking
angularfire
asked on Stack Overflow Apr 4, 2018 by Scott

1 Answer

0

I think I figured out a workaround to this issue that will work. I'm forcing a timeout to occur after 10 minutes and redirecting to the login page. I accomplished this with the ngIdle module, found here:

https://github.com/HackedByChinese/ng-idle

This is more of a workaround than a solution, but here is what I ended up doing:

var adminConsoleApp = angular.module('adminConsoleApp', ['ngRoute', 'firebase', 'ngIdle']);

adminConsoleApp.config(['IdleProvider', 'KeepaliveProvider', function(IdleProvider, KeepaliveProvider) {
  IdleProvider.idle(10*60); // 10 minutes idle
  IdleProvider.timeout(30); // after 30 seconds idle, time the user out
  KeepaliveProvider.interval(5*60); // 5 minute keep-alive ping
}]);

adminConsoleApp.run(['Idle', function(Idle) {
  Idle.watch();
}]);

adminConsoleApp.run(['$rootScope', '$location', 'Authentication', function($rootScope, $location, Authentication) {
  $rootScope.$on('IdleTimeout', function() {
    Authentication.logout();
    $location.path('/login');
  });
}]);
answered on Stack Overflow Apr 6, 2018 by Scott

User contributions licensed under CC BY-SA 3.0