Sign Into Firebase With Facebook Using Ionic Framework

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:

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.

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:

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:

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:

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:

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 is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Elindor

    Thanks for the tutorial. Note that anyone who would want to make use of the Facebook app to authenticate could do that same flow but using the Cordova Facebook plugin (I do it like that).

    • Yea you can do it like that too. As long as you can get your own access token, you can use it with Firebase!

      Thanks for sharing this alternative 🙂

  • Oliver Pérez Camargo

    Thanks for the tutorial Nic, very useful, although I would not use $cordovaOauth but the facebookConnectPlugin. Look what I found after reading your article:

    http://stackoverflow.com/a/26387551/1024693

    • That is an acceptable alternative assuming the user has the Facebook app installed. My example, works with all providers, not just Facebook.

      Thanks for sharing 🙂

      • Oliver Pérez Camargo

        Well, that’s true.

  • eshinkawa

    Nic, great tutorial. Unfortunately I am getting this message when logging in:

    “Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.”

    Stack Overflow answer didn’t help much:
    http://stackoverflow.com/questions/25225280/facebook-app-firebase-simple-login-url-error

    Any idea? Thanks!

    • eshinkawa

      Ok just saw your answer: added http://localhost/callback to “Valid OAuth redirect URIs” and it worked. Thanks once again.

      • Awesome! Glad you got it working 🙂

        • eshinkawa

          Nic, one last question. Since I cannot log in via browser, doesn’t it make it harder to develop? I don’t have browser tools anymore for debugging and etc… am I getting this wrong?

          • The way I see it is, you’re developing mobile applications, not websites. For this reason, if you were building native apps you wouldn’t have the luxury of a web browser to test with, so why should you for hybrid apps?

            Chrome does offer remote debugging for Android apps if you’d prefer not to use ADB. Xcode will show you the logs if you’re building for iOS.

            Regards,

    • Three things:

      Did you add an oauth redirect of http://localhost/callback in your Facebook dashboard?
      Did you make your Facebook app public via the dashboard?
      Did you enable Facebook login via the Firebase dashboard?

      My assumption is there is an incorrect configuration in Facebook or Firebase.

      Regards,

  • Aaron Hillel Swartz

    Hey Nic, one question, and what should we put on the Facebook App side ? do we need to use https://urbanetapp.firebaseio.com/ anywhere ?

    • Nope, you would use ngCordova $cordovaOauth the same as usual. Firebase information should remain local to your app only.

      Regards,

  • Kevin Attal

    Hi, this is a really great tutorial !
    I had one question for you please. I’m having hard times to set up the log out function. I’m using the function unauth() but i don’t succeed to connect with many profiles. It seems that firebase is connected to my App someway that it’s never cleaning up the cache or the cookies of the InAppBrowser. I saw that i should use the plugin bez4pieci/Phonegap-Cookies-Plugin but it’s writting that “Cannot read property ‘clear’ of undefined” on window.cookies.clear()
    Any idea ?
    Thanks !

    • The unauth() method will only clear out any Firebase authentication data from local storage. You will still need to do your own clean-up, for example, redirect the user to a logout page and removing any data that you might have stored based on the connection. Firebase won’t do that clean-up for you.

      Hopefully that made sense.

      Regards,

      • Senthil Kumar

        so is there any way to clean up the cache or cookies of in app browser coz i am also facing the same issue. i am able to login with only one user. currently i am not using ng-cordova-oauth lib, i am using firebase user authentication “popup method”

  • Arnav Palnitkar

    Thanks for the tutorial Nic!!
    I have a question regarding this tutorial, have you tried this on IonicView?
    Because when I try to run it on ionic view, it redirects me to my fb news feed instead of my applications home page. But on simulator it works fine!!

    this.login = function() {
    $cordovaOauth.facebook(“My_App_ID”, [“email”]).then(function(result) {
    Auth.$authWithOAuthToken(“facebook”, result.access_token).then(function(authData) {
    // Check if users exits in db
    $state.go(‘tab.home’);
    var ref = FireRoot.child(“Users”).child(authData.uid);
    // save the user’s profile into Firebase

    };

    • The Ionic View has compatibility issues with many plugins including the InAppBrowser plugin.

      I encourage you to build, test, and deploy your apps without middleman (Ionic View) intervention.

      Regards,

      • Arnav Palnitkar

        Yeah that’s true. Thanks for the quick response 🙂

  • Bohdan Lev

    After login console throw error:
    ERROR: ERROR: Error: Invalid authentication credentials provided.

    If iI’m correct after authentication I must get some user data or not?

  • Cavan Flynn

    I’m having trouble including the firebase module in app.js and am getting the following error:

    Module ‘firebase’ is not available!

    I’m having some trouble figuring out what the problem may be. Any ideas? Thanks!

  • Nic,

    I’d like to secure routes in $stateProvider based upon whether the user is logged in or not. I’m storing authData in angular-local. Any suggestions?

    $stateProvider

    .state(‘app’, {

    })

    .state(‘login’, {

    })

    .state(‘app.categories’, {

    })

    .state(‘app.category’, {

    });

    // if none of the above states are matched, use this as the fallback

    $urlRouterProvider.otherwise(‘/app/categories’);

    })

  • Tenoch Gonzalez

    Hi Nic, I run your example and when i click the button the facebook login screen appears but then when I introduce my facebook email and password and click Log In I got this error= webView:didFailLoadWithError – -1004: Could not connect to the server. do you have any idea what could be happening?

  • Theory of Thought

    Hi Nic, do you have a function to import the profile pic into your ionic app once logged into Facebook? And saving it into a Firebase db as a base64 string…

  • Connor James Leech

    after i type in my facebook credentials I am redirected to a blank white screen

  • Senthil Kumar

    i am trying to configure for twitter but it is not working properly, i guess i have done some mistake while configuring app in the twitter app mangement and i am not able to give the desired redirect callback url in the twitter app management as it does not accept localhost. plz help

  • pedro

    Hi, I follow this tutorial and the other about syncing data with firebase with success, thanks for the great tutorial.
    If I wanna combine the two tutorials, when an user login with facebook and create an user on firebase for him.
    Can you give me some direction? Thanks

  • Hugh Hou

    What is the benefit of using cordovaOauth + Firebase oauth together instead of just using Firebase oauth? I build an app using just Firebase Oauth. And wondering should I use your method instead if there is add on benefit for doing so. Thanks!

    • michael verdi

      Could you share how you did this? I’m attempting to use just Firebase with $authWithOAuthPopup
      but the popup window that InAppBrowser plugin displays closes immediately before I can enter any credentials. I have a SO question here: http://t.co/tcF87iJmko

  • Austin Tans

    Hi Nic, thanks for this awesome tutorial! I can get through the facebook login fine, however, there is nothing being sent to firebase such as an ID, email, etc. any thoughts as to why this is? I’ve tripple checked to make sure that my firebase URL is correct and I’ve checked my code against yours and I don’t see anything that would be throwing it off. I do have have separate files for app.js and controllers.js along with services.js though, would this be causing the issue? Thanks again for all the help!

  • michael verdi

    I’m having issues with running the app in prod. The oauth redirect is failing, even though it works locally. Should I change the Oauth redirect to something other than http://localhost/callback

  • Shu Xian

    Hi, nic. Great tutorial, but why i get error: unable connect to the firebase server? please help thanks

    • Shu Xian

      nevermind, i fix it using cordova whitelist plugin 🙂

  • Harel Levy

    This is the best Oauth tutorial for ionic apps on the net. Thank you!

  • Hala

    Hi nic!
    I have a question regarding ionic framework. Can i use MS SQL server as a back-end to my ionic cross platform application?

  • Navi

    Hello thanks for the tutorial, I could log in but I wonder how to persistent login, after the user logged in once through Facebook no longer need to enter the password every time you open the app, so I want to record the logion in localStorage and do I automatically the next time until he can clear the site token through logout how do I save the token and automatically log back?

    • If I got what you want, just do it:

      var token = response.authResponse.accessToken;
      console.log(‘Token: ‘ + token);

  • Rafael Flores

    Hello Nic, thanks a lot for the tutorial, clean and simple to follow. However, I’m afraid there’s an issue I cannot solve. When I run the code in your tut’s code on my device, I get an error message on the $cordovaOauth call saying that window.cordova.InAppBrowser is undefined. I’ve made pretty sure that the InAppBrowser plugin is installed, but I still get the same error.

    Could you please help me out? Many thanks.

  • Shivang Pokar

    Hello,
    TypeError: Cannot read property ‘open’ of undefined
    at Object.oauthFacebook [as facebook]
    showing me error while login in android devices
    Could you please help me out… !
    thanks 🙂