Ionic Facebook Login – The Complete Guide

It is very easy to integrate Facebook login in your Ionic app. First of all you need to have an account on https://developers.facebook.com/

Lets start creating a new Ionic project.

ionic start FacebookIntegration blank --type=ionic-angular

Now lets make a simple design for Facebook login page. For this tutorial I’ll just modify the home.html file.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <button ion-button (click)="login()">Login with Facebook!</button>
  </div>
  <div>
   
  </div>
</ion-content>

Now let’s create a new app on https://developers.facebook.com/

Now click on the ‘Products’ link at the left panel and then add ‘Facebook Login’. Now go to your app settings an get the ‘App ID’. Now click on ‘Add Platform’ and select Android.

Now you need to fill some details. Like package name, key hashes etc. You can find the package name in the config.xml file. We’ll talk about key hashes a bit later.

We need to install the Facebook plugin for Ionic. Run the two commends below in order to install the plugin.

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="AppID" --variable APP_NAME="AppName"
npm install @ionic-native/facebook

Replace the ‘AppID’ with your ‘App ID’ and ‘AppName’ with your app name.

Now open the package.json file. It should look like this

...
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/facebook": "^5.4.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
...

We’ll change version of everything starting with ‘@ionic-native’ to 5.x.x. Now the file will look like

...
    "@ionic-native/core": "^5.4.0",
    "@ionic-native/facebook": "^5.4.0",
    "@ionic-native/splash-screen": "^5.4.0",
    "@ionic-native/status-bar": "^5.4.0",
...

Now run ‘npm install’ in order to install the new versions. Now you have to use ‘/ngx’ whenever you are importing something from ‘ @ionic-native’.
e.g.

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

Now, open app.module.ts file and then add this import.

import { Facebook } from '@ionic-native/facebook/ngx';

Also, declare in @NgModule providers, so it will look like this.

providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Facebook
  ]

Now, let’s add the import in our home.ts file

import { Facebook } from '@ionic-native/facebook/ngx';

Inject the Facebook plugin in the constructor

constructor(public navCtrl: NavController, private fb: Facebook) {

  }

Let’s add some more code to the home.ts file

login() {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then(res => {
        console.log(res)
        if(res.status === "connected") {
          this.getUserDetails(res.authResponse.userID)
        } else {
          
        }
      })
      .catch(e => console.log('Error logging into Facebook', e));
  }

  getUserDetails(userid) {
    this.fb.api("/"+userid+"/?fields=id,email,name,picture",["public_profile"])
      .then(res => {
        console.log(res);
      })
      .catch(e => {
        console.log(e);
      });
  }

Now if you run the app, you’ll end up getting something like this

We need to create a keystore and place it inside the /platforms/android folder. To create a new keystore use this command

$ keytool -genkey -v -keystore app.keystore -alias demo -keyalg RSA -keysize 2048 -validity 10000

Here ‘app.keystore’ is the name of the keystore file and ‘demo’ is the alias.

Now we need to create a debug-signing.properties file inside
the /platforms/android folder and add the following code.

# location of keystore
storeFile=app.keystore

# Key alias
keyAlias=demo

# Store password
storePassword=123456

# Key password
keyPassword=123456

Now we need to generate the hash of the keystore. Go through this article first to generate hash. Here is the official way to generate hash.

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

Most probably you will end up generating a wrong hash. Copy that 28 character hash and paste it in the Facebook app settings. Now you’ll see something like this.

Now type the hash showing in the error message in the Facebook app settings page and it should work.

Now, let’s add some more code.
The final home.ts file looks like

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

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

  isLoggedIn: boolean = false
  user: any

  constructor(public navCtrl: NavController, private fb: Facebook) {

  }

  login() {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then(res => {
        console.log(res)
        if(res.status === "connected") {
          this.getUserDetails(res.authResponse.userID)
        } else {
          
        }
      })
      .catch(e => console.log('Error logging into Facebook', e));
  }

  getUserDetails(userid) {
    this.fb.api("/"+userid+"/?fields=id,email,name,picture",["public_profile"])
      .then(res => {
        this.isLoggedIn = true
        this.user = res
        console.log(this.user)
      })
      .catch(e => {
        console.log(e);
      });
  }

And home.html looks like

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <button ion-button (click)="login()" *ngIf="!isLoggedIn">Login with Facebook!</button>
  </div>
  <div *ngIf="isLoggedIn">
    <img src="{{user.picture.data.url}}" alt=""><br>
    <i>{{user.name}}</i><br>
    <i>{{user.email}}</i><br>
  </div>
  
</ion-content>

Here is the full code https://github.com/sky741126/Ionic-FB-Login

If you have any suggestion or question please leave a comment below. If you like this article or want to help me, please consider donating anything you can.