How to integrate Firebase in Ionic 4 apps

Check out our Firebase Starter kit to start with basic functionalities of firebase in Ionic 4 apps like database , Authentication and Storage

Firebase is one of the most powerful and popular Database as a Service (DBaaS) solutions available today. It provides a scalable cloud database to store and sync data for client and server side development.

Ionic has been gaining popularity in the last few years, and rightfully so. Making apps in Ionic is a breeze compared to Native languages (Java / Swift). Ionic framework’s domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.

Features of Firebase : -

1. Cloud Database Store
2. Authentication
3. Hosting
4. Storage
5. Machine Learning Kit
6. Crashlytics
7. Performance
8. Test lab
9. Dynamic Links
10. Cloud Messaging
11. In-App messaging and many more…

To learn more about Firebase Features, read Firebase With Ionic 4 Overview

This post is a very basic introduction of how to (just) connect Firebase to your Ionic 4 app. For other details like Twitter login, Facebook login and other plugins, you can our other blogs.

Connect your Ionic App with Firebase

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

For connecting Firebase to our Ionic app we’re going to use the Angularfire2 plugin. AngularFire is The official library for Firebase and Angular.

To install the AngularFire plugin, run the following command from your terminal

npm install firebase angularfire2 — save

Firebase Configuration

Once you’ve installed the plugin then we will build communication between our Ionic app and Firebase

Step 1 :-

In this step we will Create a project in Firebase console. For that we will go to Firebase

Step 2 :-

We will create new project in our Firebase console. So click on console button to check all of your projects

Step 3 :-

Create new project if you do not have already otherwise click on any existing project you want to use

Step 4 :-

When you click on Add Project Button it will ask you for your project name, fill your project name in project name input box , accept their terms and condition and click on Create Project button

Step 5 :-

So now our Firebase project is created. In this step we will add Firebase to our Ionic app. For this, select Add Firebase to your Web App

Step 6 :-

In this Step we will Register our webapp to firebase so we will enter our App nick name and click on register button

Step 7 :-

Copy your Firebase Config from Firebase dashboard and paste in into our app code.

Step 9 :-

Copy your Firebase config in your environment file in your Ionic app project. The environment file should be in the project root.

Step 8 :-

We have successfully created our Firebase app. From left side tabs we can use Firebase tools according to our requirements.

You’re all set now to integrate your firebase project in Ionic 4 app and PWA. Go enjoy, homie !

Conclusion

In this post, we learnt how to get Firebase config parameters to integrate Firebase in an Ionic 4 app, or progressive web app. Testing can be performed easily using development environment in build, and we can go live by simply changing production in environment file to true.

Stay tuned for more Ionic 4 blogs !

Next Steps

Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next

• How to implement Twitter login in Ionic 4
• How to implement Facebook 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