How to connect Firebase with Ionic 5 App
Tags: Ionic, Firebase, Backend, Ionic5
Published: 2020-04-16 14:25:27

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full 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…"><section name="81f8" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="5082" class="graf graf--p graf-after--figure">This post is a basic introduction on how to integrate Firebase with your Ionic 5 app.</p><p name="caf6" class="graf graf--p graf-after--p">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. Firebase is a NoSQL Realtime database based on the document-oriented model and is helpful in building scalable applications.</p><p name="6213" class="graf graf--p graf-after--p">Features of Firebase:-</p><p name="705b" class="graf graf--p graf-after--p">1. Cloud Database Store</p><p name="cab9" class="graf graf--p graf-after--p">2. Authentication</p><p name="4bf9" class="graf graf--p graf-after--p">3. Hosting</p><p name="9a4a" class="graf graf--p graf-after--p">4. Storage</p><p name="dc4c" class="graf graf--p graf-after--p">5. Machine Learning Kit</p><p name="7862" class="graf graf--p graf-after--p">6. Crashlytics</p><p name="b94c" class="graf graf--p graf-after--p">7. Performance</p><p name="e6d4" class="graf graf--p graf-after--p">8. Test lab</p><p name="ce5d" class="graf graf--p graf-after--p">9. Dynamic Links</p><p name="7613" class="graf graf--p graf-after--p">10. Cloud Messaging</p><p name="f39d" class="graf graf--p graf-after--p">11. In-App messaging and many more…</p><p name="d2c6" class="graf graf--p graf-after--p">To learn more about Firebase Features, read <a href="https://firebase.google.com/products?gclid=EAIaIQobChMI24u_8-O16AIVB6qWCh10WQ50EAAYASAAEgKaZvD_BwE"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Product Features</a></p><h3 name="db3d" class="graf graf--h3 graf-after--p">What is&nbsp;Ionic?</h3><p name="56d0" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by <a href="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Ben Sperry</a> and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.</p><p name="010c" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages.</p><p name="713d" class="graf graf--p graf-after--p is-selected"><strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS. Ionic framework’s domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.</p><p name="580e" class="graf graf--p graf-after--p">Ionic 5 released in Feb 2020, has few breaking changes. Few major updates in this release are:</p><p name="1297" class="graf graf--p graf-after--p">a. API for custom animations<br>&nbsp;b. IOS 13 design updates<br>&nbsp;c. Revamped Ion Icons<br>&nbsp;d. New starter designs<br>&nbsp;e. Improved Ionic colors<br>&nbsp;f. Component customization</p><p name="bc8f" class="graf graf--p graf-after--p">If you are looking to upgrade from Ionic 4 to Ionic 5, <a href="https://ionicframework.com/docs/building/migration"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a> is the complete guide for it.</p><h3 name="8646" class="graf graf--h3 graf-after--p">Connect your Ionic App with&nbsp;Firebase</h3><p name="f360" class="graf graf--p graf-after--h3">To start off, let’s create an Ionic Application. You can either use our <a href="https://store.enappd.com/product/ionic-angular-firebase-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic Angular Firebase Full App</a> starter or you can create your own Ionic 5 app from scratch.</p><p name="8fc2" class="graf graf--p graf-after--p">For connecting Firebase to our Ionic app we’re going to use the <a href="https://github.com/angular/angularfire2/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Angularfire2</a> plugin. AngularFire is The official library for Firebase and Angular.</p><p name="815c" class="graf graf--p graf-after--p">To install the Firebase plugin, run the following command from your terminal</p><pre name="886c" class="graf graf--pre graf-after--p">npm install firebase @angular/fire — save</pre><h3 name="a576" class="graf graf--h3 graf-after--pre">Firebase Configuration</h3><p name="f0d3" class="graf graf--p graf-after--h3">Once you’ve installed the plugin then we will build communication between our Ionic app and Firebase</p><h4 name="35ea" class="graf graf--h4 graf-after--p">Step 1:-</h4><p name="b7a8" class="graf graf--p graf-after--h4">In this step we will Create a project in Firebase console. For that we shall go to <a href="https://firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a> portal</p><figure tabindex="0" contenteditable="false" name="ad7e" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 266px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.3%;"></div><img class="graf-image" data-image-id="1*oE9wupSYQCY-W5AvFSrpgg.png" data-width="600" data-height="266" src="https://cdn-images-1.medium.com/max/800/1*oE9wupSYQCY-W5AvFSrpgg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="07e6" class="graf graf--h4 graf-after--figure">Step 2:-</h4><p name="164b" class="graf graf--p graf-after--h4">We will create new project in our Firebase console. So click on console button to check all of your projects</p><figure tabindex="0" contenteditable="false" name="732d" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 354px; max-height: 36px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 10.2%;"></div><img class="graf-image" data-image-id="1*nJf0WnALyyc5jhpdQA8-dw.png" data-width="354" data-height="36" src="https://cdn-images-1.medium.com/max/800/1*nJf0WnALyyc5jhpdQA8-dw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="2748" class="graf graf--h4 graf-after--figure">Step 3:-</h4><p name="7e17" class="graf graf--p graf-after--h4">Create new project if you do not have already otherwise click on any existing project you want to use</p><figure tabindex="0" contenteditable="false" name="0071" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 268px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.7%;"></div><img class="graf-image" data-image-id="1*U_PwRJKZ-DhiMJQ91tHn1g.png" data-width="600" data-height="268" src="https://cdn-images-1.medium.com/max/800/1*U_PwRJKZ-DhiMJQ91tHn1g.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="295d" class="graf graf--h4 graf-after--figure">Step 4:-</h4><p name="fd07" class="graf graf--p graf-after--h4">When you click on <em class="markup--em markup--p-em">Add Project </em>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 <em class="markup--em markup--p-em">Create Project </em>button</p><figure tabindex="0" contenteditable="false" name="59af" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 642px; max-height: 344px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 53.6%;"></div><img class="graf-image" data-image-id="1*uDWmCL5nsyc5pyFnXWCaaA.png" data-width="642" data-height="344" src="https://cdn-images-1.medium.com/max/800/1*uDWmCL5nsyc5pyFnXWCaaA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><figure tabindex="0" contenteditable="false" name="cc95" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 642px; max-height: 342px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 53.300000000000004%;"></div><img class="graf-image" data-image-id="1*_GxjQzFiI5ak6wusIMKDkg.png" data-width="642" data-height="342" src="https://cdn-images-1.medium.com/max/800/1*_GxjQzFiI5ak6wusIMKDkg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><figure tabindex="0" contenteditable="false" name="eb73" class="graf graf--figure graf-after--figure is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 642px; max-height: 341px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 53.1%;"></div><img class="graf-image" data-image-id="1*PDo5JdKYHmSMeby8nkAQrA.png" data-width="642" data-height="341" src="https://cdn-images-1.medium.com/max/800/1*PDo5JdKYHmSMeby8nkAQrA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="299f" class="graf graf--h4 graf-after--figure">Step 5:-</h4><p name="676e" class="graf graf--p graf-after--h4">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</p><figure tabindex="0" contenteditable="false" name="f64b" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 642px; max-height: 332px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.7%;"></div><img class="graf-image" data-image-id="1*ls_XUkQpbtW6AoWso6ZSgw.png" data-width="642" data-height="332" src="https://cdn-images-1.medium.com/max/800/1*ls_XUkQpbtW6AoWso6ZSgw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="e06c" class="graf graf--h4 graf-after--figure">Step 6:-</h4><p name="5c50" class="graf graf--p graf-after--h4">In this Step we will Register our webapp to firebase so we will enter our App nick name and click on register button</p><figure tabindex="0" contenteditable="false" name="986c" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 574px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 95.7%;"></div><img class="graf-image" data-image-id="1*8g2BnUoqzPu9thLnTkF9Lw.png" data-width="600" data-height="574" src="https://cdn-images-1.medium.com/max/800/1*8g2BnUoqzPu9thLnTkF9Lw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="42f9" class="graf graf--h4 graf-after--figure">Step 7:-</h4><p name="39b6" class="graf graf--p graf-after--h4">Copy your Firebase Config from Firebase dashboard and paste in into our app code.</p><figure tabindex="0" contenteditable="false" name="0fc8" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 411px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 68.5%;"></div><img class="graf-image" data-image-id="1*GPvudTgerNW8f-gRuq04YA.png" data-width="600" data-height="411" src="https://cdn-images-1.medium.com/max/800/1*GPvudTgerNW8f-gRuq04YA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="71fc" class="graf graf--h4 graf-after--figure">Step 8:-</h4><p name="b69a" class="graf graf--p graf-after--h4">Copy your Firebase config in your environment file in your Ionic app project. The environment file should be in the project root.</p><figure tabindex="0" contenteditable="false" name="7be0" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 191px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31.8%;"></div><img class="graf-image" data-image-id="1*GPkfoGCVj6xowh05-NqygA.png" data-width="600" data-height="191" src="https://cdn-images-1.medium.com/max/800/1*GPkfoGCVj6xowh05-NqygA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="b81c" class="graf graf--h4 graf-after--figure">Step 9:-</h4><p name="64de" class="graf graf--p graf-after--h4">We have successfully created our Firebase app. From left side tabs we can use Firebase tools according to our requirements.</p><figure tabindex="0" contenteditable="false" name="0312" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 266px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.3%;"></div><img class="graf-image" data-image-id="1*uw7lN9vyVjq32wW__Gp4QQ.png" data-width="600" data-height="266" src="https://cdn-images-1.medium.com/max/800/1*uw7lN9vyVjq32wW__Gp4QQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="daad" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="1410" class="graf graf--p graf-after--h3">All set and done! You are ready to integrate Firebase in your Ionic 5 app, or progressive web app (PWA). Stay tuned for more Ionic 5 blogs.</p><h3 name="11c7" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="7a20" class="graf graf--p graf-after--h3">Now that you have learned how to integrate Firebase in your Ionic 5 app, you can also try the following blogs. These are written for Ionic 4 but will work nicely for Ionic 5 as well.</p><ul class="postList"><li name="aff8" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8c75" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="7763" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="2724" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="5038" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="2a38" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="5759" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="9bcf" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="1831" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="513a" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 5 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 Full App starter from&nbsp;Enappd</figcaption></figure><p name="8956" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>