Ionic 3 Facebook Login with Firebase

Facebook, Google, Twitter and other third-party service provider are the industry standards for token-based authentication and authorization for the web, desktop, and mobile application. These third-party service providers act as an intermediary on the behalf of the end user allows to login without exposing the user’s password.

We can Facebook in ionic in two-way one without Facebook native plugin using in-browser and other with a Facebook native plugin for ionic.

In this example, we learn how to use the Facebook native plugin to authenticate with Ionic through Firebase. Last few days I was trying to add Facebook authentication in Ionic, faced a lot of problems as I newbie to the ionic. They are many blogs on this topic, unfortunately, didn’t get the satisfying result.

Step #1: Setup the project and Installing the required Plugin

ionic start ionicFbFirebase blank
npm install firebase --save

Step 2#: Set up Android app in Firebase Console

In the https://console.firebase.google.com, we to have click on add new project and name it as FirebaseFBlogin.

Creating new project will take you to project dashboard in firebase console, we have to get Firebase API for our ionic apps, as we are using Ionic which is hybrid, click on Add Firebase to your web app.

 

Clicking on this button we get the Firebase API config information and add this API code and import firebase in app.components.ts as a highlight.

Modify the app.component.ts and replace this dot with your Firebase API value.

import { Component } from '@angular/core';
.......

import { HomePage } from '../pages/home/home';
import firebase from 'firebase';

var firebaseConfig = {
    apiKey: ".....",
    authDomain: ".....",
    databaseURL: ".....",
    projectId: ".....",
    storageBucket: ".....",
    messagingSenderId: "....."
  };

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      firebase.initializeApp(firebaseConfig);
    });
  } 
}

Step 3 #: Facebook Developer Console

In the  https://developers.facebook.com/apps and we have to create a new app in Facebook’s developer dashboard and this app in the Facebook developer will use to ask our users for their permission wot log them into our Ionic application. 

In the Facebook app project dashboard, we have complete few tasks

First, we will select the app category as “Apps for Pages” and we have to copy both Facebook App ID and App Secret key and past in these value to Firebase Facebook authentication console.

 

Enable Facebook Sign-In in Firebase

In Firebase console and enable Facebook authentication for our app. To enable Facebook we need to go to  Firebase Console and locate the app you’re using.
Inside the app’s dashboard, you’re going to go into Authentication > Sign-In Method > Facebook and click the Enable toggle to enable. We need to copy and past both Facebook App ID and App secret in the Firebase Facebook authentication method.

In the Firebase console, we will add the platform for the website, Android platform and IOS for Apps. 

To add the platforms, inside your Facebook dashboard click on settings, then, right bottom of the app’s information you’ll see a button that says Add Platform, click it.

You’ll get a prompt asking you which platform, adding the platform for website and IOS are straightforward as in the image below.

  1. For a website, just add the value from the Authorised domain from the Firebase console of the authentication option, we have two value one as local and other with domain end with ***.firebase.com. Select the second value end domain with **.firebase.com and past the value in website platform in the facebook app basic setting.
  2. For IOS we have to add Ionic app ID from config.xml and by default it is io.ionic.start, but our case we had to change its value to com.edupala.fblogin.
  3. Configure an Android platform for Facebook setting is a little bit tricky. we have to fill three fields for adding Android platform. Inside the Ionic app we will get the ID from config.xml and by default it is io.ionic.start and past the ID the Google play package name and we also have to add value for the Class Name, the value for this field is Ionic App ID.App Name in config.xm. We also have to specify the key hashes value of our Ionic app.

Getting key hashes value is a little bit tricky, till now we didn’t add any code related to Facebook authentication, first we will set all the configure and will add authentication code later.




Step for Getting key Hashes for Ionic app for Facebook

To run apps quickly, we can generate key hashes for your development environments. Add these to your Facebook developer profile for the sample apps. Keytool, for generating the key hashes, is included with the Java SE Development Kit (JDK) that you installed as part of setting up your development environment. OpenSSL is available for download from OpenSSL.

// For IOS n linux

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

// On Windows, run:

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | opensslbase64

If we get base64 by running above command, we can directly past the value to Key Hashes in Android platform field and if we get SHA1 value then we have to convert the SHA1 value to base 64. You will get some hexadecimal value and copy the SHA1 value to your clipboard like this 6C:E0:80:2D:60:5C:68:FD:FA:0A:6C:E5:5A:72:64:DD:26:8D:44:84

We have to convert this hex value to SHA1 value open this site http://tomeko.net/online_tools/hex_to_base64.php363 to convert your SHA1 value to base64.  This is SHA1 value for key hashes and the past in Facebook Android app dashboard.

 

Step 4: Ionic Facebook Login page

We have to add the Facebook native plugin in our apps, we have already got our Facebook App ID and app name from developers. facebook.com dashboard. Replace the App ID and app name with your ID and app name.

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="456565" --variable APP_NAME="myApplication"

Now we have done all the external configuration and now time to add code Facebook authentication code to our Ionic apps. In home.html we add a button to login with method loginWithFacebook() and modify the following code in home.html.

<ion-header>
  <ion-navbar>
    <ion-title>Facebook Login in Ionic</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="loginWithFacebook()">Login With Facebook</button>
</ion-content>

In home.ts file we have to complete the following task.

  1. To import the Firebase and Facebook plugin.
  2. Implement the method loginWithFacebook()

In loginWithFacbook() method we are using Facebook OAuth provider and once the user login authenticates successfully we will get an access token from Facebook and will pass token and save it to Firebase. We will use Firebase.auth method to verify the authentication.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import firebase from 'firebase';
import { Facebook } from '@ionic-native/facebook'


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public facebook: Facebook) {}


  loginWithFacebook(): Promise<any> {
    return this.facebook.login(['email'])
      .then( response => {
        const facebookCredential = firebase.auth.FacebookAuthProvider
          .credential(response.authResponse.accessToken);

        firebase.auth().signInWithCredential(facebookCredential)
          .then( success => { 
            alert("Firebase success: " + JSON.stringify(success)); 
            
          });

      }).catch((error) => { console.log(error) });
  }
}