Login with Facebook using Ionic Framework

Facebook Authentication

There are different ways to integrate Facebook authentication into your Ionic app. However, only the way covered in this post uses the CordovaOauth approach which uses browser to perform the login instead of opening a popup requesting users to enter their credentials to login to facebook before granting access to your app.

Facebook authentication using Javascript approach

There are many different libraries you can use to add Facebook javascript login to your app, I will mention just some of them:

  • CordovaOauth is an AngularJS Apache Cordova Oauth library. The purpose of this library is to quickly and easily obtain an access token from various web services to use their APIs. Read more on the official Cordova Oauth documentation.
  • OpenFB is a micro-library that lets you integrate your JavaScript applications with Facebook. It works for both browser-based and Cordova/PhoneGap apps. Read more on the official OpenFB documentation.
  • Facebook SDK for JavaScript with AngularJS. You can interact with the facebook javascript sdk using angular. This is useful both for websites and Ionic apps as Ionic is built with AngularJS. Check “Facebook Javascript SDK integration with AngularJS” to get more information.




The way it works for hybrid apps to use native api’s and sdk’s is simple, you need a piece (typically a PhoneGap/Cordova plugin) that connects native api’s and sdk’s with the javascript environment where the hybrid apps run. In this case we are going to use a great cordova plugin to interact with the native facebook sdk.

Setting up a Facebook App

Before we even get started, you should first make a new Facebook App for your project at developers.facebook.com. This will allow you to get an APP ID which you will need to supply to the Facebook Connect plugin to allow you to interact with the Facebook API.

  • Create a new app by going to My Apps > Add a New App
  • Choose Website as your platform

Facebook App 1

  • Give your application a name and then click ‘Create App ID’

Now you will be taken to the dashboard for your application where you will be able to retrieve your App ID – take note of this for later. Now you will need to add the iOS and Android platforms to your Facebook application.

  • Go to the Settings tab

  • Click the + Add Platform button and choose www

  • Add callback url http://localhost/callback & Save

Facebook App 7

Implementing Facebook Login

Add your plugin

ionic plugin add cordova-plugin-inappbrowser

Include Required file with your index.html (you can find with downloaded files)

<script src="js/ng-cordova.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>

Creating the Home Screen


<div data-role="page" id="home">
    <div data-role="header">

      <div data-role="main" class="ui-content">
        <button class="button button-positive button-block" ng-click="login()">Login with Facebook</button
        <div data-role="main" class="ui-content" id="listTable"></div>

your controller

angular.module('starter.controllers', ['ionic', 'ngCordova', 'ngCordovaOauth'])

.controller('FacebookCtrl', function($cordovaOauth, facebook) {

     $scope.login = function() {
        $cordovaOauth.facebook("FACEBOOK_APP_ID", ["email", "public_profile"], {redirect_uri: "http://localhost/callback"})
            .then(function(result) {
                    console.log("Auth Success..!!"+result.access_token);
                    displayData($http, result.access_token);
                }, function(error) {
                    console.log("Auth Failed..!!"+error);


The $cordovaOauth.facebook() method requires several parameters:
1. APP ID: The ID of the facebook developer app. This is found on the dashboard of the app.
2. Permissions: These are for accessing information about the user. A complete list of permissions can be found on the Facebook permissions page.

The $cordovaOauth.facebook() method returns a promise object. Once the user has given access to our app, the displayData function is called that makes a Graph API request to retrieve a range of information about the user.

Here is the displayData function, which should be placed in the script tag created above:

function displayData($http, access_token)
    $http.get("https://graph.facebook.com/v2.2/me", {params: {access_token: access_token, fields: "name,gender,location,picture", format: "json" }}).then(function(result) {
        var name = result.data.name;
        var gender = result.data.gender;
        var picture = result.data.picture;

        var html = '<table id="table" data-role="table" data-mode="column" class="ui-responsive"><thead><tr><th>Field</th><th>Info</th></tr></thead><tbody>';
        html = html + "<tr><td>" + "Name" + "</td><td>" + name + "</td></tr>";
        html = html + "<tr><td>" + "Gender" + "</td><td>" + gender + "</td></tr>";
        html = html + "<tr><td>" + "Picture" + "</td><td><img src='" + picture.data.url + "' /></td></tr>";

        html = html + "</tbody></table>";

        document.getElementById("listTable").innerHTML = html;
        $.mobile.changePage($("#profile"), "slide", true, true);
    }, function(error) {
        alert("Error: " + error);

Here a Graph API request is made to retrieve the user’s name, profile picture and gender. While making Graph API requests the access token is needed. Then table is created and added to the profile page content.


Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I'm Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.