How to Facebook login in Ionic 4 Apps using Firebase

How to Facebook login in Ionic 4 Apps using Firebase 

In this post, you will learn how to implement a Facebook login authentication in Ionic 4 apps using Firebase.
 In 2nd series we will discuss how to use Facebook login with Native Storage.

We will make a sample app, where users can login using their Facebook account. After login, user can see their basic profile information on home page, and sessions are saved in Firebase.

Complete source code of this tutorial is available in the Ionic-4-facebook-auth starter.

It’s helpful to use social sign-ins with Ionic for your users who would rather not create and remember another username/password combination. Instead, you can allow users to sign in with accounts they already own. You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. The user’s chosen provider will handle all of this for you. Plus, in mobile apps, the Facebook login is automatically done with the pre-installed Facebook app.

There are several reasons why you should use a Facebook login in your app:

Ease of use — When a new user uses your app, only two buttons clicks are required to login using Facebook. In other scenario, user will have to type in an email / password and login. 

No “forgot password” — When your app uses Facebook login, the user does not have to worry about forgetting password for your app’s login

No “verify email” — If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Facebook login will always have a valid email / phone number associated.

Single solution — Facebook login can allow your users to use single login credentials across multiple devices

Facebook integration — If your app uses Facebook authentication, you can use Facebook APIs inside your app as well. This can include fetching user tweets etc.

Trust — Nowadays, people generally trust social logins more over custom email logins. Social logins follows standard privacy protocols and hence are more reliable for information sharing

Ionic framework has been around for around 5 years, and has been very popular among developers for its ease of usage over Swift / Java. Plus it requires you to have single source code for both an Android and an iOS app. What more can a developer ask for !

Ionic 4 is the latest version (at the time of writing this post) of Ionic, and is much more reliable and robust than previous versions.

There are several ways of Authentication in Ionic 4 apps

Social logins — Social logins are a popular and easy way of authentication in mobile apps. You must have seen Google, Facebook, Instagram logins in almost all the modern apps. Social logins are easy to use and more reliable for quick integrations.

Back-end as a Service (BaaS) — You can use pre-built BaaS platforms which allows easy integration of authentication in your apps. Basically, these platforms provide you a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms. Firebase is the most popular among these for mobile apps, which we’ll study in next section

Create you own back-end — You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over the user authentication. But this method is the most time taking one as well.

Firebase is a Backend-as-a-Service (BaaS) platform. It started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and variety of functionalities available on it.

Some of the quick integrations available with Firebase are

Email Authentication

Social logins

Real-time database

Analytics

Crashlytics

Push notifications

In-app messages

Remote config

and much more. Firebase is quickly growing to become the most popular mobile app back-end platform.

Firebase Authentication Options

Firebase not only provides ready-made email authentication, but also provides authentication using a variety of social logins. You can see the authentication options available with Firebase

Authentication options available in Firebase

We will use Firebase to store user profile information once the Facebook login is done. This is the preferred method, as it is reliable for both apps and PWA.

As mentioned earlier, we are going to implement Facebook authentication using two different storage methods

 Implemented Native Storage 

In both cases, we will use the Ionic Cordova Facebook Plugin to interact with Facebook and authenticate the user. Once the login is done, we receive user profile information. This information will be saved in Native storage / Firebase. This acts as a safe storage for user sessions because non-persistent LocalStorage data can be removed by the device. When user closes the app and return to the app, the information / session saved in Native Storage or Firebase will allow user to auto-login.

We will follow these step-by-step instructions to create our Ionic 4 app with Facebook authentication

Step 1: Facebook Developer Console — Create your app

Step 2: Add your Platforms to Facebook

‌Step 3: Enable Facebook Sign-In in Firebase project

‌Step 4: Install the Cordova Facebook Plugin to connect your app with Firebase

Step 5: Authenticate Users using Facebook

Step 6: Store the Facebook auth tokens in Firebase

Step 7: Use Firebase to auto-login the user

Step 8: Test your app for Android

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 and create a new app.

Create new app in Facebook Developer console

Once we finish creating our app, we will go to Facebook app dashboard and pick App Id from there. It will be required in installing Facebook plugin in the app

Facebook Developer Console — App ID on top-left

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 platforms iOS and Android.

‌To add the platforms, go ahead inside your Facebook dashboard and click on Settings, then right below the app’s information you’ll see a button that says Add Platform, click it.

You’ll see several options for the platforms you’re creating

Options to create platformsAdd Platforms in Facebook dashboard

‌ Let’s start with iOS :- You’ll see a form asking you for some information, right now we just need the Bundle ID.

​

Create iOS app in Facebook console

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:

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

‌Once you add the Bundle ID, just follow the process to create the app.

‌Android :- The difference is that instead of Bundle ID, Android calls it “Google Play Package Name.”

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 and locate the app you’re using (or create a new Firebase project)

‌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.

Enable Facebook login in Firebase console

It will ask you App ID and App secret you will copy it from your Facebook console, under your app’s settings.

Pick App ID and App Secret from Facebook console

In this step we will install the Cordova plugin in our Ionic app.

‌For that, open your terminal and type

$ ionic cordova 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 with your real credentials. You can find both of these 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‌ to install Facebook package from Ionic Native

$ npm install --save @ionic-native/facebookInitialize Firebase in your app

To start off, let’s create an Ionic Application. You can either use our Ionic 4 full Auth starter or you can create your own Ionic 4 app from scratch. This app contains all type of Authentications using Firebase.

Ionic 4 Full Auth app starter

To learn more about how to create Ionic app from scratch, read How to create Ionic 4 app from scratch for beginners

Also, we need to install AngularFire2 npm module, which actually connects the Firebase functionality to Ionic app. To install the module, run

$ npm install firebase @angular/fire --save

Also, include environment ,AngularFireModule and AngularFireAuthModulein app.module.ts

Import environment and AngularFire modules in app.module.ts

Notice that Firebase is initialized in your app with

AngularFireModule.initialize

where environment.config is the Firebase config you picked from Firebase project.

Connect your app with firebase:

Details of this step can be found in our blog How to integrate Firebase in Ionic 4 apps

To connect you app to Firebase, you first need a Firebase project. From the project you will pick up you Firebase config parameters and include them in an environment file at the root of your Ionic project. The environment file will look like following

Firebase config params in environment file

You can create two different environment files for development and production environments.

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. The import and login functions will be as follows

home.page.ts for Facebook login Page

This function will give you Facebook Token and from this token we will login user to Firebase app.

Complete source code of this tutorial is available in the Ionic-4-facebook-auth starter.

In previous step, the authentication is done via Facebook app on your phone. Once logged in, you will receive a token in response. This info will be used to connect to Firebase in the success of Facebook login

Facebook Auth success function

So, in short we have logged in via Facebook, and created a Firebase user using the Facebook auth token. From now on, Firebase can handle your login / logout in the app. After we store the token in Firebase, we navigate to Profile page.

Get user profile info on Facebook 

In Profile page, we will get the profile information of the user using Firebase Auth Module again.

profile.page.ts — Getting user profile and Logout functionUser Profile Page

Note:- If you want profile image with better resolution you can check Facebook graph API

Logout function

Since Firebase is now handling the login / logout, the logout function in profile.page.ts page will look like following

Logout from app using Firebase

At this point we have covered following points

Login with Cordova Facebook plugin

Pass Facebook auth token to Firebase

Fetch user profile info via Facebook plugin

Logout using Firebase

Now, if the user does not logout and leave the app, we want the app to auto-login the next time user starts the app. For this, we will use Firebase’s onAuthStateChanged function at the start of the app. If there is a valid user logged in, it will return user’s information. Our app.component.ts file will look like following

Auto-login using Firebase’s onAuthStateChanged() functionFacebook / Firebase auto-login

In this post you learnt how to implement Facebook login in your Ionic 4 app. You also learnt how to auto-login your user using info stored in Firebase. The Firebase integration done for Authentication, can be used for various purposes like Database CRUD operations, push notifications, analytics etc.