Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Sign Into Firebase With Facebook Using Ionic Framework

TwitterFacebookRedditLinkedInHacker News

To continue on my trend of Firebase and Ionic Framework based tutorials, I thought, wouldn’t it be cool to sign into your Firebase application using a social media account such as Facebook?

Out of the box Firebase and AngularFire offer some nifty methods for authentication, however they don’t work quite as expected when it comes to mobile hybrid applications and I’ll explain why.

If you’ve been keeping up with my tutorials, you know that my Firebase todo app, Firebase password manager app, and Firebase image uploader app all make use of username and password authentication. But what if we want to authenticate differently? We’re going to see how in just a moment.

Being that we’re planning on using Ionic Framework it only makes sense to add the AngularJS extension AngularFire. In this library we’re presented with the following possible authentication methods:

$authWithCustomToken(authToken[, options]);
$authAnonymously([options]);
$authWithPassword(credentials[, options]);
$authWithOAuthPopup(provider[, options]);
$authWithOAuthRedirect(provider[, options]);
$authWithOAuthToken(provider, credentials[, options]);

At first glance you might think, well why don’t we use $authWithOAuthPopup or $authWithOAuthRedirect. These are two methods that will only work in a browser.

Instead what we can do is make use of $authWithOAuthToken in combination with the AngularJS oauth library I wrote called ng-cordova-oauth found on GitHub. Yes, I do contribute the source code to the official ngCordova library as well, so you can use that if you’d prefer. If you want to learn more about this library you can visit my previous tutorial on the topic.

Let’s go ahead and start a fresh Ionic project and I’ll explain why we’re going this route along the way.

ionic start IonicApp blank
cd IonicApp
ionic platform add android
ionic platform add ios

Remember, if you’re not using a Mac, you cannot add and build for the iOS platform.

Now in order to use our oauth library, we need to install the Apache Cordova InAppBrowser plugin which will allow us to access websites external to our application. In this scenario, the website will be the login flow that Facebook generates. In your Terminal or Command Prompt run the following command:

cordova plugin add org.apache.cordova.inappbrowser

Now let’s start adding all our JavaScript libraries. Download the latest Firebase JavaScript SDK and AngularFire library as well as ngCordovaOauth. Open your project’s www/index.html and add these libraries similar to the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova-oauth.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/firebase.js"></script>
        <script src="js/angularfire.min.js"></script>
        <script src="js/app.js"></script>
    </head>

Notice that I added ng-cordova-oauth.min.js above cordova.js. This was not by accident. If you don’t do this, you’re going to get strange results.

Drop further in your www/index.html file to the <ion-content> tags and replace them with:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="login()">Login to Firebase</button>
</ion-content>

Our application is going to very simple. Only a button on the screen which will log us into Facebook as well as Firebase. Nothing more.

Let’s wrap things up. In your www/js/app.js file, alter it to look like the following:

var firebaseApp = angular.module('starter', ['ionic', 'firebase', 'ngCordovaOauth']);
var fb = new Firebase("https://INSTANCE_ID_HERE.firebaseio.com");

firebaseApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});


firebaseApp.controller("ExampleController", function($scope, $firebaseAuth, $cordovaOauth) {

    var auth = $firebaseAuth(fb);

    $scope.login = function() {
        $cordovaOauth.facebook("FACEBOOK_APP_ID_HERE", ["email"]).then(function(result) {
            auth.$authWithOAuthToken("facebook", result.access_token).then(function(authData) {
                console.log(JSON.stringify(authData));
            }, function(error) {
                console.error("ERROR: " + error);
            });
        }, function(error) {
            console.log("ERROR: " + error);
        });
    }

});

Essentially, we’ve added Firebase and ngCordovaOauth into our AngularJS module, initialized Firebase, and created a controller responsible for user sign in. In your version, don’t forget to swap INSTANCE_ID_HERE with your actual Firebase name and FACEBOOK_APP_ID_HERE with the application key found in your Facebook dashboard.

So how exactly are we using oauth to authenticate when we can’t use the $authWithOAuthPopup or $authWithOAuthRedirect methods? We are using $cordovaOauth.facebook to get an access token using a web flow and then passing this access token into the Firebase $authWithOAuthToken method. Firebase will then validate that your access token is correct.

The final thing we want to do is make sure Facebook is enabled as a valid option in the Login & Auth section of the Firebase dashboard.

Conclusion

When using your social media accounts to connect to Firebase in an Ionic Framework app, you definitely want to make use of ngCordovaOauth or ngCordova to accomplish the job. With library you can make use of any of Firebase’s social media providers since they all exist in the library.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site