Firebase with Ionic 4 - Hosting, Auth and DB connection
Tags: ionic, firebase, hosting, database
Published: 2020-03-25 20:48:10

<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="7e9f" 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="1438" class="graf graf--blockquote graf-after--figure"><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">Let’s take a dive to know the paramount benefits of Firebase for your Ionic 4 App.</p><p name="bdb2" 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="3cf8" class="graf graf--p graf-after--p">Today Firebase is one of the fastest-growing platforms for application development. Some of the reasons 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 🕺.<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">Firebase with ionic&#8202;—&#8202;hosting, Auth and DB Connection. </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="a981" class="graf graf--h3 graf-after--p">1. Hosting with firebase in ionic 4&nbsp;—</h3><p name="4232" class="graf graf--p graf-after--h3">Hosting or deploying an ionic app on firebase is a pinch game. Not believing,<br>let us see how easy it is…..</p><p name="cbec" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1: —</strong></p><p name="df90" class="graf graf--p graf-after--p">We are proceeding as you don’t have any already created firebase project. Let's create one by following these steps…</p><p name="7cae" class="graf graf--p graf-after--p">1. Go to <a href="https://console.firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><strong class="markup--strong markup--p-strong">https://console.firebase.google.com/</strong></a></p><p name="3f2f" class="graf graf--p graf-after--p">2. Click on add a project and fill the project name input field and check the terms &amp; conditions block and click on create project button.</p><figure tabindex="0" contenteditable="false" name="9eef" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 377px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 53.900000000000006%;"></div><img class="graf-image" data-image-id="1*EqgF42n6El2TrB9tRMNXwA.png" data-width="1920" data-height="1034" src="https://cdn-images-1.medium.com/max/720/1*EqgF42n6El2TrB9tRMNXwA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4294" class="graf graf--p graf-after--figure">Now in the next step your project is ready, click on <strong class="markup--strong markup--p-strong">Continue</strong>.</p><p name="f05f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2: —</strong></p><p name="3b95" class="graf graf--p graf-after--p">Next, in a Terminal, install the Firebase CLI:</p><pre name="35e8" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install -g firebase-tools<br></code>firebase login<br>firebase init</pre><p name="ad87" class="graf graf--p graf-after--pre">With the Firebase CLI installed, run <code class="markup--code markup--p-code">firebase init</code> within your Ionic project.</p><p name="f78c" class="graf graf--p graf-after--p">Now the dialog will bring up some questions and we need to select <strong class="markup--strong markup--p-strong">Hosting</strong> (using space, then hit enter).</p><p name="3ef9" class="graf graf--p graf-after--p">The CLI prompts:</p><p name="93e1" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“Which Firebase CLI features do you want to set up for this folder?”</strong> Choose “Hosting: Configure and deploy Firebase Hosting sites.”</p><p name="62d3" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“Select a default Firebase project for this directory:”</strong> Choose the project you created on the Firebase website.</p><p name="1815" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“What do you want to use as your public directory?”</strong> Enter “www”.</p><blockquote name="e36d" class="graf graf--blockquote graf-after--p">Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:</blockquote><p name="0704" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Configure as a single-page app (rewrite all urls to /index.html)?”</strong> Enter “Yes”.</p><p name="b6b8" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“File www/index.html already exists. Overwrite?”</strong> Enter “No”.</p><p name="ec88" class="graf graf--p graf-after--p">A <code class="markup--code markup--p-code">firebase.json</code> config file is generated, configuring the app for deployment.</p><p name="0280" class="graf graf--p graf-after--p">The complete <code class="markup--code markup--p-code">firebase.json</code> looks like:</p><pre name="183b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">{<br>  "hosting": {<br>    "public": "www",<br>    "ignore": [<br>      "firebase.json",<br>      "**/.*",<br>      "**/node_modules/**"<br>    ],<br>    "rewrites": [<br>      {<br>        "source": "**",<br>        "destination": "/index.html"<br>      }<br>    ],<br>}</code></pre><p name="22f4" class="graf graf--p graf-after--pre">For more information about the <code class="markup--code markup--p-code">firebase.json</code> properties, see the <a href="https://firebase.google.com/docs/hosting/full-config#section-firebase-json"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase documentation</a>.</p><p name="5a8e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3: —</strong></p><p name="11d0" class="graf graf--p graf-after--p">Next, build an optimized version of the app by running:</p><pre name="e33d" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">ionic build --prod</code></pre><p name="8425" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">step 4:-</strong></p><p name="d707" class="graf graf--p graf-after--p">Last, deploy the app by running:</p><pre name="005b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">firebase deploy</code></pre><p name="0856" class="graf graf--p graf-after--pre">After the successful deploy, you will see a success message with two links in which one will be your project console and another will be hosting URL like below image</p><figure tabindex="0" contenteditable="false" name="3779" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 270px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 38.6%;"></div><img class="graf-image" data-image-id="0*g7ESbHyGDaMsvKav" data-width="1024" data-height="395" src="https://cdn-images-1.medium.com/max/720/0*g7ESbHyGDaMsvKav"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="dea5" class="graf graf--p graf-after--figure">Now you can hit the hosting URL and see your app is hosted on the server.</p><h3 name="f33f" class="graf graf--h3 graf-after--p">2. Firebase Authentication in ionic 4&nbsp;—</h3><p name="c188" class="graf graf--p graf-after--h3">Ionic has made app authentications too easy for their developer, still not believing? Let us check this out here…</p><p name="ae96" class="graf graf--p graf-after--p">You may 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>too<strong class="markup--strong markup--p-strong"> </strong>to get started with Firebase Authentication and many more.</p><figure tabindex="0" contenteditable="false" name="e0fe" 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*CWVmYtGuIZ8YMQDgh2KiVg.jpeg" data-width="623" data-height="346" src="https://cdn-images-1.medium.com/max/720/1*CWVmYtGuIZ8YMQDgh2KiVg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ae8a" class="graf graf--p graf-after--figure">Everyone wants the identity of the user to save their data securely on the cloud to give them a smooth and reliable experience on all of the users’ devices after a single login. Users don’t want to fill the data again and again on every device, so Firebase Authentication provides us these facilities here.</p><p name="10e4" class="graf graf--p graf-after--p">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="b658" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 378px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54%;"></div><img class="graf-image" data-image-id="1*y4_aEK4wpyniuTy0JZGUuQ.png" data-width="1917" data-height="1035" src="https://cdn-images-1.medium.com/max/720/1*y4_aEK4wpyniuTy0JZGUuQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="e00d" class="graf graf--p graf-after--figure">In ionic install the plugin by executing this command:</p><pre name="30f1" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-firebase-authentication<br>npm install @ionic-native/firebase-authentication</pre><p name="2cbc" class="graf graf--p graf-after--pre">Now Import the plugin in your component.</p><pre name="b823" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';<br>constructor(private firebaseAuthentication: FirebaseAuthentication) { }</code></pre><p name="58d3" class="graf graf--p graf-after--pre">You can use the following functions to do various tasks in authentication modules.</p><h4 name="88e6" 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('admin@enappd.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. <a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Login with Email &amp;&nbsp;Password</a></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. <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Sign-in anonymously</a></h4><p name="1d36" class="graf graf--p graf-after--h4">Create and use a 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. <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Google login&#8202;—&#8202;signInWithGoogle(idToken, accessToken)</a></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 noopener 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 noopener noopener noopener"    target="_blank">iOS</a>.</p><h4 name="1ac8" class="graf graf--h4 graf-after--p">VIII. <a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Facebook login&#8202;—&#8202;signInWithFacebook(accessToken)</a></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 noopener 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 noopener noopener noopener"    target="_blank">iOS</a>.</p><h4 name="e4f9" class="graf graf--h4 graf-after--p">IX. <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Twitter login&#8202;—&#8202;signInWithTwitter(token, secret)</a></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 noopener 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 noopener 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="0305" class="graf graf--h3 graf-after--pre">3. Firebase Data Base Connection —</h3><p name="a4de" class="graf graf--p graf-after--h3">To connect your app with firebase database, at first, we need to install @angular/fire package in our app.</p><p name="aab8" class="graf graf--p graf-after--p">By executing this command firebase will be installed in your app:-</p><pre name="0d30" class="graf graf--pre graf-after--p">npm install @angular/fire firebase --save</pre><p name="2579" class="graf graf--p graf-after--pre">Once AngularFire has been installed (the plugin that we’ll use to communicate our Ionic app with Firebase), we need to create a new project in Firebase. As we have already created a firebase project, hence go to the <a href="https://console.firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">firebase console</a>, where you’ll see the following menu:</p><figure tabindex="0" contenteditable="false" name="4251" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 379px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.1%;"></div><img class="graf-image" data-image-id="1*u3vek2mv1sCPMitxHByv7Q.png" data-width="1920" data-height="1039" src="https://cdn-images-1.medium.com/max/720/1*u3vek2mv1sCPMitxHByv7Q.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="7f89" class="graf graf--p graf-after--figure">Click on “<strong class="markup--strong markup--p-strong">Add Firebase to your web app</strong>” to see your new Firebase application’s credentials. We’ll specify these credentials to tell our Ionic application to communicate with our Firebase application.</p><p name="cf78" class="graf graf--p graf-after--p">The next step is to add firebase to our ionic app. For this go to the app/src/environment.ts file and paste the credentials copied from the “<strong class="markup--strong markup--p-strong">Add Firebase to your web app</strong>” dialog.</p><pre name="744a" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">export const environment = {<br> production: false,<br> firebase: {<br>   apiKey: "YOUR_API_KEY",<br>   authDomain: "YOUR_AUTH_DOMAIN",<br>   databaseURL: "YOUR_DATABASE_URL",<br>   projectId: "YOUR_PROJECT_ID",<br>   storageBucket: "YOUR_STORAGE_BUCKET",<br>   messagingSenderId: "YOUR_SENDER_ID"<br> }<br>};</code></pre><p name="8d86" class="graf graf--p graf-after--pre">Now goto firebase console and click on your project and then on the database on the left side menu.</p><figure tabindex="0" contenteditable="false" name="8f09" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 345px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.3%;"></div><img class="graf-image" data-image-id="1*W7vsYp-tfvLNZdsXGTH87A.jpeg" data-width="962" data-height="474" src="https://cdn-images-1.medium.com/max/720/1*W7vsYp-tfvLNZdsXGTH87A.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="199d" class="graf graf--p graf-after--figure">Then create a database by filling the necessary details. Like,</p><figure tabindex="0" contenteditable="false" name="02f5" class="graf graf--figure graf-after--p 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*JUUTUGNvHf71enKDqorx9A.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/720/1*JUUTUGNvHf71enKDqorx9A.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="31f6" class="graf graf--p graf-after--figure">After creating a database you can select real-time database</p><figure tabindex="0" contenteditable="false" name="1633" class="graf graf--figure graf-after--p 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*D67_nDTMM3xIXp7yGpUb4w.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/720/1*D67_nDTMM3xIXp7yGpUb4w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="7ad5" class="graf graf--p graf-after--figure">After selecting Real-time database, you will get the screen like,</p><figure tabindex="0" contenteditable="false" name="3bea" class="graf graf--figure graf-after--p 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*cakZNAoM0VDe9otDBJcq1w.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/720/1*cakZNAoM0VDe9otDBJcq1w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="21f2" class="graf graf--p graf-after--figure">Before starting,</p><blockquote name="7921" class="graf graf--blockquote graf-after--p">import { AngularFirestoreModule } from ‘<a href="http://twitter.com/angular/fire"  class="markup--anchor markup--blockquote-anchor" title="Twitter profile for @angular/fire" rel="noopener"    target="_blank">@angular/fire</a>/firestore’; in your app.module.ts. So that you can access this in your components.</blockquote><p name="dbe5" class="graf graf--p graf-after--blockquote">Now we are ready to start CRUD(Create, Read, Update, Delete) operations with firebase and ionic. We are going to see all these operations one by one:</p><blockquote name="2a8e" class="graf graf--blockquote graf-after--p">import { AngularFirestoreCollection, AngularFirestore } from ‘@angular/fire/firestore’; in your page.ts</blockquote><p name="49bb" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">and in the constructor inject:</strong></p><pre name="4820" class="graf graf--pre graf-after--p">constructor(<code class="markup--code markup--pre-code">private firestore</code>: AngularFirestore) { }</pre><ol class="postList"><li name="2b79" class="graf graf--li graf-after--pre"><strong class="markup--strong markup--li-strong">Create</strong></li></ol><p name="cee7" class="graf graf--p graf-after--li">You will need to add the <code class="markup--code markup--p-code">createDatabse()</code> method to persist an item collection in the Firestore database:</p><pre name="4b5c" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">createDatabse(items: Item){<br>    return this.firestore.collection('itemsList').add(items);<br>}</code></pre><p name="1510" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">2. Read</strong></p><p name="0805" class="graf graf--p graf-after--p">You will need to add the <code class="markup--code markup--p-code">readDatabse()</code> method to retrieve the available item from the Firestore collection:</p><pre name="3bc5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">readDatabse() {<br>    return this.firestore.collection('policies').snapshotChanges();<br>}</code></pre><p name="e3d1" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">3. Update</strong></p><p name="315d" class="graf graf--p graf-after--p is-selected">Next, you need to add the <code class="markup--code markup--p-code">updateDatabse()</code> method to update an item data by its identifier:</p><pre name="e241" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">updateDatabse(items: Item){<br>    delete items.id;<br>    this.firestore.doc('itemsList/' + items.id).update(items);<br>}</code></pre><p name="234d" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">4. Delete</strong></p><p name="79c4" class="graf graf--p graf-after--p">Finally, you can add the <code class="markup--code markup--p-code">deleteItem()</code> method to delete an item by its identifier:</p><pre name="c9b4" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">deleteItem(itemId: string){<br>    this.firestore.doc('itemsList/' + itemId).delete();<br>}</code></pre><p name="2d5e" class="graf graf--p graf-after--pre"><a href="https://store.enappd.com/product/ionic4-firebase-starter/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">You can find the fully-functioning ionic -firebase starter kit with lots of more features only by clicking here….</a></p><h3 name="48c2" class="graf graf--h3 graf-after--p">Conclusion:</h3><p name="3881" class="graf graf--p graf-after--h3">In this tutorial, we have learned how to deploy our ionic app on firebase using firebase hosting method, then we got to know what are the various tasks in firebase authentications modules with the ionic app and how to achieve those?<br>At last but not least we got to know how we can connect our firebase database with our ionic application very easily and we understood the methods and functions of firebase CRUD operation in the ionic application. Firebase provides us these facilities for free up to a limit. Firebase is truly a great match for modern-day mobile apps and is really developer-friendly.</p><h3 name="2917" 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 the implementation of Local Notifications in Ionic 4, you can also try</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> | <a href="https://enappd.com/blog/local-notifications-in-ionic-4/69"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Local notification</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-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 4 app, you can 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><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p is-defaultValue"><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/720/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="cbfb" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>