Hi everyone, in the previous post we talked about "Quick Start with Ionic + Firebase"; assuming you already know a bit about Firebase and how to configure it in your ionic app, let's see how to setup Facebook login.

Start first by creating a Facebook app at https://developers.facebook.com/. You will be required to sign-in with your Facebook account.

Once you already have a Facebook app, retrieve your app's package name by opening config.xml in the root directory of the app.

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

Additionally, keep track of your Facebook app's App ID and App Secret as you'll be needing it later on.

Proceed then by adding the iOS Platform to your Facebook app ► Settings. Place in your app's package name under Bundle ID.

Proceed then by adding the Android Platform to your Facebook app ► Settings. Place in your app's package name ****under Google Play Package Name.

Start by generating the SHA-1 certificate by opening the terminal and calling the following commands:

For Windows

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore

For Mac

keytool -exportcert -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore

Default Keystore Password: android

Head to your Firebase Console, and add an Android app. Place in your Package Name and SHA-1 certificate.

Afterwards, download google-services.json and place it to the root directory of your app.

Finally, generate the Key Hash by calling the following command:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Default Keystore Password: android

Head back to the Android Platform on your Facebook app, and place in your Key Hash.

Add Facebook Login by selecting "+ Add Product", and enable Client OAuth Login and Web OAuth Login.

Now head over to the Firebase console - Authentication ► Sign-In Method, and enable Facebook. Place in your Facebook App ID and App Secret. This will allow your users to sign-up and sign-in using their Facebook accounts.

Finally, install the cordova-plugin-facebook4 plugin, place in your App ID and App Name.

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

Now we have configured with success our Facebook Login and ready to use in your Ionic project.

In the next post we will show how to do authentication with Google Login! See you all soon.

See Also

fireIonic - Ionic 3 Firebase Starter Kit