Bug - defining Ionic as a dependency gives error in a specific case


#1

Hello !

[ Tested on a Nexus 5 running Android 5.0]

I followed Firebase’s guide to initialize login with AngularFire there : https://www.firebase.com/docs/web/libraries/angular/guide.html#section-angular-authentication, the second code area. After clicking on the button that takes me to the Facebook login page, I just push “back”, but it doesn’t takes me back to my login page : it fails with the following error :

Uncaught ReferenceError: cordova is not defined

If I simply remove ‘ionic’ from dependencies, it works perfectly.

If you want to reproduce, here is my HTML :

<!DOCTYPE html>
<html ng-app="sampleApp">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<div ng-show="user">
    <p>Hello, {{ user.facebook.displayName }}</p>
    <button ng-click="auth.$unauth()">Logout</button>
</div>
<div ng-hide="user">
    <p>Welcome, please log in.</p>
    <button ng-click="auth.$authWithOAuthPopup('facebook')">Login</button>
</div>
</body>
</html>

And the JS :

var app = angular.module('sampleApp', ['ionic', 'firebase'])

// let's create a re-usable factory that generates the $firebaseAuth instance
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
  var ref = new Firebase("https://pixift.firebaseio.com/");
  return $firebaseAuth(ref);
}]);

// and use it in our controller
app.controller("SampleCtrl", ["$scope", "Auth", function($scope, Auth) {
  $scope.auth = Auth;
  $scope.user = $scope.auth.$getAuth();
}]);

Hopefully someone will be able to help me, because I’m like, wtf ? :smile:

Thanks :wink:

[EDIT] Same error testing on an emulator of a Nexus 5 running 4.4.4 on Genymotion.


#2

Hmm, not sure how including ionic would cause that error.
But what could be causing the issue is if your on a device or not.
Are testing in a browser or on an actual device?


#3

Hey man, thanks for answering :smile:

Nope, you won’t get me like that :wink: of course I’m testing on a real device ! It’s even stated on the post : tested with my Nexus 5. To be sure of it, as I edited after that, I also tested in a Genymotion emulator, and the problem is also there.


#4

Derp on my part hah,

So I tried this in the browser and got this warning.

App Not Setup: The developers of this app have not set up this app properly for Facebook Login.

Seems like something on the firebase side of things?


#5

Why taking out Ionic from the picture would fix the issue if it was a Firebase issue ? :-o


#6

Hmmm, good point.

I can mess around with things to see whats up, but a good place to start is to check out this post.

See if there was anything you may have missed


#7

Things are moving fast, you should know that :stuck_out_tongue: This post is already completely outdated, as stated in the beginning :

Update (October 3, 2014): Firebase Simple Login has been deprecated and is now part of the core Firebase library. Use these links to find the updated documentation for the web, iOS, and Android clients.

Anyway, I really don’t think it’s a Firebase issue, since it’s perfectly working as long as I don’t include Ionic. I think I provided a good enough MCVE, but if you think of anything I could do to help narrow the issue, tell me !


#8

Hmm, base on that example from above and that post you linked too, the only thing I did was add the cordova inappbrowser and everything worked fine for me.

The only thing that wasn’t working was getting the user name.
I had to reload the page to get it to show.


#9

Getting the user name ? I don’t know if you got what steps are needed to reproduce, because I don’t log the user in !

  • Launch the app
  • Click on the login button
  • wait until Facebook’s login page appears
  • Hit the back button without logging in
  • See in the debug console that the error is thrown and witness that the page doesn’t come back
  • Cry because you’re sad :’(

BTW I’m using Ionic, v1.0.0-beta.13. Don’t know if it can help.


#10

Hmm, again I’m not getting that :disappointed:

Do you have the inappbrowser plugin installed?


#11

Nope, that was without the plugin installed ! With the plugin installed it works perfectly :smile:


#12

Good to hear :smile:


#13

Still, without the plugin it’s very strange that it throws that error, no ? I mean, it works for me, but I don’t want anyone to be stuck :wink: