This is part-1 of two post series. In this post, you will learn how to implement a Facebook authentication in Ionic 4 apps using Firebase 🔥. In Part 2 of the series we will discuss how to use Facebook login with Native Storage.
We will cook 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.
Social logins — What and why
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.
Facebook login — What and why
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 Authentication
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
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
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.
A word on Facebook authentication
As mentioned earlier, we are going to implement Facebook authentication using two different storage methods
- Native Storage
- Firebase
We will implemented Native Storage in the Part-2 of this post .
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.
Steps for Facebook authentication
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
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 and create a new app.
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
Step 2: Add your Platforms to Facebook
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
Add 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.
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.”
Step 3: Enable Facebook Login 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 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.
It will ask you App ID and App secret you will copy it from your Facebook console, under your app’s settings.
Step 4: Install the Facebook Cordova Plugin
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/facebook
Initialize 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.
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
Notice that Firebase is initialized in your app with
AngularFireModule.initializeApp(environment.config)
where environment.config is the Firebase config you picked from Firebase project.
Connect you 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
You can create two different environment files for development and production environments.
Step 5: 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. The import and login functions will be as follows
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.
Step 6 — Store the Facebook auth token in Firebase
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
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
In Profile page, we will get the profile information of the user using Firebase Auth Module again.
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
Step 7 — Use Firebase to auto-login the user
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
Conclusion
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.
Complete source code of this tutorial is available in the Ionic-4-facebook-auth starter.
This story was initially published on enappd.com
Next Steps
Now that you have learnt how to implement Facebook login in Ionic 4 apps, there are several things you can do next
- How to implement Twitter Login in Ionic 4
- How to implement Phaser game framework in Ionic 4
- How to implement multi-language text in Ionic 4
- How to implement Stripe payment in Ionic 4
- How to implement PayPal payment in Ionic 4
- How to implement Pedometer in Ionic 4
- Integrate Apple Pay in Ionic 4
- Integrate Razorpay in Ionic 4
NEED FREE IONIC 4 STARTERS?
You can also find free Ionic 4 starters on our website enappd.com
You can also make your next awesome app using Ionic 4 Full App
Top comments (0)