How to integrate Firebase in Ionic 4 apps
Tags: ionic, firebase, login, database
Published: 2019-09-23 10:00:57

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors is-withLeadingImage" 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="437a" 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"><blockquote name="758e" class="graf graf--blockquote graf-after--figure">Check out our <a href="https://store.enappd.com/product/ionic4-firebase-starter/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Firebase Starter kit</strong> </a>to start with basic functionalities of firebase in Ionic 4 apps like database&nbsp;, Authentication and Storage</blockquote><p name="add7" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Firebase</strong> 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.</p><p name="e9e5" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic</strong> 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.</p><p name="daac" class="graf graf--p graf-after--p">Features of Firebase&nbsp;: -</p><ol class="postList"><li name="2168" class="graf graf--li graf-after--p">Cloud Database Store</li><li name="c809" class="graf graf--li graf-after--li">Authentication</li><li name="739a" class="graf graf--li graf-after--li">Hosting</li><li name="f0dd" class="graf graf--li graf-after--li is-selected">Storage</li><li name="d21e" class="graf graf--li graf-after--li">Machine Learning Kit</li><li name="c2b7" class="graf graf--li graf-after--li">Crashlytics</li><li name="7451" class="graf graf--li graf-after--li">Performance</li><li name="b91b" class="graf graf--li graf-after--li">Test lab</li><li name="9a08" class="graf graf--li graf-after--li">Dynamic Links</li><li name="e68a" class="graf graf--li graf-after--li">Cloud Messaging</li><li name="e0db" class="graf graf--li graf-after--li">In-App messaging and many more…</li></ol><blockquote name="051f" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">To learn more about Firebase </em>Features<em class="markup--em markup--blockquote-em">, read </em></strong><a href="https://enappd.com/blog/firebase-with-ionic-4-overview/8/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Firebase With Ionic 4 Overview</em></strong></a></blockquote><p name="5c8a" class="graf graf--p graf-after--blockquote">This post is a very basic introduction of how to (just) connect Firebase to your Ionic 4 app. For other details like <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Twitter</a> login, <a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Facebook login</a> and <a href="https://enappd.com/blog/firebase-with-ionic-4-overview/8"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">other plugins</a>, you can our <a href="https://enappd.com/blog/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">other blogs</a>.</p><h3 name="32dd" class="graf graf--h3 graf-after--p">Connect your Ionic App with&nbsp;Firebase</h3><p name="3c13" 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/firebase-starter-full-auth/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 full Auth </a>starter or you can create your own Ionic 4 app from scratch. This app contains all type of Authentications using Firebase</p><figure tabindex="0" contenteditable="false" name="bd6b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 525px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*aw_rO-fnmbUEAdIu3_3UvQ.jpeg" data-width="1200" data-height="900" src="https://cdn-images-1.medium.com/max/800/1*aw_rO-fnmbUEAdIu3_3UvQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full Auth app&nbsp;starter</figcaption></figure><blockquote name="220a" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">To learn more about how to create Ionic app from </em>scratch<em class="markup--em markup--blockquote-em">, read </em></strong><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">How to create Ionic 4 app from scratch for beginners</em></strong></a></blockquote><p name="5936" class="graf graf--p graf-after--blockquote">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="93e6" class="graf graf--p graf-after--p">To install the AngularFire plugin, run the following command from your terminal</p><pre name="d745" class="graf graf--pre graf-after--p">npm install firebase angularfire2 — save</pre><h3 name="1b72" class="graf graf--h3 graf-after--pre">Firebase Configuration</h3><p name="35a1" 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><h3 name="50ca" class="graf graf--h3 graf-after--p">Step 1&nbsp;:-</h3><p name="f02a" class="graf graf--p graf-after--h3">In this step we will Create a project in Firebase console. For that we will go to <a href="https://firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a></p><figure tabindex="0" contenteditable="false" name="2b90" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 311px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.4%;"></div><img class="graf-image" data-image-id="1*rU4omOL6vtIdHzkUuMuj8A.png" data-width="1919" data-height="852" src="https://cdn-images-1.medium.com/max/800/1*rU4omOL6vtIdHzkUuMuj8A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase website</figcaption></figure><h3 name="c57b" class="graf graf--h3 graf-after--figure">Step 2&nbsp;:-</h3><p name="b29c" class="graf graf--p graf-after--h3">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="0cb5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 472px; max-height: 48px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 10.2%;"></div><img class="graf-image" data-image-id="1*d8OB9lTJHqZSJss1Iq0-lw.png" data-width="472" data-height="48" src="https://cdn-images-1.medium.com/max/800/1*d8OB9lTJHqZSJss1Iq0-lw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Go to Firebase&nbsp;console</figcaption></figure><h3 name="73ee" class="graf graf--h3 graf-after--figure">Step 3&nbsp;:-</h3><p name="c6f7" class="graf graf--p graf-after--h3">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="44d9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 313px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.6%;"></div><img class="graf-image" data-image-id="1*GLN3a0ztms8nxRXIeNr74Q.png" data-width="1915" data-height="855" src="https://cdn-images-1.medium.com/max/800/1*GLN3a0ztms8nxRXIeNr74Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase console</figcaption></figure><h3 name="5760" class="graf graf--h3 graf-after--figure">Step 4&nbsp;:-</h3><p name="dc2b" class="graf graf--p graf-after--h3">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&nbsp;, 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="0cf5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 312px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.6%;"></div><img class="graf-image" data-image-id="1*bstQaHyw60luQ-zDRVZU7Q.png" data-width="1918" data-height="856" src="https://cdn-images-1.medium.com/max/800/1*bstQaHyw60luQ-zDRVZU7Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add a project in&nbsp;Firebase</figcaption></figure><h3 name="5465" class="graf graf--h3 graf-after--figure">Step 5&nbsp;:-</h3><p name="0c93" class="graf graf--p graf-after--h3">So now our Firebase project is created. In this step we will add Firebase to our Ionic app. For this, select <strong class="markup--strong markup--p-strong">Add Firebase to your Web App</strong></p><figure tabindex="0" contenteditable="false" name="d342" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 313px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.7%;"></div><img class="graf-image" data-image-id="1*yZPo2NtcoxNq4PFXiP63Qg.png" data-width="1918" data-height="858" src="https://cdn-images-1.medium.com/max/800/1*yZPo2NtcoxNq4PFXiP63Qg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase project dashboard</figcaption></figure><h3 name="9303" class="graf graf--h3 graf-after--figure">Step 6&nbsp;:-</h3><p name="3ad8" class="graf graf--p graf-after--h3">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="5bf4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 671px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 95.8%;"></div><img class="graf-image" data-image-id="1*djbQ3pdm4bJgImFYRvxCcA.png" data-width="890" data-height="853" src="https://cdn-images-1.medium.com/max/800/1*djbQ3pdm4bJgImFYRvxCcA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a Firebase Web&nbsp;App</figcaption></figure><h3 name="a7c3" class="graf graf--h3 graf-after--figure">Step 7&nbsp;:-</h3><p name="b28e" class="graf graf--p graf-after--h3">Copy your Firebase Config from Firebase dashboard and paste in into our app code.</p><figure tabindex="0" contenteditable="false" name="4f4f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 480px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 68.60000000000001%;"></div><img class="graf-image" data-image-id="1*wSQgfACMviXDBUN9hDeTNA.png" data-width="800" data-height="549" src="https://cdn-images-1.medium.com/max/800/1*wSQgfACMviXDBUN9hDeTNA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Pick Firebase credentials from the code&nbsp;snippet</figcaption></figure><h3 name="fba3" class="graf graf--h3 graf-after--figure">Step 9&nbsp;:-</h3><p name="e2ee" class="graf graf--p graf-after--h3">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="932c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 224px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 32%;"></div><img class="graf-image" data-image-id="1*FgEwf0PRQyRXAe67oSo21w.png" data-width="997" data-height="319" src="https://cdn-images-1.medium.com/max/800/1*FgEwf0PRQyRXAe67oSo21w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create environment file in Ionic project&nbsp;base</figcaption></figure><h3 name="4ebf" class="graf graf--h3 graf-after--figure">Step 8&nbsp;:-</h3><p name="4bac" class="graf graf--p graf-after--h3">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="7786" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 311px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.4%;"></div><img class="graf-image" data-image-id="1*vZQEr6VcCNEdVHrpTW9dqw.png" data-width="1920" data-height="853" src="https://cdn-images-1.medium.com/max/800/1*vZQEr6VcCNEdVHrpTW9dqw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use more Firebase services from left&nbsp;panel</figcaption></figure><p name="3d30" class="graf graf--p graf-after--figure">You’re all set now to integrate your firebase project in Ionic 4 app and PWA. Go enjoy, homie&nbsp;!</p><figure tabindex="0" contenteditable="false" name="a67b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 72.5%;"></div><img class="graf-image" data-image-id="1*ceLX14cSsAZ-M7c2GHdlSA.gif" data-width="480" data-height="348" src="https://cdn-images-1.medium.com/max/800/1*ceLX14cSsAZ-M7c2GHdlSA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">and Chill</figcaption></figure><h3 name="538d" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="5c1f" class="graf graf--p graf-after--h3">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 <code class="markup--code markup--p-code">true</code>.</p><p name="6da2" class="graf graf--p graf-after--p">Stay tuned for more Ionic 4 blogs&nbsp;!</p><h3 name="ba17" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="8964" class="graf graf--p graf-after--h3">Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next</p><ul class="postList"><li name="dcb9" class="graf graf--li graf-after--p">How to implement <a href="http://Facebook%20login%20in%20Ionic%204"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4</a></li><li name="0e72" class="graf graf--li graf-after--li">How to implement <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 login in Ionic 4</a></li><li name="e62a" class="graf graf--li graf-after--li">How to implement <a href="https://enappd.com/blog/how-to-create-mobile-games-pwa-with-ionic-4-and-phaser/19"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Phaser game framework in Ionic 4</a></li><li name="21d0" class="graf graf--li graf-after--li">How to i<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">mplement multi-language text in Ionic 4</a></li><li name="d038" class="graf graf--li graf-after--li">How to i<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">mplement Stripe payment in Ionic 4</a></li><li name="3f89" class="graf graf--li graf-after--li">How to i<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">mplement PayPal payment in Ionic 4</a></li><li name="ede6" class="graf graf--li graf-after--li">How to <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">implement Pedometer in Ionic 4</a></li><li name="80f9" class="graf graf--li graf-after--li">Integrate <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 in Ionic 4</a></li><li name="55b4" class="graf graf--li graf-after--li graf--trailing">Integrate <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 in Ionic 4</a></li></ul></div></div></section></div></article></main>