DEV Community

Cover image for How to integrate Firebase in Ionic 4 apps
Umang Darji for Enappd

Posted on • Originally published at enappd.com

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


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

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


Firebase website

Step 2 :-

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


Go to Firebase console

Step 3 :-

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


Firebase console

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


Add a project in Firebase

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


Firebase project dashboard

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


Create a Firebase Web App

Step 7 :-

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


Pick Firebase credentials from the code snippet

Step 9 :-

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


Create environment file in Ionic project base

Step 8 :-

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


Use more Firebase services from left panel

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


and Chill

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

Top comments (0)