# Facebook Login ![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYDducsx25VrnDvivv%2F-LfYFjn5c1bkxuojoLyG%2Farticle-040917183330.png?alt=media\&token=33fc61e9-8862-4df5-aa8c-9b2deeec7840) **Steps to follow for adding facebook login** ### Step 1: Facebook Developer Console The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our Ionic application. For that you’ll need to go to [**facebook developer console**](https://developers.facebook.com/apps) and create a new app. ![create facebook app](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYH8H1J_-xrOL9W6in%2F-LfYHE69wl796VCqOyn5%2FScreen%20Shot%202019-05-23%20at%2010.59.48%20AM.png?alt=media\&token=5fbdf016-c4ab-4e54-a89a-c5d1bce811d4) Once we finish creating our app, we will go to facebook app dashboard and take app id from there. It will help us in installing Facebook plugin in our app ![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYH8H1J_-xrOL9W6in%2F-LfYHz7ufpXbdkXQzszd%2FScreen%20Shot%202019-05-23%20at%2011.00.27%20AM.png?alt=media\&token=074a5c0d-f366-4b0f-a5ee-af0e51651057) ### Step **2**: Install the Cordova Plugin In this step we will install the Cordova plugin in our Ionic app. For that, open your terminal and type ``` ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication" ``` You’ll need to replace the values or `APP_ID` and `APP_NAME` for your real credentials. You can find both of those inside your Facebook Developers Dashboard. It's bit clumsy to work with cordova plugin so ionic team created **Ionic Native**, which is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” way. So now we will open our terminal and try this command ``` npm install --save @ionic-native/facebook ``` for installing facebook package from Ionic Native ### Step **2**: Add your Platforms to Facebook Once everything is set up in our development environment, we need to let Facebook know which platforms we’ll be using (*if it’s just web, iOS, or Android*). In our case, we will add all three platforms iOS , web and Android. To add the platforms, go ahead and inside your Facebook dashboard click on settings, then, right below the app’s information you’ll see a button that says **Add Platform**, click it. To add the platforms, go ahead and inside your Facebook dashboard click on settings, then, right below the app’s information you’ll see a button that says **Add Platform**, click it. Once you click the button, you’ll see several options for the platforms you’re creating ![Add Platforms in facebook dashboard](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYH8H1J_-xrOL9W6in%2F-LfYMl6Kmd08qe-Npuc5%2FScreen%20Shot%202019-05-23%20at%2011.56.18%20AM.png?alt=media\&token=16db9879-6b4c-4c3b-a275-9070e287879c) , **let’s start with iOS,** you’ll see a form asking you for some information, right now we just need the `Bundle ID`. ![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYH8H1J_-xrOL9W6in%2F-LfZVHzRKCgd_QfwL1BC%2FScreen%20Shot%202019-05-23%20at%205.13.09%20PM.png?alt=media\&token=05a17245-4eae-48a0-aa80-959b70eaaaea) If you don’t know where to get the Bundle ID, it’s the same as the package name when you create an Ionic app, it’s inside your `config.xml` file: ``` ``` Once you add the Bundle ID, just follow the process to create the app. **for Android,** the difference is that instead of `Bundle ID`, Android calls it “Google Play Package Name.” ### Step 3: Enable Facebook Sign-In in Firebase. Now that everything is set up on Facebook’s side, we need to go into our Firebase console and enable Facebook authentication for our app. To enable Facebook, you’ll need to go to [your Firebase Console](https://console.firebase.google.com/) and locate the app you’re using. Once you’re inside the app’s dashboard, you’re going to go into **Authentication > Sign-In Method > Facebook** and are going to click the **Enable** toggle. ![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYH8H1J_-xrOL9W6in%2F-LfZY8NnKwOVp1LTxX3Q%2FScreen%20Shot%202019-05-23%20at%205.25.58%20PM.png?alt=media\&token=4d95500b-8b16-409f-a40c-e915a1afaeb3) It will ask you App ID and App secrete you will copy it from your Facebook console, under your app’s settings. ![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LfYH8H1J_-xrOL9W6in%2F-LfZYVAfy3D2jFMBsqU0%2FScreen%20Shot%202019-05-23%20at%205.27.31%20PM.png?alt=media\&token=8243d0a2-3267-4341-ab03-7fc131f17654) ### Step 4: Authenticate Users. The first thing we need to do is to get the authorization token from Facebook, to do that, we need to import Facebook plugin from Ionic Native and ask our user to log in. ``` import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx'; constructor(private fb : Facebook, private platform: Platform) { } doLogin() { if(this.platform.is('cordova')){ this.fb.login(['email']) .then((response:FacebookLoginResponse) => { this.loginWithFacebook(response.authResponse.accessToken); }).catch((error) => { alert('error:' + JSON.stringify(error)) }); } else{ this.fbLogin(); } } ``` This function first we will check platform of user if it is browser then we will open pop up for facebook log in and if it is IOS or android platform then we follow native facebook login process which will give you Firebase Token and from this token we will login user to firebase app ``` loginWithFacebook(accessToken) { this.loginType = 'Login with Facebook' const credential = firebase.auth.FacebookAuthProvider .credential(accessToken); return this.fireAuth.auth.signInWithCredential(credential) } ``` ``` fbLogin(): Promise { this.loginType = 'Login with Facebook' return this.fireAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()) } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://enappd-apps.gitbook.io/apps/ionic-4-full-app/pro-pack-features/social-sharing/facebook-login.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.