Implement Anonymous login in Ionic 4 Apps with Firebase
Tags: ionic, firebase, anonymous, login
Published: 2019-09-24 10:06:59

<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="d971" 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="64d4" class="graf graf--p graf-after--figure">In this post, you will learn how to implement anonymous login in Ionic 4 apps using Firebase. We will also learn how to link an existing anonymous login with a new set of email password, so an anonymous user can convert into a normal user. We will implement these in a simple Ionic 4 app and test.</p><blockquote name="da96" 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-anonymous-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic-4-firebase-anonymous-login</a></blockquote><h3 name="18b3" 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;… you need to catch up with latest tech news. Firebase is the popular stuff in the market today. One can use Firebase to create quick mobile app back-ends, with a ton of built-in and ready-to-integrate features.</p><p name="17b0" class="graf graf--p graf-after--p is-selected">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.</p><h4 name="cc15" class="graf graf--h4 graf-after--p">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">Yes! anonymous login. Sounds strange right?</p><p name="618c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Anonymous login</strong> is a special type of login Firebase provides, where the user does not provide any login info from their end. Firebase creates a random ID and logs user in the app. If the user wants to convert to a regular user at a later point, Firebase provides a way to link the anonymous account to a normal credential as well.</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 login with Firebase. You can check out our Firebase social logins with <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"><strong class="markup--strong markup--p-strong">Facebook</strong></a> and <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"><strong class="markup--strong markup--p-strong">Twitter</strong></a> blogs on our <a href="http://enappd.com/blog"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">site</a>, along with free starters ( 👻 woohoo&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="a3b0" 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 anonymous login feature of Firebase. This is my break-down of the blog</p><p name="87e0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="c394" 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 anonymous login using AngularFire2</li><li name="3666" class="graf graf--li graf-after--li">Convert anonymous user to a regular user</li></ol><p name="cf69" class="graf graf--p graf-after--li">We have two major objectives</p><ol class="postList"><li name="3785" class="graf graf--li graf-after--p">Anonymously login a user</li><li name="6f72" class="graf graf--li graf-after--li">Link an anonymous user to an email/password account, so user can login with those credentials</li></ol><p name="08cb" class="graf graf--p graf-after--li">Since this is an example in Ionic 4, you can avoid Step 6, and complete your testing on the browser itself. <strong class="markup--strong markup--p-strong">Let’s dive right in!</strong></p><figure tabindex="0" contenteditable="false" name="2ab6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 322px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 67.10000000000001%;"></div><img class="graf-image" data-image-id="1*RvWiQig34Ff-E6vQXHJwzg.gif" data-width="480" data-height="322" src="https://cdn-images-1.medium.com/max/800/1*RvWiQig34Ff-E6vQXHJwzg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Woah&nbsp;! where did he dive in&nbsp;😛</figcaption></figure><h3 name="5996" 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="5a2e" class="graf graf--p graf-after--pre">With slight modifications, my app’s login page looks like this (fancy icon 🔥, huh)</p><figure tabindex="0" contenteditable="false" name="0a34" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 385px; max-height: 682px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.1%;"></div><img class="graf-image" data-image-id="1*mmAt-M62AZTFPYsCke_nhw.png" data-width="385" data-height="682" src="https://cdn-images-1.medium.com/max/800/1*mmAt-M62AZTFPYsCke_nhw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Login page</figcaption></figure><p name="667f" class="graf graf--p graf-after--figure">Simple and sweet, just two buttons</p><p name="6851" class="graf graf--p graf-after--p">This is what we’ll do</p><ul class="postList"><li name="d529" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">User logs in anonymously → go to Home Page</strong></li></ul><figure tabindex="0" contenteditable="false" name="39b6" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 384px; max-height: 677px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.29999999999998%;"></div><img class="graf-image" data-image-id="1*6pCUdAxr30zu0rMmAoxWdA.png" data-width="384" data-height="677" src="https://cdn-images-1.medium.com/max/800/1*6pCUdAxr30zu0rMmAoxWdA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Home Page</figcaption></figure><ul class="postList"><li name="54b5" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">User clicks “I want to Sign Up”</strong> to link his/her credentials with the anonymous account. Email and password fields are provided to the user. User signs up.</li></ul><figure tabindex="0" contenteditable="false" name="4831" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 385px; max-height: 679px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.4%;"></div><img class="graf-image" data-image-id="1*sc-1jcjXEzCm2IvbOTPopQ.png" data-width="385" data-height="679" src="https://cdn-images-1.medium.com/max/800/1*sc-1jcjXEzCm2IvbOTPopQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><ul class="postList"><li name="8ae9" class="graf graf--li graf-after--figure">User then logs out, and <strong class="markup--strong markup--li-strong">logs back in with the credentials</strong> he/she connected to the anonymous account</li></ul><figure tabindex="0" contenteditable="false" name="af33" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 386px; max-height: 678px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175.6%;"></div><img class="graf-image" data-image-id="1*8_CrAS2pp3ZtoSgZ_ztUMA.png" data-width="386" data-height="678" src="https://cdn-images-1.medium.com/max/800/1*8_CrAS2pp3ZtoSgZ_ztUMA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">User can log back in with credentials</figcaption></figure><p name="7655" class="graf graf--p graf-after--figure">We’ll see the code for this 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"    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 anonymous login, logout, linking credentials and signing in with normal credentials.</p><h3 name="af36" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Implement anonymous login</h3><p name="e6ef" class="graf graf--p graf-after--h3">In <code class="markup--code markup--p-code">login.page.ts</code> we’ll import angularFire2, and write a method to login anonymously. Our file will look like following</p><figure tabindex="0" contenteditable="false" name="dd4b" 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/e4a017225a520374b14bb70d2165cb5a.js %}</div></div></figure><p name="c5d5" class="graf graf--p graf-after--figure">When user clicks “Anonymously Login”, <strong class="markup--strong markup--p-strong">login</strong> function is called. It uses <code class="markup--code markup--p-code">auth.signInAnonymously()</code> method of AngularFire2 auth module. This signs in the user anonymously.</p><p name="bb83" class="graf graf--p graf-after--p">Your user is now logged in, but still anonymous. User can browse features of your app and take a call on becoming a regular user. <strong class="markup--strong markup--p-strong">First objective is achieved 😎</strong> So easy, right?</p><h3 name="cfcd" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Convert anonymous user to a regular&nbsp;user</h3><p name="eb14" class="graf graf--p graf-after--h3">In Homepage, we will provide the user an option to convert to a regular user. User can enter email/password details and signup as a regular user. This will connect all the data of the anonymous profile with the new credentials of the user. So you don’t lose the data and easily convert the user to a regular user.</p><p name="1c03" class="graf graf--p graf-after--p">Following is the function for converting anonymous user to regular user</p><figure tabindex="0" contenteditable="false" name="7473" 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/899ecf5f85683c0376cafd548470e303.js %}</div></div></figure><p name="9a27" class="graf graf--p graf-after--figure">The email and password above are entered by the user. If the response goes to success, your user is successfully linked to the new credentials! Let’s test that by logging out.</p><p name="7799" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Logout</strong></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><p name="a0d4" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Test normal login</strong></p><p name="c757" class="graf graf--p graf-after--p">Go to login page, and allow the user to enter email and password for login. The following function can be used to login a user with already existing credentials</p><figure tabindex="0" contenteditable="false" name="a0a9" 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/b89e97aef919b7fd43b14b1e5db39c2b.js %}</div></div></figure><p name="f4ab" class="graf graf--p graf-after--figure">You’ll see that the user is logged in with the linked credentials. Although we don’t have any data associated with the anonymous user to show the linking, but if your app does, the user signed in with Email/password will stay connected to that data as well.</p><p name="9a8b" class="graf graf--p graf-after--p">Overall, the process will look something like this</p><figure tabindex="0" contenteditable="false" name="9804" 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*I6cDxJWI7Qf5JQ-kMJRObg.gif" data-width="350" data-height="614" src="https://cdn-images-1.medium.com/max/800/1*I6cDxJWI7Qf5JQ-kMJRObg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Anonymous login and linking user credentials in&nbsp;Firebase</figcaption></figure><h3 name="7a48" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="7b07" class="graf graf--p graf-after--h3">In this blog, we learned how to implement anonymous login in Ionic 4 using Firebase. We also learned how we can connect an anonymous user to a new user with Email/password account. This way you can allow a user to anonymously login to the app, browse the features, and then signup if he/she likes, without losing the anonymous account data!</p><blockquote name="d788" 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-anonymous-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Ionic-4-firebase-anonymous-login</a></blockquote><h3 name="84b4" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Firebase anonymous login in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><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="b1fc" 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="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><li name="de81" 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></ul><p name="2930" 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 nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></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="4510" 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>