AngularFire - Firebase object undefined

Question

I'm trying to set up an AngularJS Ionic app together with Firebase.
I followed all the guides available but still Firebase object is undefined.
This is my index.html: (Inside the body)

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/localforage/dist/localforage.js"></script>
<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.min.js"></script>
<!-- endbower -->
<script>
  firebase.initializeApp({
    apiKey: "...",
    authDomain: "....firebaseapp.com",
    databaseURL: "....firebaseio.com",
    storageBucket: "....appspot.com"
  });
</script>
<!-- endbuild -->

and this is my app.js:

'use strict';
 angular.module('...', ['main', 'firebase'])
  .constant('FBURL', 'https://....firebaseio.com')
  .factory('Auth', function ($firebaseAuth, FBURL) {
       var ref = new Firebase(FBURL);
       return $firebaseAuth(ref);
 });

The service - $firebaseAuth, is loaded successfully but the line new Firebase throws exception that Firebase is undefined.

Thanks!

I just ran into this issue a week ago and I'm not sure where I came across this, but mine works when I do it with var ref = firebase.database().ref(); Note the casing of "firebase". Then I pass ref into the $firebaseArray function. As far as $firebaseAuth(), I just get a reference to it and call the appropriate authentication function. — Matt M
This seems to work with $firebaseArray, but it's the deprecated api. It doesn't work with $firebaseAuth, any other suggestions ? — Amir Yonatan
In my project, I don't pass ref into $firebaseAuth. I simply get a reference to it: var auth = $firebaseAuth(); and call the appropriate auth method....like this: auth.$signInWithEmailAndPassword('myemail', mypassword).then(function(user){ console.log(user); }); — Matt M

Aaron Saunders Aaron Saunders · Accepted Answer · 2016-07-14T20:04:35

'use strict';
 angular.module('...', ['main', 'firebase'])
  .constant('FBURL', 'https://....firebaseio.com')
  .factory('Auth', function ($firebaseAuth) {
       var ref = firebase.database().ref();
       return $firebaseAuth();
 });

https://github.com/firebase/angularfire/blob/master/docs/quickstart.md#7-add-authentication

AngularFire - Firebase object undefined

1 Answers