Basic email authentication with Firebase in Ionic 4
Tags: ionic, firebase, authentication, email
Published: 2019-09-24 10:24:17

<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="688d" 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="c92f" class="graf graf--p graf-after--figure is-selected">In this post, I will cover the very basics of Email authentication with Firebase in Ionic 4 apps. We’ll go through all the basic stuff like login, register, recover password, logout, update profile, update email and reset password. These are the essentials for any Ionic 4 app you are creating.</p><p name="1c97" class="graf graf--p graf-after--p">We will be doing all this in <code class="markup--code markup--p-code">ionic serve</code> i.e. browser itself. That means, you can use these features in both apps and PWA (👻 awesome, right&nbsp;? )</p><p name="cd1a" class="graf graf--p graf-after--p">Skip the basic introduction stuff if you are already familiar with what Firebase and Ionic 4 are.</p><blockquote name="eb24" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/ionic-4-firebase-auth"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic-4-firebase-auth</a></blockquote><h3 name="f15a" class="graf graf--h3 graf-after--blockquote">What is Firebase?</h3><p name="0089" class="graf graf--p graf-after--h3">If you don’t know much about Firebase&nbsp;… catch up with latest tech news! Firebase is the “hip” stuff in market today. One can use Firebase to create quick mobile app back-ends and DB, with a ton of built-in and ready-to-integrate features.</p><p name="17b0" class="graf graf--p graf-after--p">The most used feature of Firebase is as a back-end. But along with back-end, Authentication features of Firebase are a must to use. So, essentially Auth becomes the most used feature by default. Some of the other popular features are</p><ul class="postList"><li name="4785" class="graf graf--li graf-after--p">Push notifications</li><li name="320b" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Cloud functions</strong></li><li name="952e" class="graf graf--li graf-after--li">Analytics</li><li name="90e4" class="graf graf--li graf-after--li">Ad-mob</li><li name="f6b2" class="graf graf--li graf-after--li">Crashlytics</li><li name="c424" class="graf graf--li graf-after--li">In-app messages</li><li name="a560" class="graf graf--li graf-after--li">Remote config</li><li name="c5ce" class="graf graf--li graf-after--li">Social logins</li><li name="432a" class="graf graf--li graf-after--li">…… and more</li></ul><h4 name="cc15" class="graf graf--h4 graf-after--li">Firebase Authentication Methods</h4><p name="5502" class="graf graf--p graf-after--h4">Firebase provides a number of login methods&#8202;—&#8202;Email/password, social logins, and anonymous login.</p><p name="9ab2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Email login </strong>is the most basic and most used authentication method. Almost every app allows a user to login using their email and a password.</p><p name="23c6" class="graf graf--p graf-after--p">That being said, I’m sure you are very much interested in learning all kinds of authentication with Firebase. You can check out my other blogs on other Firebase authentication methods</p><ul class="postList"><li name="6b02" class="graf graf--li graf-after--p">Ionic 4 <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</a></li><li name="7907" class="graf graf--li graf-after--li">Ionic 4 <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 login</a></li><li name="5377" class="graf graf--li graf-after--li">Ionic 4 <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">anonymous login</a></li></ul><p name="a314" class="graf graf--p graf-after--li">along with free starters&nbsp;!! 👻👻👻</p><h3 name="33f1" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="eaae" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. 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.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="9dcb" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the email auth feature of Firebase. This is my break-down of the blog</p><ol class="postList"><li name="c281" class="graf graf--li graf-after--p">Create a Firebase project</li><li name="6172" class="graf graf--li graf-after--li">Create a simple Ionic 4 app</li><li name="b6ab" class="graf graf--li graf-after--li">Connect the Ionic app to Firebase</li><li name="e24a" class="graf graf--li graf-after--li">Implement Email Auth features using AngularFire2</li><li name="3666" class="graf graf--li graf-after--li">Explore more features of Firebase Auth</li></ol><p name="ba10" class="graf graf--p graf-after--li">As I said above, we can test all this in the browser itself, but feel free to make a build in your device and test as well. <strong class="markup--strong markup--p-strong">Let’s dive right in!</strong></p><figure tabindex="0" contenteditable="false" name="7f01" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 280px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.00000000000001%;"></div><img class="graf-image" data-image-id="1*2p0g92c1Hr7g1zz42QNMtw.gif" data-width="500" data-height="280" src="https://cdn-images-1.medium.com/max/800/1*2p0g92c1Hr7g1zz42QNMtw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Dive&nbsp;… Like a&nbsp;boss!</figcaption></figure><h3 name="a5e9" class="graf graf--h3 graf-after--figure">Step1&#8202;—&#8202;Create a Firebase&nbsp;project</h3><p name="c4dd" class="graf graf--p graf-after--h3">If you have ever used Firebase, you can skip to next step. For beginners, you can create a Firebase project by going to <a href="http://console.firebase.google.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase console</a> (sign-in if it asks you to). Create a new project or select an existing one. Your Firebase console dashboard should look like this</p><figure tabindex="0" contenteditable="false" name="dd19" 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*Q1tzpM83Uq66TNZ9E28nYA.png" data-width="800" data-height="357" src="https://cdn-images-1.medium.com/max/800/1*Q1tzpM83Uq66TNZ9E28nYA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase dashboard with your&nbsp;projects</figcaption></figure><p name="8159" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&#8202;—&#8202;It’s really easy to create a Firebase project, but if you still face any issue, follow step 1–4 of <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this blog</a></p><h4 name="d722" class="graf graf--h4 graf-after--p">Enable Anonymous login</h4><p name="7708" class="graf graf--p graf-after--h4">Once your project is created, go inside the project. Go to <strong class="markup--strong markup--p-strong">Authentication</strong> tab, and you need to toggle Anonymous login <strong class="markup--strong markup--p-strong">Enabled</strong></p><figure tabindex="0" contenteditable="false" name="094d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 438px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.5%;"></div><img class="graf-image" data-image-id="1*uzJ15QOdPmdOJSEJh-0dIg.png" data-width="1440" data-height="900" src="https://cdn-images-1.medium.com/max/800/1*uzJ15QOdPmdOJSEJh-0dIg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable anonymous login in&nbsp;Firebase</figcaption></figure><h3 name="9b4d" class="graf graf--h3 graf-after--figure">Step 2&#8202;—&#8202;Create a simple Ionic 4&nbsp;app</h3><blockquote name="0a81" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <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">this blog</a>.</blockquote><p name="ac57" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.0.0 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">blank</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start blank</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="f473" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="6851" class="graf graf--p graf-after--pre">Here is how the app will look like.</p><figure tabindex="0" contenteditable="false" name="a35c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.7%;"></div><img class="graf-image" data-image-id="1*x-BxryvtRgj6WAtrBKHdmg.png" data-width="1573" data-height="782" src="https://cdn-images-1.medium.com/max/800/1*x-BxryvtRgj6WAtrBKHdmg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">App screens for Firebase basic&nbsp;auth</figcaption></figure><p name="7655" class="graf graf--p graf-after--figure">We’ll see the code for these in subsequent steps</p><h3 name="4429" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Connect the Ionic app to&nbsp;Firebase</h3><h4 name="5ce3" class="graf graf--h4 graf-after--h3">Copy Firebase&nbsp;config</h4><blockquote name="61cb" class="graf graf--blockquote graf-after--h4"><em class="markup--em markup--blockquote-em">Details of this step can be found in our blog </em><a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23/"  class="markup--anchor markup--blockquote-anchor" rel="nofollow noopener nofollow noopener noopener noopener noopener"    target="_blank"><em class="markup--em markup--blockquote-em">How to integrate Firebase in Ionic 4 apps</em></a></blockquote><p name="c336" class="graf graf--p graf-after--blockquote">First, copy your Firebase config information from your Firebase console and paste it in <code class="markup--code markup--p-code">environment</code> files in your Ionic 4 app. The environment file will look like this</p><figure tabindex="0" contenteditable="false" name="5598" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 223px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31.900000000000002%;"></div><img class="graf-image" data-image-id="1*8B3y4-396WnPZG9GHQyypQ.png" data-width="800" data-height="255" src="https://cdn-images-1.medium.com/max/800/1*8B3y4-396WnPZG9GHQyypQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="d9e0" class="graf graf--p graf-after--figure">To connect the app to Firebase, and use the Firebase methods, we’ll use AngularFire2 package. Install the package using</p><pre name="b053" class="graf graf--pre graf-after--p">$ npm install firebase @angular/fire --save</pre><p name="0619" class="graf graf--p graf-after--pre">Import <strong class="markup--strong markup--p-strong">angularFire2</strong> and your <code class="markup--code markup--p-code">environment</code> in <code class="markup--code markup--p-code">app.module.ts</code></p><figure tabindex="0" contenteditable="false" name="45ff" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/7d49fdbf5fca4830a9f5be6703095aa7.js %}</div></div></figure><p name="5919" class="graf graf--p graf-after--figure">With this, your app is now connected to Firebase project. Next we’ll write the functions for basic login, logout, recover password and updating profile.</p><h3 name="af36" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Implement Email Auth using AngularFire2</h3><p name="3ad9" class="graf graf--p graf-after--h3">Firebase auth functions are really simple. Follow the gist codes given below to create your methods</p><h4 name="528c" class="graf graf--h4 graf-after--p">Email Registration (Signup)</h4><p name="9ec8" class="graf graf--p graf-after--h4"><code class="markup--code markup--p-code">createUserWithEmailAndPassword</code> is the email signup function. In the app, this is implemented in <code class="markup--code markup--p-code">signup.page.ts</code></p><figure tabindex="0" contenteditable="false" name="b414" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/236dcdbaf897c02fe7d5eb890b4a9d95.js %}</div></div></figure><p name="3b43" class="graf graf--p graf-after--figure">Note that Firebase only takes email and password as arguments in the Signup method. Other data like username, profile photo, phone number, etc can be later updated. Login/signup with <code class="markup--code markup--p-code">username</code> is not directly possible in Firebase currently. (There is an alternate way to implement that, but that is for later)</p><h4 name="8be7" class="graf graf--h4 graf-after--p">Email Login</h4><figure tabindex="0" contenteditable="false" name="c168" class="graf graf--figure graf--iframe graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/233c61fceecb98a94879e6cbb75c71c0.js %}</div></div></figure><p name="f667" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">signInWithEmailAndPassword</code> is the login function, accepts Email and Password as arguments. In the app, this is implemented in <code class="markup--code markup--p-code">login.page.ts</code></p><h4 name="1214" class="graf graf--h4 graf-after--p">Recover password</h4><p name="a849" class="graf graf--p graf-after--h4">Recovering password is an important feature that every auth system should have. Although implementing it in a custom back-end is a little tricky because of an email server involved. Firebase makes it super easy, just call a simple function with user’s email, and firebase takes care of the rest.</p><figure tabindex="0" contenteditable="false" name="2daf" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 384px; max-height: 676px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176%;"></div><img class="graf-image" data-image-id="1*Lg8vHCCK_1S81UCELGaQ9A.png" data-width="384" data-height="676" src="https://cdn-images-1.medium.com/max/800/1*Lg8vHCCK_1S81UCELGaQ9A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Recover password with&nbsp;Firebase</figcaption></figure><ul class="postList"><li name="c3d5" class="graf graf--li graf-after--figure">User enters email and calls recover password</li></ul><p name="993b" class="graf graf--p graf-after--li">Here’s the function for recover password</p><figure tabindex="0" contenteditable="false" name="45f1" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/ff0e1eb33d6617ae9708767445aecb0b.js %}</div></div></figure><ul class="postList"><li name="cc8b" class="graf graf--li graf-after--figure">Firebase sends an email to the email provided with a <strong class="markup--strong markup--li-strong">Password Reset Link</strong></li></ul><figure tabindex="0" contenteditable="false" name="9eda" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 276px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 39.5%;"></div><img class="graf-image" data-image-id="1*KUBw9HI1pB6Loxif_pnVWg.png" data-width="1051" data-height="415" src="https://cdn-images-1.medium.com/max/800/1*KUBw9HI1pB6Loxif_pnVWg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Password reset link sent by&nbsp;Firebase</figcaption></figure><ul class="postList"><li name="dd0d" class="graf graf--li graf-after--figure">Click on the link, user is redirected to another page to create new password. This is fully controlled by Firebase, you don’t have to do anything 😃</li></ul><figure tabindex="0" contenteditable="false" name="cb58" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 322px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46%;"></div><img class="graf-image" data-image-id="1*e8l0-0-lfIlmhdmkXGHzmA.png" data-width="765" data-height="352" src="https://cdn-images-1.medium.com/max/800/1*e8l0-0-lfIlmhdmkXGHzmA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Password reset dialog&nbsp;box</figcaption></figure><ul class="postList"><li name="1b5d" class="graf graf--li graf-after--figure">Create new password and save. You are all set with new password</li></ul><figure tabindex="0" contenteditable="false" name="769a" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 217px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31%;"></div><img class="graf-image" data-image-id="1*yXHHDCrcFkr6D6WkEHBmKw.png" data-width="784" data-height="243" src="https://cdn-images-1.medium.com/max/800/1*yXHHDCrcFkr6D6WkEHBmKw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="14a7" class="graf graf--p graf-after--figure">Super super easy to implement, right?</p><h4 name="e1da" class="graf graf--h4 graf-after--p">Logout</h4><p name="0410" class="graf graf--p graf-after--h4">Logout with Firebase is very easy. The single function will log you out from any kind of auth you are logged in with</p><figure tabindex="0" contenteditable="false" name="6be6" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/b2a065685b0bdd99327316d5d0cea45f.js %}</div></div></figure><h3 name="4107" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Explore more features of Firebase&nbsp;Auth</h3><p name="8a49" class="graf graf--p graf-after--h3">In addition to regular functions, you get a few more functions from Firebase like update profile, change email, change password etc.</p><h4 name="ba33" class="graf graf--h4 graf-after--p">Update Profile</h4><p name="fce2" class="graf graf--p graf-after--h4">With update profile, you can update user’s <code class="markup--code markup--p-code">displayName</code> (username) and <code class="markup--code markup--p-code">photoURL</code> (display pic). Following are the functions to update <code class="markup--code markup--p-code">displayName</code> and <code class="markup--code markup--p-code">photoURL</code></p><figure tabindex="0" contenteditable="false" name="82ad" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/1ee18326c5170f5c8008720caa1e5526.js %}</div></div></figure><p name="2275" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">onAuthStateChanged</code> keeps track of the logged in user, so all the user based methods are wrapped inside it to capture the logged in user.</p><p name="aa5f" class="graf graf--p graf-after--p">I have used a random image generator <a href="http://picsum.photos"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">picsum.photos</a> to create display images using just numbers.</p><figure tabindex="0" contenteditable="false" name="d7b9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 614px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.4%;"></div><img class="graf-image" data-image-id="1*rS1B0LEd6S_gaFMQLwBJUg.gif" data-width="350" data-height="614" src="https://cdn-images-1.medium.com/max/800/1*rS1B0LEd6S_gaFMQLwBJUg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Update profile and see live changes in&nbsp;Firebase</figcaption></figure><h4 name="f919" class="graf graf--h4 graf-after--figure">Update email</h4><p name="260a" class="graf graf--p graf-after--h4">Updating email is considered a sensitive operation by Firebase. For this reason Firebase asks user to have a recent login to update email. If you try to update email with an old login, Firebase will throw an error</p><figure tabindex="0" contenteditable="false" name="b265" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 383px; max-height: 675px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.2%;"></div><img class="graf-image" data-image-id="1*K4GpvSZtGjXCsN1abFr5Gg.png" data-width="383" data-height="675" src="https://cdn-images-1.medium.com/max/800/1*K4GpvSZtGjXCsN1abFr5Gg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Sensitive operation require a recent login in&nbsp;Firebase</figcaption></figure><p name="acbd" class="graf graf--p graf-after--figure">Here’s the function to update Email</p><figure tabindex="0" contenteditable="false" name="8d4a" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/2ced28c878c7e35d9b82dcd84c0316e0.js %}</div></div></figure><p name="56da" class="graf graf--p graf-after--figure">Updating email is a powerful feature, as it changes the primary auth parameter itself.</p><figure tabindex="0" contenteditable="false" name="16d0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 614px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.4%;"></div><img class="graf-image" data-image-id="1*pvXydBQxImWE0jzE2bliWg.gif" data-width="350" data-height="614" src="https://cdn-images-1.medium.com/max/800/1*pvXydBQxImWE0jzE2bliWg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Update email using&nbsp;Firebase</figcaption></figure><h4 name="8c88" class="graf graf--h4 graf-after--figure">Update password</h4><p name="7ba4" class="graf graf--p graf-after--h4">Updating password is also considered a sensitive operation by Firebase. For this reason Firebase asks user to have a recent login to update password. If you try to update password with an old login, Firebase will throw an error</p><figure tabindex="0" contenteditable="false" name="33fb" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/8391174cee8c5c798ba35efddf627963.js %}</div></div></figure><p name="7bc7" class="graf graf--p graf-after--figure">With this, we have learned all the important features of Firebase email authentication. You are now equipped with essential <strong class="markup--strong markup--p-strong">Firebase Auth powers! 🔥</strong></p><figure tabindex="0" contenteditable="false" name="6d1d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 400px; max-height: 224px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.00000000000001%;"></div><img class="graf-image" data-image-id="1*wdJv1ep8b8YmBD5UQnPG_Q.gif" data-width="400" data-height="224" src="https://cdn-images-1.medium.com/max/800/1*wdJv1ep8b8YmBD5UQnPG_Q.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Uh&nbsp;… I meant Firebase&nbsp;… not Fire&nbsp;!!</figcaption></figure><h3 name="603c" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="626f" class="graf graf--p graf-after--h3">In this post, we learned how to implement Firebase basic email Authentication. We also saw various other feature available like update profile, update email, update password and recover password.</p><p name="7e17" class="graf graf--p graf-after--p">Grab the code from the Github repo and feel free to integrate this into your own app. Good luck!</p><blockquote name="d0e9" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/ionic-4-firebase-auth"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic-4-firebase-auth</a></blockquote><p name="a673" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Stay tuned for more Ionic 4 blogs!</strong></p><h3 name="5997" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Firebase Email auth in Ionic 4, you can also try</p><ul class="postList"><li name="98b5" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous logic in Ionic 4</a> using Firebase</li><li name="e6f4" class="graf graf--li graf-after--li"><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 login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><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 with Firebase</a></li><li name="9f48" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><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="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="2e5a" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li></ul><p name="2930" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">If you need a base to start your next Ionic 4 app, you can make your next awesome app using </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic 4 Full App</strong></a><strong class="markup--strong markup--p-strong">. This is the most powerful Ionic 4 starter available today.</strong></p><figure tabindex="0" contenteditable="false" name="89dc" 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.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app for your next awesome&nbsp;app</figcaption></figure><p name="e1fd" class="graf graf--p graf-after--figure graf--trailing">This blog was originally published on <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p></div></div></section></div></article></main>