How to use Firebase in your Ionic 4 app - Guide for beginners
Tags: ionic, firebase, authentication, analytics
Published: 2019-09-11 15:23:49

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="abd6" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="4ee6" class="graf graf--blockquote graf-after--figure"><em class="markup--em markup--blockquote-em">TaaDaaa</em>, you are in luck today. Check it out below &amp; help us in spreading the goodness all over&nbsp;!!<br><a href="https://store.enappd.com/product/firebase-starter-kitionic4-firebase-starter/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Firebase Starter Kit (Ionic 4)</strong></a><strong class="markup--strong markup--blockquote-strong">: </strong>A great starter to get you started with Ionic 4 and Firebase.</blockquote><p name="6fed" class="graf graf--p graf-after--blockquote is-selected">Now lets take a dive to know the paramount benefits of Firebase for your Ionic4 App.</p><p name="a98a" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Firebase</strong> is a mobile and web application development platform developed by Firebase Inc. in 2011, then was acquired by Google in 2014. Firebase is a toolset to “build, improve, and grow your app”. It gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users.</p><p name="acb8" class="graf graf--p graf-after--p">Today Firebase is one of the fastest growing platform for application development. Some of the reason are</p><ol class="postList"><li name="b9a5" class="graf graf--li graf-after--p">You don’t need to write a back-end from scratch. Firebase is a ready-made back-end, with a DB attached to it. You just integrate Firebase SDK in your app and you are good to go.</li><li name="a4fa" class="graf graf--li graf-after--li">It’s R-E-A-L T-I-M-E 🕺.&nbsp;<br>If you are a developer, you understand the importance of a real-time back-end/database in today’s app market. Things like chat, news feeds, ratings, bookings etc all are very easy if you factor in real-time operations</li><li name="584b" class="graf graf--li graf-after--li">Simple Authentication operations.<br>The very first things required in a user facing application is login/register operations. Firebase handles this very smoothly and with minimum coding effort. You can integrate a number of social authentication services like Facebook, Google etc. with Firebase as well.</li><li name="7b21" class="graf graf--li graf-after--li">You get tonnes of additional features in-built e.g. push notifications, analytics etc 😍😍</li><li name="a038" class="graf graf--li graf-after--li">It’s free, up to a certain usage limit. But this is pretty awesome for developers who are trying things, or making MVPs, or even for small scale app businesses. 🤑</li></ol><p name="7c03" class="graf graf--p graf-after--li">In this article, we will focus on <strong class="markup--strong markup--p-strong">what you can do with Firebase in your Ionic 4 app. </strong>Firebase has been around since Ionic 1, and has been changing ever since. So here are some of the latest plugins and functionalities you can implement using Firebase with Ionic 4</p><h3 name="732a" class="graf graf--h3 graf-after--p">1. Analytics Firebase</h3><figure tabindex="0" contenteditable="false" name="1d93" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*lQfIVCxs8H19x7Hr_PM5Tg.jpeg" data-width="1280" data-height="720" src="https://cdn-images-1.medium.com/max/720/1*lQfIVCxs8H19x7Hr_PM5Tg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="b425" class="graf graf--p graf-after--figure">Everybody knows about Google Analytics. Analytics comes in-built with Firebase. It’s a free and unlimited analytics solution. Analytics helps you understand how your users behave, so you can make informed decisions about how to market your app. Also to see the performance of your campaigns across organic and paid channels to understand which methods are most effective at driving high-value users.</p><p name="52c6" class="graf graf--p graf-after--p">Install the plugin with</p><pre name="2e19" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-firebase-analytics</pre><pre name="ca7f" class="graf graf--pre graf-after--pre">npm install @ionic-native/firebase-analytics</pre><p name="693d" class="graf graf--p graf-after--pre">For all plugins, the step to import the plugin in a component will remain common (just change the plugin name)</p><pre name="1257" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FirebaseAnalytics } from '@ionic-native/firebase-analytics/ngx';<br><br></code></pre><pre name="ef64" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private firebaseAnalytics: FirebaseAnalytics) { </code> <br><code class="markup--code markup--pre-code">... your code here<br>}</code></pre><p name="3b66" class="graf graf--p graf-after--pre">From setup, it’ll automatically begin tracking a defined set of events&#8202;—&#8202;meaning we can begin learning from the very first step. And if that isn’t enough, then we can add our own <strong class="markup--strong markup--p-strong">custom events</strong> that we can track by</p><pre name="8ef4" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAnalytics.logEvent('my_event', {</code>param1<code class="markup--code markup--pre-code">: "value1"})<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><figure tabindex="0" contenteditable="false" name="b97a" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 379px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.2%;"></div><img class="graf-image" data-image-id="1*rtemCIkbbOjtgNI6DJmKHQ.png" data-width="1388" data-height="752" src="https://cdn-images-1.medium.com/max/720/1*rtemCIkbbOjtgNI6DJmKHQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">This is how Firebase automatically projects the analytics for your&nbsp;app</figcaption></figure><p name="4a49" class="graf graf--p graf-after--figure">Following is a list of useful Firebase functions that you can write in a similar fashion as above</p><ol class="postList"><li name="e903" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Set User Id</strong>&#8202;—&#8202;<code class="markup--code markup--li-code">this.firebaseAnalytics.setUserId("123123")</code>&nbsp;<br>This is useful to identify events with respect to users.</li><li name="ec3f" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Set User Property</strong>&#8202;—&#8202;<code class="markup--code markup--li-code">this.firebaseAnalytics.setUserProperty("name","value")</code>&nbsp;<br>This is useful to create filters with respect to users doing a certain action or behaving a certain way to an event in the app. These filters come in handy when you want to send push notification or in-app messages to selected channels.</li><li name="7d55" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Set Current Screen&#8202;</strong>—&#8202;<code class="markup--code markup--li-code">this.firebaseAnalytics.setUserId("123123")</code>&nbsp;<br>This option comes in handy to identify events with respect to screens. For example&#8202;—&#8202;which screen do users usually quit the app on etc.</li></ol><p name="f820" class="graf graf--p graf-after--li">All of these events are then viewable through the Firebase Dashboard within the Firebase Console&#8202;—&#8202;our central point of access for analytics reports and other firebase services.</p><figure tabindex="0" contenteditable="false" name="b1f0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 362px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.800000000000004%;"></div><img class="graf-image" data-image-id="1*abwD8g86tqZ-SNmUnWKs2w.png" data-width="1385" data-height="717" src="https://cdn-images-1.medium.com/max/720/1*abwD8g86tqZ-SNmUnWKs2w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase Dashboard for Events Analytics</figcaption></figure><p name="06a2" class="graf graf--p graf-after--figure">Note: This plugin depends on <a href="https://github.com/chemerisuk/cordova-support-google-services"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">cordova-support-google-services</a> for setting up google services properly. You can refer the <a href="https://github.com/chemerisuk/cordova-support-google-services/blob/master/README.md"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">README</a> carefully in order to avoid common issues with a project configuration. Also, use variable <code class="markup--code markup--p-code">FIREBASE_CORE_VERSION</code> to override dependency version on Android.</p><p name="768c" class="graf graf--p graf-after--p">On iOS, in order to collect demographic, age, gender data etc. you should additionally include <code class="markup--code markup--p-code">AdSupport.framework</code>into your project.</p><h3 name="ebe5" class="graf graf--h3 graf-after--p">2. Firebase Cloud Messaging (FCM)</h3><figure tabindex="0" contenteditable="false" name="0c3b" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*rMGumKz0r1UOGC_fApQYKQ.png" data-width="1920" data-height="1080" data-is-featured="true" src="https://cdn-images-1.medium.com/max/720/1*rMGumKz0r1UOGC_fApQYKQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="848d" class="graf graf--p graf-after--figure">Imagine a Whatsapp where you have to open the app each time to check for new messages, terrible right? Push notification is one of the best proven method to engage your app users.&nbsp;<br>Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost. Using FCM, you can notify a client app that new email or other data is available to sync. If your app is going to be a success, then you need to hold the user’s interest over time, and notifications are an important way to keep your audience engaged. By presenting the user with a timely, relevant notification at <strong class="markup--strong markup--p-strong">exactly the right moment</strong>, you can recapture their wandering interest, and pull them back into your app.</p><p name="4624" class="graf graf--p graf-after--p">Install the plugin with</p><pre name="62fb" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-firebase-analytics</pre><pre name="5456" class="graf graf--pre graf-after--pre">npm install @ionic-native/firebase-analytics</pre><p name="703a" class="graf graf--p graf-after--pre">Import the plugin in your root component.</p><pre name="6ca4" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FCM } from '@ionic-native/fcm/ngx';</code></pre><pre name="ce28" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private fcm: FCM) {}</code></pre><p name="cdc0" class="graf graf--p graf-after--pre">Use following functions to make the best use of push notifications</p><h4 name="35e9" class="graf graf--h4 graf-after--p">I. Receiving Token&nbsp;Refresh</h4><pre name="50bb" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">this.fcm.onTokenRefresh().subscribe(token =&gt; {<br>  alert(token);<br>});</code></pre><p name="6024" class="graf graf--p graf-after--pre">Note that this callback will be fired every time a new token is generated, including the first time.</p><h4 name="163e" class="graf graf--h4 graf-after--p">II. Get&nbsp;token</h4><pre name="5ceb" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">this.fcm.getToken().then(token =&gt; {<br>  alert(token);<br>});</code></pre><p name="1b82" class="graf graf--p graf-after--pre">Keep in mind this function will return null if the token has not been established yet. So do not call this function before the plugin is properly initialized.</p><h4 name="5c95" class="graf graf--h4 graf-after--p">III. Subscribe to&nbsp;topic</h4><pre name="906e" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">this.fcm.subscribeToTopic('marketing');</code></pre><p name="99cc" class="graf graf--p graf-after--pre">Topics are specific channels to provide filtered data to a specific set of users. E.g. If you are a food delivery app, you may want to send coupons to only those users who haven’t ordered anything in last 7 days.<br>All devices are subscribed automatically to ‘all’ and ‘ios’ or ‘android’ topic respectively, depending on the device type. If you are making a custom topic, your topic name must match the following regular expression:&nbsp;<br><strong class="markup--strong markup--p-strong">“[a-zA-Z0–9-_.~%]{1,900}”</strong></p><h4 name="acf2" class="graf graf--h4 graf-after--p">IV. Unsubscribe from&nbsp;topic</h4><pre name="0eac" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">this.fcm.unsubscribeFromTopic('marketing');</code></pre><p name="9cc4" class="graf graf--p graf-after--pre">This function is specially useful when a user wants to turn off push notifications in the app.</p><h4 name="de65" class="graf graf--h4 graf-after--p">V. Receiving push notification data</h4><pre name="d44f" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">this.fcm.onNotification().subscribe(data =&gt; {<br>  if(data.wasTapped){<br>    console.log("Push received in background");<br>  } else {<br>    console.log("Push received in foreground");<br>  };<br>});</code></pre><p name="b083" class="graf graf--p graf-after--pre">Important thing to understand here is the types of payloads. There are two types&#8202;—&#8202;<strong class="markup--strong markup--p-strong">Data and Notification</strong>. Firebase admin panel allows you to send payloads very easily and provides various options to filter as well</p><figure tabindex="0" contenteditable="false" name="7a1c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 282px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 40.300000000000004%;"></div><img class="graf-image" data-image-id="1*rlX0r_cbTCnIDFarCv37OQ.png" data-width="1012" data-height="408" src="https://cdn-images-1.medium.com/max/720/1*rlX0r_cbTCnIDFarCv37OQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Prepare a Push notification right from Firebase&nbsp;console</figcaption></figure><p name="f526" class="graf graf--p graf-after--figure">You can also send payloads from your server, using FCM. The syntax for the payload will be</p><pre name="45da" class="graf graf--pre graf-after--p">{<br>  "notification":{<br>    "title":"Notification title",<br>    "body":"Notification body",<br>    "sound":"default",<br>    "click_action":"FCM_PLUGIN_ACTIVITY",<br>    "icon":"fcm_push_icon"<br>  },<br>  "data":{<br>    "param1":"value1",<br>    "param2":"value2"<br>  },<br>    "to":"/topics/topicExample",<br>    "priority":"high",<br>    "restricted_package_name":""<br>}</pre><p name="a50f" class="graf graf--p graf-after--pre">Full documentation for sending notification via your server can be found <a href="https://firebase.google.com/docs/cloud-messaging/http-server-ref"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a></p><h3 name="e73c" class="graf graf--h3 graf-after--p">3. Firebase (Remote)&nbsp;Config</h3><figure tabindex="0" contenteditable="false" name="97e9" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*t-YfPImLT_Zxv6lbwV3kFQ.jpeg" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/720/1*t-YfPImLT_Zxv6lbwV3kFQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="a309" class="graf graf--p graf-after--figure">Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. When using Remote Config, you create in-app default values that control the behavior and appearance of your app. Then, you can later use the Firebase console or the Remote Config REST API to override in-app default values for all app users or for segments of your user base. For example, <strong class="markup--strong markup--p-strong">you can change your app’s layout or color theme to support a seasonal promotion, with no need to publish an app update.</strong></p><p name="ddb0" class="graf graf--p graf-after--p">Install the plugin with</p><pre name="f66a" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-firebase-config</pre><pre name="b762" class="graf graf--pre graf-after--pre">npm install @ionic-native/firebase-config</pre><p name="6f94" class="graf graf--p graf-after--pre">Import the plugin in your component.</p><pre name="54ef" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FirebaseConfig } from '@ionic-native/firebase-config/ngx';</code></pre><pre name="9a97" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private firebaseConfig: FirebaseConfig) { }</code></pre><p name="e161" class="graf graf--p graf-after--pre">You can then get server side parameters which can tell your app how to behave specifically. Also, Firebase console allows you to add the params in a simple GUI.</p><pre name="6457" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseConfig.getBoolean('is_my_holiday_promotion_on')<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><figure tabindex="0" contenteditable="false" name="16a2" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 381px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.400000000000006%;"></div><img class="graf-image" data-image-id="1*j3OYECJaAy3-6mBaAI2eiA.png" data-width="1386" data-height="754" src="https://cdn-images-1.medium.com/max/720/1*j3OYECJaAy3-6mBaAI2eiA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Define Remote config parameters in Firebase&nbsp;console</figcaption></figure><p name="ecfd" class="graf graf--p graf-after--figure">A hidden, but great feature of Remote config is segmentation of users who receive the custom param. E.g. You want to send a particular promo code to users only from India. You can then set your holiday_promo_code param with condition set to <code class="markup--code markup--p-code">user country</code>&nbsp;: <code class="markup--code markup--p-code">India</code> in Firebase console</p><figure tabindex="0" contenteditable="false" name="c567" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 354px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.6%;"></div><img class="graf-image" data-image-id="1*K8_J_RGaIf11t6VkP3wV3g.png" data-width="892" data-height="451" src="https://cdn-images-1.medium.com/max/720/1*K8_J_RGaIf11t6VkP3wV3g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Setting custom conditions for Firebase Remote&nbsp;Config</figcaption></figure><h3 name="ab41" class="graf graf--h3 graf-after--figure">4. Firebase dynamic&nbsp;links</h3><figure tabindex="0" contenteditable="false" name="12d5" class="graf graf--figure graf-after--h3 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*XoYAGm8dPZd-8HsF1lUNJQ.jpeg" data-width="1600" data-height="900" src="https://cdn-images-1.medium.com/max/720/1*XoYAGm8dPZd-8HsF1lUNJQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e1e1" class="graf graf--p graf-after--figure">Dynamic Links are smart URLs that allow you to send existing and potential users to any location within your iOS or Android app. Dynamic Links solve the problems faced in <strong class="markup--strong markup--p-strong">Deeplinks</strong>, where things were not as streamlined. If a user didn’t have your app installed, that deeplink wouldn’t work. Or, if a user installs your app from a deeplink, the information associated with the deeplink itself (e.g. a coupon code) gets lost in the installation process.</p><p name="693e" class="graf graf--p graf-after--p">Dynamic Links survive the app install process, so even new users see the content they’re looking for when they open the app for the first time. If a user opens the same dynamic links in a desktop browser, they will be taken to the equivalent content on your website.</p><figure tabindex="0" contenteditable="false" name="006e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 436px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.2%;"></div><img class="graf-image" data-image-id="1*BM0xMKUPDi3mvGm5zWmyZw.png" data-width="1033" data-height="643" src="https://cdn-images-1.medium.com/max/720/1*BM0xMKUPDi3mvGm5zWmyZw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add Dynamic Links from Firebase&nbsp;Console</figcaption></figure><p name="d6d2" class="graf graf--p graf-after--figure">With dynamic links, your users get the best available experience for the platform they open your link on. Key benefits of dynamic links:</p><ul class="postList"><li name="82f6" class="graf graf--li graf-after--p">Convert mobile web users to native app users. Send users to app store or show them an advertisement</li><li name="6b93" class="graf graf--li graf-after--li">Increase conversion for user-to-user sharing. e.g. app invites&nbsp;, coupons etc.</li><li name="f82e" class="graf graf--li graf-after--li">Drive more installs with social, email, and SMS marketing campaigns.</li><li name="4044" class="graf graf--li graf-after--li">Turn desktop users into mobile app users. Send users to app store</li><li name="9c50" class="graf graf--li graf-after--li">User specific conversion&#8202;—&#8202;If a user installed your Food app from an ad that mentioned <code class="markup--code markup--li-code">Chinese</code> Food, then after installation, you can take the user directly to a Chinese restaurant page. Cool, right&nbsp;?</li></ul><p name="f191" class="graf graf--p graf-after--li">Install the plugin with</p><pre name="237d" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-firebase-dynamiclinks</pre><pre name="06f6" class="graf graf--pre graf-after--pre">npm install @ionic-native/firebase-dynamic-links</pre><p name="bc31" class="graf graf--p graf-after--pre">Import the plugin in your component.</p><pre name="3ca1" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FirebaseDynamicLinks } from '@ionic-native/firebase-dynamic-links/ngx';<br><br></code></pre><pre name="8e92" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private firebaseDynamicLinks: FirebaseDynamicLinks) { }</code></pre><p name="6b0e" class="graf graf--p graf-after--pre">Handle the logic here after opening the app with the Dynamic link</p><pre name="705e" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseDynamicLinks.onDynamicLink()<br>  .subscribe((res: any) =&gt; console.log(res), (error:any) =&gt; console.log(error));</code></pre><p name="148a" class="graf graf--p graf-after--pre">Use variable <code class="markup--code markup--p-code">APP_DOMAIN</code> to specify web URL where your app will start an activity to handle the link.</p><p name="8ab0" class="graf graf--p graf-after--p">Use variable <code class="markup--code markup--p-code">PAGE_LINK_DOMAIN</code> to specify your <code class="markup--code markup--p-code">*.page.link</code> domain.</p><p name="d0b9" class="graf graf--p graf-after--p">Use variable <code class="markup--code markup--p-code">FIREBASE_DYNAMIC_LINKS_VERSION</code> to override dependency version on Android.</p><h3 name="b6dd" class="graf graf--h3 graf-after--p">5. Firebase Authentication</h3><p name="aeaf" class="graf graf--p graf-after--h3">Use our <a href="https://store.enappd.com/product/firebase-starter-kitionic4-firebase-starter/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Firebase Starter Kit</strong></a><strong class="markup--strong markup--p-strong"> </strong>to get started with Firebase Authentication.</p><figure tabindex="0" contenteditable="false" name="8960" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 623px; max-height: 346px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.50000000000001%;"></div><img class="graf-image" data-image-id="1*F_riVdlIjxI2GQFUzFuyOw.png" data-width="623" data-height="346" src="https://cdn-images-1.medium.com/max/720/1*F_riVdlIjxI2GQFUzFuyOw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="3d6b" class="graf graf--p graf-after--figure">Most apps need to know the identity of a user. Knowing a user’s identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user’s devices. Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.</p><figure tabindex="0" contenteditable="false" name="6a76" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 444px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.5%;"></div><img class="graf-image" data-image-id="1*WNnesBqULzf2vYJ8cOB_Tw.png" data-width="1111" data-height="705" src="https://cdn-images-1.medium.com/max/720/1*WNnesBqULzf2vYJ8cOB_Tw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase provides various methods to authenticate users</figcaption></figure><p name="ee25" class="graf graf--p graf-after--figure">Install the plugin with</p><pre name="8d18" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-firebase-authentication</pre><pre name="6e23" class="graf graf--pre graf-after--pre">npm install @ionic-native/firebase-authentication</pre><p name="5ac5" class="graf graf--p graf-after--pre">Import the plugin in your component.</p><pre name="d22c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';</code></pre><pre name="fc4a" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private firebaseAuthentication: FirebaseAuthentication) { }</code></pre><p name="72b9" class="graf graf--p graf-after--pre">You can use following functions to do various tasks in authentication modules.</p><h4 name="91a7" class="graf graf--h4 graf-after--p">I. Register a User with Email and&nbsp;Password</h4><pre name="54f4" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">this.firebaseAuthentication.createUserWithEmailAndPassword('test@gmail.com', '123')<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><h4 name="0845" class="graf graf--h4 graf-after--pre">II. Send Email Verification</h4><p name="4852" class="graf graf--p graf-after--h4">Initiates email verification for the current user.</p><pre name="e7ff" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAuthentication.</code>sendEmailVerification<code class="markup--code markup--pre-code">()<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><h4 name="4b16" class="graf graf--h4 graf-after--pre">III. Send Password Reset&nbsp;Email</h4><p name="6140" class="graf graf--p graf-after--h4">Triggers the Firebase Authentication backend to send a password-reset email to the given email address, which must correspond to an existing user of your app.</p><pre name="d83d" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAuthentication.</code>sendPasswordResetEmail<code class="markup--code markup--pre-code">()<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><h4 name="4083" class="graf graf--h4 graf-after--pre">IV. Login with Email &amp;&nbsp;Password</h4><p name="2ecd" class="graf graf--p graf-after--h4">Asynchronously signs in using an email and password.</p><pre name="0fea" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAuthentication.</code>signInWithEmailAndPassword<code class="markup--code markup--pre-code">('test@gmail.com', '123')<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><h4 name="2152" class="graf graf--h4 graf-after--pre">V. verifyPhoneNumber(phoneNumber, timeout)</h4><p name="2033" class="graf graf--p graf-after--h4">Starts the phone number verification process for the given phone number.</p><pre name="21ef" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAuthentication.</code>verifyPhoneNumber<code class="markup--code markup--pre-code">('+</code>123456789<code class="markup--code markup--pre-code">', '30000')<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><h4 name="ccfc" class="graf graf--h4 graf-after--pre">VI. Sign-in anonymously</h4><p name="1d36" class="graf graf--p graf-after--h4">Create and use temporary anonymous account to authenticate with Firebase.</p><pre name="29dd" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAuthentication.</code>signInAnonymously().then(function(userInfo) {<br>    // user is signed in<br>});</pre><h4 name="a119" class="graf graf--h4 graf-after--pre">VII. Google login&#8202;—&#8202;signInWithGoogle(idToken, accessToken)</h4><p name="355b" class="graf graf--p graf-after--h4">Uses Google’s <em class="markup--em markup--p-em">idToken</em> and <em class="markup--em markup--p-em">accessToken</em> to sign-in into firebase account. In order to retrieve those tokens follow instructions for <a href="https://firebase.google.com/docs/auth/android/google-signin"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Android</a> and <a href="https://firebase.google.com/docs/auth/ios/google-signin"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">iOS</a>.</p><h4 name="1ac8" class="graf graf--h4 graf-after--p">VIII. Facebook login&#8202;—&#8202;signInWithFacebook(accessToken)</h4><p name="05bd" class="graf graf--p graf-after--h4">Uses Facebook’s <em class="markup--em markup--p-em">accessToken</em> to sign-in into firebase account. In order to retrieve those tokens follow instructions for <a href="https://firebase.google.com/docs/auth/android/facebook-login"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Android</a> and <a href="https://firebase.google.com/docs/auth/ios/facebook-login"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">iOS</a>.</p><h4 name="e4f9" class="graf graf--h4 graf-after--p">IX. Twitter login&#8202;—&#8202;signInWithTwitter(token, secret)</h4><p name="6be7" class="graf graf--p graf-after--h4">Uses Twitter’s <em class="markup--em markup--p-em">token</em> and <em class="markup--em markup--p-em">secret</em> to sign-in into firebase account. In order to retrieve those tokens follow instructions for <a href="https://firebase.google.com/docs/auth/android/twitter-login"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Android</a> and <a href="https://firebase.google.com/docs/auth/ios/twitter-login"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">iOS</a>.</p><h4 name="4d67" class="graf graf--h4 graf-after--p">X. Sign&nbsp;out</h4><p name="0388" class="graf graf--p graf-after--h4">Signs out the current user and clears it from the disk cache.</p><pre name="6e0b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.firebaseAuthentication</code>.signOut().then(function() {<br>    // user was signed out<br>});</pre><h3 name="bf56" class="graf graf--h3 graf-after--pre">Conclusion:</h3><p name="0943" class="graf graf--p graf-after--h3 graf--trailing">In this blog we learnt about a lot of features provided by Firebase for Ionic apps. You can create user auth modules to analytics, dynamic link for invites, push notifications, remote config and much more. Firebase is truly a great match for modern day mobile apps and is really developer friendly.</p></div></div></section><section name="c49a" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="1b98" class="graf graf--p graf--leading">An opportunity to be an ANGEL is right over here!!<br>Don’t forget to share word about the <a href="https://store.enappd.com/product/firebase-starter-kitionic4-firebase-starter/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Firebase Starter Kit (Ionic 4)</strong></a><strong class="markup--strong markup--p-strong">. </strong>Give a boost to fellow budding Ionic app makers.</p><figure tabindex="0" contenteditable="false" name="acea" class="graf graf--figure graf-after--p is-defaultValue graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 596px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 67.4%;"></div><a href="https://store.enappd.com/product/firebase-starter-kitionic4-firebase-starter/"  class="graf-imageAnchor" data-action="image-link" data-action-observe-only="true" rel="noopener" target="_blank"   ><img class="graf-image" data-image-id="1*tYYUw5WAZjFG9EPA0mIHIw.jpeg" data-width="596" data-height="402" src="https://cdn-images-1.medium.com/max/720/1*tYYUw5WAZjFG9EPA0mIHIw.jpeg"><div class="crosshair u-ignoreBlock"></div></a></div></figure></div></div></section><section name="8f62" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="7325" class="graf graf--h3 graf--leading">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="95a9" class="graf graf--p graf-after--h3">Also check out our other blog posts related to <a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--p-anchor"    target="_blank">Firebase in Ionic 4</a>, <a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--p-anchor"    target="_blank">Geolocation</a> in Ionic 4, <a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--p-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and <a href="https://medium.com/enappd/payment-solutions-in-ionic-8c4bb28ce5cc"  class="markup--anchor markup--p-anchor"    target="_blank">Payment gateways in Ionic 4</a></p><p name="ed14" class="graf graf--p graf-after--p">Also check out this interesting post on <a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--p-anchor"    target="_blank">How to create games in Ionic 4 with Phaser</a></p><h3 name="362a" class="graf graf--h3 graf-after--p">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic4-firebase-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Ionic 4&#8202;—&#8202;Firebase Starter</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><h3 name="1b1c" class="graf graf--h3 graf-after--p">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic documentation</a></li></ul><p name="d610" class="graf graf--p graf-after--li">Others:<br>· <a href="https://en.wikipedia.org/wiki/Firebase"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">https://en.wikipedia.org/wiki/Firebase</a><br>· <a href="https://firebase.google.com/docs/analytics/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">https://firebase.google.com/docs/analytics/</a><br>· <a href="https://medium.com/exploring-android/exploring-firebase-on-android-ios-analytics-8484b61a21ba"  class="markup--anchor markup--p-anchor" rel="nofollow"    target="_blank">https://medium.com/exploring-android/exploring-firebase-on-android-ios- analytics-8484b61a21ba</a><br>· <a href="https://firebase.google.com/docs/cloud-messaging/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">https://firebase.google.com/docs/cloud-messaging/</a><br>· <a href="https://firebase.google.com/docs/remote-config/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">https://firebase.google.com/docs/remote-config/</a><br>· <a href="https://dzone.com/articles/firebase-dynamic-links"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">https://dzone.com/articles/firebase-dynamic-links</a><br>· <a href="http://fjbatresv.com/firebase-me/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">http://fjbatresv.com/firebase-me/</a><br>· <a href="http://bit.ly/2VKRshX"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">http://bit.ly/2VKRshX</a><br>· <a href="http://blogs.innovationm.com/firebase-authentication-in-ios/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener" target="_blank">http://blogs.innovationm.com/firebase-authentication-in-ios/</a></p><p name="39ae" class="graf graf--p graf-after--p graf--trailing"><em class="markup--em markup--p-em">This blog was originally published on </em><a href="https://enappd.com/blog/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--p-em">Enappd</em></a><em class="markup--em markup--p-em">.</em></p></div></div></section></div></article></main>