This lesson (ionic login with facebook), we’re going to learn how to integrate facebook login for ionic application and fetch user’s information from facebook.


Ionic login with Facebook Video Lesson

First we need to create new project then we need to add platform

ionic start fblogin blank
cd fblogin
ionic cordova platform add android

To add a facebook plugin (cordova-plugin-facebook4) we need to create APP_ID and APP_NAME.If you don’t know, how to create APP_ID and APP_NAME, please visit

ionic plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME"
npm install --save @ionic-native/facebook


Now we have to import modules on app.module.ts page then we can write a code for home pages


<ion-content padding>
 <div *ngIf="isUserLoggedIn" style="text-align:center">
 <img src="{{}}">
 <button ion-button clear (click)="logout()">Logout</button>
<ion-footer *ngIf="!isUserLoggedIn">
 <button ion-button block (click)="loginWithFB()">Login with Facebook</button>

Explanation: We’ve created two buttons for login and logout; we also display images, name, and email address


    this.fb.login(["public_profile","email"]).then( loginRes => {
      this.fb.api('me/?fields=id,email,first_name,picture',["public_profile","email"]).then( apiRes => {
        this.userInfo = apiRes;
        this.isUserLoggedIn = true;

      }).catch( apiErr => console.log(apiErr));

    }).catch( loginErr => console.log(loginErr) )

    this.fb.logout().then( logoutRes => 
      this.isUserLoggedIn = false
    ).catch(logoutErr => 

Explanation: we need to import {Facebook} from '@ionic-native/facebook' then we need to create an object. By using that created object we can call this.fb.login() for login, also we have used this.fb.api() to get user’s information

Please login to download source code Login Here
Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.