Ionic Facebook Login and User Profile Data [v3]

64 Shares

Facebook login with Ionic is still one of the most requested articles, and the good news for you is: It’s not that hard at all!

In this Quick Win we will allow our user to login with his Facebook account, and after we are authenticated we make a request to grab some user information from his Facebook profile. We will have to create a new Facebook app and connect our Ionic app to that app, but you will see it takes us only a few minutes to get a result like below.

Note: This is the iOS behaviour and seems to be standard on that platform for some reasons. On Android, your Facebook app should open directly without those additional clicks!

Setting up a Facebook App

Before we start with our Ionic app we need a Facebook app, so go to the developer page and create a new app.

Once your app is created you need to add the iOS and Android platform. Therefore, navigate to Settings and hit + Add Platform. After adding both platforms it should look like this:

Notice that I already added an iOS Bundle ID and Android Google Play Package Name?

This is the next step for you, because your fields are still empty!

This is the same ID that our app has inside the config.xml file, so if you already have an app add the Id to those fields.

Otherwise, let’s create our app first and install the Facebook plugin from Ionic Native.

At this point you also need the App ID of your Facebook app as well as the name ecause they must be passed to the Cordova plugin as you can see in the statement:

ionic start fbLogin blank
cd fbLogin
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOURID" --variable APP_NAME="YOURAPPNAME"
npm install --save @ionic-native/facebook

ionic start fbLogin blank

cd fbLogin

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="YOURID" --variable APP_NAME="YOURAPPNAME"

npm install --save @ionic-native/facebook

If you started a new app like me, you still need to make sure that your config.xml id and the ids for iOS and Android inside your Facebook app are the same. In my case this looked like this:

<widget id="com.devdactic.academytest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

1	<widget id="com.devdactic.academytest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Your bundle id is always your reverse domain or team name, and this is also needed when you submit your iOS or ANdroid apps later.

Now we just need to make sure that our Facebook plugin is loaded by adding it to the src/app/app.moduel.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Facebook
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

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

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

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

Facebook

]

})

export class AppModule {}

That’s all for the preparation. Actually it’s really just about creating the Facebook app, adding it with the right values to our app and adding the Platforms to the Facebook app with our id.

Simple, right?

Implementing Facebook Login

Actually the hard part is already over, now we are almost done. Inside our view we only display a button in the beginning to start our Facebook login, and once the user is logged in we display some more personal data below including the user image!

Go ahead and change your src/pages/home/home.html to:

<ion-header>
  <ion-navbar>
    <ion-title>
      FB Login
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)="loginWithFB()">Login!</button>

  <ion-card *ngIf="userData">
    <ion-card-header>{{ userData.username }}</ion-card-header>
    <img [src]="userData.picture" />
    <ion-card-content>
      <p>Email: {{ userData.email }}</p>
      <p>First Name: {{ userData.first_name }}</p>
    </ion-card-content>
  </ion-card>

</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

FB Login

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button full (click)="loginWithFB()">Login!</button>

<ion-card *ngIf="userData">

<ion-card-header>{{ userData.username }}</ion-card-header>

<ion-card-content>

<p>Email: {{ userData.email }}</p>

<p>First Name: {{ userData.first_name }}</p>

</ion-card-content>

</ion-card>

</ion-content>

As we have set up all before, the login with Facebook functionality is now only one line. Also, we can pass into this call which information from the user profile we want to access, in this case it is email and public_profile. Therefore, once we log in Facebook will ask for those permissions like in the image below.

Once we got the login token we could e.g. login to Firebase with that token, or simply continue to make requests to the Facebook API!

We try to load a few fields from the current user which is in this case “me” and set the data from the result to our local userData variable. You can test out all the Graph API fields and calls with the Facebook Graph API Explorer!

Now to the code, replace all inside your src/pages/home/home.ts with:

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

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

  constructor(private facebook: Facebook) { }

  loginWithFB() {
    this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
      this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
        this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
      });
    });
  }
}

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

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

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

userData: any;

constructor(private facebook: Facebook) { }

loginWithFB() {

this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {

this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {

this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}

});

}

Once your user is logged in, you should now see all of the data inside the view like in the image below of my profile!

I hope this helps you to implement Facebook login in your Ionic app, it really comes down to just a few steps and is something all modern apps have for their users!

You can find a video version of this Quick Win below.

Comments on Ionic Facebook Login and User Profile Data [v3]

az26 says:

July 19, 2017 at 3:33 pm

hey simon, can i make it with firebase together? I mean in firebase there is option to make Sign in with facebook so when I do this tutorial, if I use “this auth.state” it will know if i log inlogout if i use also with firebase?

Reply
1. Marcos Ribeiro says:
  
  November 15, 2017 at 12:59 am
  
  Hey @azdir:disqus, do you having success on this integration? I need to do this too! Thanks!
  
  Reply
Michelle says:

November 12, 2017 at 12:00 pm

How do I navigate to another page after logging in with facebook?

Reply
1. Rako Nda ᵀᴴᴱ ᴼᴿᴵᴳᴵᴻᴬᴸ says:
  
  November 14, 2017 at 1:57 pm
  
  if you check https://ionicframework.com/docs/native/facebook you can found the logic to do whatever you want after login.
  
  Reply
  1. Michelle says:
    
    November 14, 2017 at 2:13 pm
    
    I got it working 🙂 Thanks
    
    Reply
    1. Noel Hwande says:
      
      December 9, 2017 at 7:01 pm
      
      Hi. How were you able to get this to work?
      
      Reply
      1. Michelle says:
        
        December 11, 2017 at 9:39 am
        
        Hi
        
        Make sure you are using
        @ViewChild(Nav) nav: Nav;
        
        in your ts file, where you are placing the navigation code
      2. Noel Hwande says:
        
        December 19, 2017 at 5:40 pm
        
        Thanks very much for your help.
      3. Sanchit Mahajan says:
        
        January 15, 2018 at 6:36 pm
        
        Will you share your code? Thank You.
    2. Sanchit Mahajan says:
      
      January 14, 2018 at 4:29 pm
      
      Will you share your little code? Thank You.
      
      Reply
RhysC says:

November 23, 2017 at 6:37 am

Awesome post Simon, I was searching around for how to get the users profile pic and this really helped. Cheers.

Oh im also writing up a post about how to deal with the ‘account exists with different credentials’ issue with firebase if they have already signup with a username and password – will send it to you when done.

Reply
1. beetch! says:
  
  February 21, 2018 at 5:16 pm
  
  Hello RhysC i am having difficulty using firebase.auth() with this example i see youve done it care to shed some light. This is what is used previously. i am retrieve first and last name to save in my firebase database
  
  facebookLogin(){
  this.facebook.login([‘public_profile’,’email’]).then( (response: FacebookLoginResponse) => {
  const facebookCredential = firebase.auth.FacebookAuthProvider
  .credential(response.authResponse.accessToken);
  
  firebase.auth().signInWithCredential(facebookCredential)
  .then((newUser) => {
  debugger
  this.userProfile.child(newUser.uid).set({
  email: newUser.email,
  points:0,
  firstName: newUser.displayName
  })
  
  console.log(“Firebase success: ” + JSON.stringify(newUser));
  })
  .catch((error) => {
  console.log(“Firebase failure: ” + JSON.stringify(error));
  });
  
  }).catch((error) => { console.log(error) });
  }
  
  Reply
SarmAd AbbaSi says:

November 30, 2017 at 7:10 pm

i have getting ‘The provided app ID does not look like a valid app ID’ error.What is the way of removing this error?

Reply
supriya babar says:

December 6, 2017 at 12:42 pm

when user login with facebook, I want to store user data to the mysql database , please help me with this

Reply
1. Bonny says:
  
  December 18, 2017 at 2:12 am
  
  Have a method/function below the following (this.userData) that takes your user data object and send it to your rest api.
  this.userData = {email: profile[’email’], first_name: profile[‘first_name’], picture: profile[‘picture_large’][‘data’][‘url’], username: profile[‘name’]}
  
  Something like
  userService.signupWithFacebook(this.userData).then(success => console.log(‘success’)).catch(errors => console.log(errors));
  
  Reply
  1. beetch! says:
    
    February 22, 2018 at 3:55 pm
    
    Hi bonny how do i use with facebook credential to log into firebase
    
    const facebookCredential = firebase.auth.FacebookAuthProvider
    .credential(response.authResponse.accessToken);
    
    firebase.auth().signInWithCredential(facebookCredential)
    .then((success) => {
    console.log(“Firebase success: ” + JSON.stringify(success));
    this.userProfile = success;
    
    Reply
  2. JAM says:
    
    February 4, 2019 at 12:50 pm
    
    Thanx for this post simon.
    hey anyone help me?
    @supriya_babar:disqus I have written this code after that stored all data into nativestorage in ionic app.
    But how to stored data into mysql database? (Want same database manged for APP & Website)
    Please anyone give me solution or suggestion.
    
    Reply
Henry Vallenilla says:

December 8, 2017 at 1:03 am

Hello, I have this error: “cordova_not_available”, What can be ?

Reply
1. Syed M Umer says:
  
  January 3, 2018 at 2:33 pm
  
  Run your app on real device or emulator
  
  Reply
2. saidmrn says:
  
  January 11, 2018 at 12:46 am
  
  or use ionic cordova run browser
  
  Reply
Subhani Shaik says:

January 3, 2018 at 6:57 pm

How about implementing Google login

Reply
1. supriya babar says:
  
  May 12, 2018 at 11:36 am
  
  I doesnot tried it.
  
  Reply
Sanchit Mahajan says:

January 14, 2018 at 4:11 pm

Thanx Sir…..

Reply
Sanchit Mahajan says:

January 15, 2018 at 6:13 pm

How to divert to new page after login?

Reply
amgad wagdy says:

February 4, 2018 at 10:12 pm

use this method to facebook remote logout
http://www.townoftech.com/facebook-remote-logout/

Reply
soham says:

February 6, 2018 at 12:53 pm

i tried this not working for me .i am getting this
App Not Setup: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions. message please help

Reply
Abdoulahi Dedory Fall says:

April 11, 2018 at 9:11 pm

woderful tuto.
it only work for endroid emulator but not on real device. how to figure out?

Reply
supriya babar says:

May 12, 2018 at 11:33 am

login with facebook only work for my account ,When i try with other peoples id it does not work is gives https://uploads.disquscdn.com/images/4a2420ff693a0f403b97ece5574e11c3a980abc1e67df4bd888d1f4a1dee36ad.png Error shown in the image.Please help me. How to Remove Development Mode or add other mode.

Reply
valmy roi says:

May 16, 2018 at 7:02 pm

Is it possible to store les image in database or somewhere else in the app for futher usage ?

Reply
Mustafa Bekeç says:

July 31, 2018 at 3:54 am

https://uploads.disquscdn.com/images/079db2635e4497482a4510400d1afe1a6e412f041a2723b0cc9f7daa5d1d18ba.png

You do not have any hash keys in your training videos. How is it possible?

I get this error when I create a Hash Key and save it in the Developer console. What is the problem ?

Reply
Sanchit Mahajan says:

September 3, 2018 at 8:29 pm

In my app when i tried to login through facebook, the app name displays on facebook login page is another app name from my facebook developer profile. https://uploads.disquscdn.com/images/0381304bbc32956bd5d3d8a17d2962bedf2604c66fb2fa526d79746625b1f468.png

Reply
Amir Fitri says:

March 10, 2019 at 6:47 am

Hi, Im getting Object is not a function. Somebody know to solve it?

Reply

Ionic Academy | Learn Ionic

Ionic Facebook Login and User Profile Data [v3]

Setting up a Facebook App

Implementing Facebook Login

Comments on Ionic Facebook Login and User Profile Data [v3]

Leave a Reply Cancel reply