Migrating Firebase 2.x to 3.4.1 AngularJS For Google OAuth

Question

I am new to Angular & Firebase. I am currently developing an Ionic app. Somehow I came to know that, to use Firebase, I need to set up authentication system (I prefer Google).

It was not easy to integrate the code into AngularJS which were mentioned in official Firebase website. So I just picked up someone's working code and replaced his Firebase database URL to mine, I could get it done. But it was a mistake.

This is the unchanged code and his output (which is working as expected).

index.html

<script src="lib/angularfire/dist/angularfire.min.js"></script>
<script src="lib/firebase/firebase.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>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

.constant('FirebaseUrl', 'https://ionicle.firebaseio.com/')

.service('rootRef', ['FirebaseUrl', Firebase])

So first, I removed his Firebase URL to add mine and got this error:

We have detected that you are using the v2.x or lower authentication SDKs with a project that was created at console.firebase.google.com. You must use the 3.0.0 or greater authentication SDKs with projects that have been created in the new console.

Then I updated firebase.js file to 3.4.1 version. Then I got a Reference error in browser's Dev console: ReferenceError: Firebase is not defined

.service('rootRef', ['FirebaseUrl', Firebase])

So what I finally need is a working Google OAuth with Firebase 3.x and AngularJS.

Answer 1

Although you didn't provide enough examples of your code (dependency injection is not enough), I think that the main problem you are having is that you are using old examples of the code with the new Firebase version.

Things like this:

var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseAuth) {
    var ref = new Firebase('https://...');
    $scope.authObj = $firebaseAuth(ref);
    ...
});

are changed into this:

var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseAuth) {

    var config = {
        apiKey: "***",
        authDomain: "***.firebaseapp.com",
        databaseURL: "https://***.firebaseio.com",
        storageBucket: "***.appspot.com",
        messagingSenderId: "***"
    };
    firebase.initializeApp(config);

    $scope.authObj = $firebaseAuth(firebase.auth());
    ...
});

Then on that authObj you can add a provider for the client you want to use to authenticate (Google/GitHub/Facebook...):

var provider = new firebase.auth.GoogleAuthProvider();
$scope.authObj.$signInWithPopup(provider).then(function(result) {
    console.log(result);
});

Keep in mind that you must enable Authentication with Google (or any other provider) in your Firebase console. For detailed instructions please check this link.