How to use Firebase in your Ionic 4 app — Guide for beginners

Abhijeet Rathore
Mar 8, 2019 · 11 min read
Image for post
Image for post

1. Analytics Firebase

Image for post
Image for post
ionic cordova plugin add cordova-plugin-firebase-analyticsnpm install @ionic-native/firebase-analytics
import { FirebaseAnalytics } from '@ionic-native/firebase-analytics/ngx';
constructor(private firebaseAnalytics: FirebaseAnalytics) {
... your code here
}
this.firebaseAnalytics.logEvent('my_event', {param1: "value1"})
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
Image for post
Image for post
This is how Firebase automatically projects the analytics for your app
Image for post
Image for post
Firebase Dashboard for Events Analytics

2. Firebase Cloud Messaging (FCM)

Image for post
Image for post
ionic cordova plugin add cordova-plugin-firebase-analyticsnpm install @ionic-native/firebase-analytics
import { FCM } from '@ionic-native/fcm/ngx';constructor(private fcm: FCM) {}
this.fcm.onTokenRefresh().subscribe(token => {
alert(token);
});
this.fcm.getToken().then(token => {
alert(token);
});
this.fcm.subscribeToTopic('marketing');
this.fcm.unsubscribeFromTopic('marketing');
this.fcm.onNotification().subscribe(data => {
if(data.wasTapped){
console.log("Push received in background");
} else {
console.log("Push received in foreground");
};
});
Image for post
Image for post
Prepare a Push notification right from Firebase console
{
"notification":{
"title":"Notification title",
"body":"Notification body",
"sound":"default",
"click_action":"FCM_PLUGIN_ACTIVITY",
"icon":"fcm_push_icon"
},
"data":{
"param1":"value1",
"param2":"value2"
},
"to":"/topics/topicExample",
"priority":"high",
"restricted_package_name":""
}

3. Firebase (Remote) Config

Image for post
Image for post
ionic cordova plugin add cordova-plugin-firebase-confignpm install @ionic-native/firebase-config
import { FirebaseConfig } from '@ionic-native/firebase-config/ngx';constructor(private firebaseConfig: FirebaseConfig) { }
this.firebaseConfig.getBoolean('is_my_holiday_promotion_on')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
Image for post
Image for post
Define Remote config parameters in Firebase console
Image for post
Image for post
Setting custom conditions for Firebase Remote Config

4. Firebase dynamic links

Image for post
Image for post
Image for post
Image for post
Add Dynamic Links from Firebase Console
ionic cordova plugin add cordova-plugin-firebase-dynamiclinksnpm install @ionic-native/firebase-dynamic-links
import { FirebaseDynamicLinks } from '@ionic-native/firebase-dynamic-links/ngx';
constructor(private firebaseDynamicLinks: FirebaseDynamicLinks) { }
this.firebaseDynamicLinks.onDynamicLink()
.subscribe((res: any) => console.log(res), (error:any) => console.log(error));

5. Firebase Authentication

Image for post
Image for post
Image for post
Image for post
Firebase provides various methods to authenticate users
ionic cordova plugin add cordova-plugin-firebase-authenticationnpm install @ionic-native/firebase-authentication
import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';constructor(private firebaseAuthentication: FirebaseAuthentication) { }
this.firebaseAuthentication.createUserWithEmailAndPassword('test@gmail.com', '123')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
this.firebaseAuthentication.sendEmailVerification()
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
this.firebaseAuthentication.sendPasswordResetEmail()
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
this.firebaseAuthentication.signInWithEmailAndPassword('test@gmail.com', '123')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
this.firebaseAuthentication.verifyPhoneNumber('+123456789', '30000')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
this.firebaseAuthentication.signInAnonymously().then(function(userInfo) {
// user is signed in
});
this.firebaseAuthentication.signOut().then(function() {
// user was signed out
});

Conclusion:


Image for post
Image for post

Enappd

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

Abhijeet Rathore

Written by

Rocket scientist turned programmer. Co-founder at Enappd and Youstart Education. Trying to make the world a better place, one solution at a time.

Enappd

Enappd

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

Abhijeet Rathore

Written by

Rocket scientist turned programmer. Co-founder at Enappd and Youstart Education. Trying to make the world a better place, one solution at a time.

Enappd

Enappd

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store