Ionic Facebook Login and User Profile Data


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!

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

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:

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:

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:

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:

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.facebook-login-app

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:

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.

  • az26

    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?

    • Marcos Ribeiro

      Hey @azdir:disqus, do you having success on this integration? I need to do this too! Thanks!

  • Michelle

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

    • Rako Nda ᵀᴴᴱ ᴼᴿᴵᴳᴵᴻᴬᴸ

      if you check you can found the logic to do whatever you want after login.

      • Michelle

        I got it working 🙂 Thanks

        • Noel Hwande

          Hi. How were you able to get this to work?

          • Michelle


            Make sure you are using
            @ViewChild(Nav) nav: Nav;

            in your ts file, where you are placing the navigation code

          • Noel Hwande

            Thanks very much for your help.

          • Sanchit Mahajan

            Will you share your code? Thank You.

        • Sanchit Mahajan

          Will you share your little code? Thank You.

  • RhysC

    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.

  • SarmAd AbbaSi

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

  • supriya babar

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

    • Bonny

      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));

  • Henry Vallenilla

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

    • Syed M Umer

      Run your app on real device or emulator

    • saidmrn

      or use ionic cordova run browser

  • Subhani Shaik

    How about implementing Google login

  • Sanchit Mahajan

    Thanx Sir…..

  • Sanchit Mahajan

    How to divert to new page after login?