Adding social login in ionic using Firebase

18/07/2015 00:00

Steps to add social login button for github in ionic

Create a new application in github from here.
Once the GitHub app is created, we’ll take a client ID and a client secret and paste them into the GitHub authentication section in our Firebase app dashboard.
Create a new app in ionic

 $ ionic start myApp blank
 $ cd myApp
 $ ionic plugin add cordova-plugin-inappbrowser
 $ ionic add angularfire

Add the following files in ionic

 <script src="lib/firebase/firebase.js"></script>
 <script src="lib/angularfire/dist/angularfire.min.js"></script>

Inject Firebase as a dependency of your app as follow in app.js

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

Inside contoller add the following function

  $scope.loginGithub = function(authMethod) {
     var ref = new Firebase("https://gurinder.firebaseio.com");
     ref.authWithOAuthPopup("github", function(error, authDataGithub) {
       if (error) {
         console.log("Login Failed!", error);
       } else {
         $scope.authDataGithub = authDataGithub;
         console.log("Authenticated successfully with payload:", authDataGithub);
       }
     });
   };

Call this function on button click inside HTML file

 <ion-pane ng-controller="AppCtrl">
  <ion-content>
   <button class="button button-royal icon ion-social-github" ng-click="loginGithub()"></button>
  </ion-content>
 </ion-pane>

We need just few changes to Login using other social sites like facebook, twiiter etc. Refer to this link to do that.