Use Facebook Sign-In with Ionic and Firebase

10 million of people use Facebook Login everyday to sign-in to applications across the entire web – as per Facebook. By integrating a fully working Facebook sign-in process with your app, your users will have a safe, authentic and consistent experience. They even don’t need to go through such monotonous credentials re-entering process to sign-in to your application. Having this easy and reliable Facebook Login functionality generates a win-win situation for both users as well as developers. That’s why you should include Facebook Login functionality in your application. As this “Why” is clear to you, so let’s proceed to “How” to use Facebook sign-in with Ionic and Firebase to make the development process even easier.

First-off, let’s have a look on the brief of this “How to” process:

1. Sign-in and navigate to your Facebook developer account. Now, create a new app and supply the credentials.

2. Enter into your Firebase console and authorize Facebook authentication for app with the credentials from the aforementioned step.

3. Writing the code to get user authorization from the Facebook and then authentication of that user into Firebase app.

After this brief, let’s start with an in-depth explanation of each step:

1. Facebook Developer Account

Firstly, you have to create a new application via Facebook developer account. So navigate to https://developers.facebook.com/apps. Register yourself as a developer (if not registered yet) and create a new application.

 

A short form will pop out as you click on “Create App Id” button. Add a “Display Name” for your app and a contact email address that will be public to your users.

 

 

Once after completing “Create App Id” process, you will land to the app’s dashboard. Here you can notice the “APP ID” at the top of the page, adjacent to “View Analytics” option. Note it down as you will require it during Facebook plugin installation.

 

Cordova Plugin Installation

Once you have done with your new app creation on Facebook, it is the time to proceed with the Cordova plugin installation in your Ionic app to make the app calling the Facebook Sign-in widget. So, start off with the opening of your terminal and write the following (everything in the same line):

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="168934381" --variable APP_NAME="ABCApplication"

Now replace the values of APP_ID & APP_NAME with your actual credentials. Both of these values can be found under your Facebook Developer Dashboard. Dealing with Cordova plugin is quite difficult. Big thanks to the Ionic team who gave birth to Ionic Native (a TypeScript wrapper for the Cordova plugins) that can be used in a more Ionic way for adding any native functionality in the app as per your needs.

It is the time to install Facebook package from Ionic Native. For that, you need to again open your terminal and write the following:

$ npm install --save @ionic-native/facebook

Once after completing the installation process, now let your app to utilize it. You can do this via importing it in your app.module.ts file.

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar'
import { Facebook } from '@ionic-native/facebook'

@NgModule({
...,
providers: [ SplashScreen, StatusBar, Facebook ]
})
export class AppModule {}

Add Platform to Facebook

All is set up under development environment. Right? Now lets Facebook know which platforms would you prefer. For example, you’re considering two platforms, iOS and Android. To add both these platforms, navigate to your Facebook dashboard and tap the settings option. There you will notice a button “Add Platform” just right under the app’s information. Click on this button.

 

After clicking on this button, you can notice several options for the platforms you’re adding. Let’s first begin with iOS platform. Here you will have to fill the value for “Bundle ID” option.

 

In case you don’t know the Bundle ID, check your default package name while creating an Ionic App (under your config.xml file). You can use this same name for your Bundle ID.

widget id="co.ionic.facebook346" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

We recommend you to replace “co.ionic.facebook346″ (or what you see there) with something which is much more “On Brand” in tune with your app or business. After adding Bundle ID, carry on with the app creation process and follow the same process for the Android platform. This process differentiates itself in the only way of calling it “Google Play Package Name” in place of “Bundle ID”.

 

2. Facebook Authentication Under Firebase Console

As all has been set up under Facebook developer console, you need to navigate to Firebase control for Facebook authentication for your app.

To authorize Facebook sign-in, navigate to your Firebase Console and find the app you’re making use of. Under the app’s dashboard, follow this path:

Authentication > Sign-In Method > Facebook, and click on “Enable” toggle option.

 

Once you’ve clicked it, you will see some field boxes asking for some information, like your Facebook App ID and App secret key. If you don’t know the value for these field boxes, you can find both these under your Facebook console, inside the settings of your app.

3. Users Authentication

You can authenticate your users in whatever step of your app’s process you want. Here is the code that you can utilize by just copying into whichever page you’re using. The foremost thing is to avail the authorization from Facebook. For that, you have to import Facebook plugin from Ionic Native and request your users to sign in.

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

constructor(public facebook: Facebook){}

facebookLogin(): Promise<any> {
return this.facebook.login(['email']);
}

That function is totally responsible for opening the Facebook native widget and requests the users for app authorization to utilize their data for sign-in objectives.

Now is the time to deal with function response. It will outcome a Facebook access token that should be passed to Firebase.

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

constructor(public facebook: Facebook){}

facebookLogin(): Promise<any> {
return this.facebook.login(['email'])
.then( response => {
const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);

firebase.auth().signInWithCredential(facebookCredential)
.then( success => {
console.log("Firebase success: " + JSON.stringify(success));
});

}).catch((error) => { console.log(error) });
} 

To easily understand the development process, let’s break down this aforeshared code:

const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);

This coding line is used to create a credential object that can be passed to Firebase. After creating such credential object, pass this to Firebase:

facebookLogin(): Promise<any> {
return this.facebook.login(['email'])
.then( response => {
const facebookCredential = firebase.auth.FacebookAuthProvider
.credential(response.authResponse.accessToken);

firebase.auth().signInWithCredential(facebookCredential)
.then( success => {
console.log("Firebase success: " + JSON.stringify(success));
});

}).catch((error) => { console.log(error) });
}

This coding line “firebase.auth().signInWithCredential(facebookCredential)” ensures about your user’s account creation under your Firebase app. Plus, it also authenticates the user under the Ionic app and stores some data related to authentication inside local storage. This authentication details may include tokens, provider information, tokens and other information.

We at Envision Ecommerce have developed Facebook login ionic app:

https://github.com/envisionecommerce/FBAppDemo

Regardless of this, our highly qualified app development team is there for you. Envision Ecommerce, best mobile app development company, provides the utmost support to customers in developing their Ionic based hybrid business apps at affordable prices. Feel free to contact us at sales@envisionecommerce.com or visit: https://envisionecommerce.com/store/