Facebook login in Ionic 5 Cordova apps using Firebase
Tags: angular, cordova, ionic, facebook
Published: 2020-08-16 11:29:49

<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_8" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…"><section name="d88b" 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="78a4" class="graf graf--p graf-after--figure">In this post, you will learn how to implement Facebook authentication in Ionic 5 apps using Firebase 🔥.</p><p name="4e23" class="graf graf--p graf-after--p">We’ll cook a sample app 👨&zwj;🍳&nbsp;, where users can login using their Facebook account. After login, users can see their basic profile information on the home page, and sessions are saved in Firebase. On repeat app start, users can auto-login using Firebase session.</p><h3 name="fe31" class="graf graf--h3 graf-after--p">Social logins&#8202;—&#8202;What and&nbsp;why</h3><p name="3e89" class="graf graf--p graf-after--h3">It’s helpful to use social sign-in with Ionic for your users who would rather not create and remember another username/password combination. Instead, you can allow users to sign in with accounts they already own. You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. The user’s chosen provider will handle all of this for you. Plus, in mobile apps, the Facebook login is automatically done with the pre-installed Facebook app.</p><h3 name="d8d3" class="graf graf--h3 graf-after--p">Facebook login&#8202;—&#8202;What and&nbsp;why</h3><p name="fc42" class="graf graf--p graf-after--h3">There are several reasons why you should use a Facebook login in your app</p><ul class="postList"><li name="9568" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Ease of use</strong>&#8202;—&#8202;When a new user uses your app, only two buttons clicks are required to login using Facebook. In other scenario, user will have to type in an email/password and login.</li><li name="520e" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">No “forgot password”&#8202;</strong>—&#8202;When your app uses Facebook login, the user does not have to worry about forgetting password for your app’s login.</li><li name="8faa" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">No “verify email”</strong>&#8202;—&#8202;If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Facebook login will always have a valid email/phone number associated.</li><li name="e7e2" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Single solution&#8202;—&#8202;</strong>Facebook login can allow your users to use single login credentials across multiple devices.</li><li name="b5c9" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Facebook integration</strong>&#8202;—&#8202;If your app uses Facebook authentication, you can use Facebook APIs inside your app as well. This can include fetching user tweets etc.</li><li name="2202" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Trust</strong>&#8202;—&#8202;Nowadays, people generally trust social logins moreover custom email logins. Social logins follow standard privacy protocols and hence are more reliable for information sharing.</li></ul><h3 name="a26a" class="graf graf--h3 graf-after--li">Ionic Authentication</h3><p name="a51d" class="graf graf--p graf-after--h3">The ionic framework has been around for around 5 years and has been very popular among developers for its ease of usage over Swift / Java. Also in Ionic 5, you get to keep a single source code for both Android and iOS app.</p><p name="046b" class="graf graf--p graf-after--p">What more can a developer ask for!</p><p name="1024" class="graf graf--p graf-after--p">Ionic 5 is the latest version (at the time of writing this post) of Ionic and is much more reliable and robust than previous versions.</p><p name="f1f3" class="graf graf--p graf-after--p">There are several ways of Authentication in Ionic 5 apps</p><ul class="postList"><li name="b093" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Social logins&#8202;</strong>—&#8202;Social logins are a popular and easy way of authentication in mobile apps. You must have seen Google, Facebook, Instagram logins in almost all the modern apps. Social logins are easy to use and more reliable for quick integrations.</li><li name="bfb9" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Create your own back-end</strong>&#8202;—&#8202;You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over user authentication. But this method is the most time taking one as well.</li><li name="925f" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Back-end as a Service (BaaS)&#8202;—&#8202;</strong>You<strong class="markup--strong markup--li-strong"> </strong>can use pre-built BaaS platforms which allows easy integration of authentication in your apps. Basically, these platforms provide you with a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, <em class="markup--em markup--li-em">Back4App</em> are some BaaS platforms.</li><li name="2fea" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">Firebase</em></strong> is the most popular among these for mobile apps, which we’ll study in the next section.</li></ul><h3 name="3cc4" class="graf graf--h3 graf-after--li">Firebase</h3><p name="39f9" class="graf graf--p graf-after--h3">Firebase is a Backend-as-a-Service (BaaS) platform. It started as a <a href="http://blog.ycombinator.com/firebase-yc-s11-raises-5-dollars-dot-6m-series-a-from-union-square-ventures-and-flybridge"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener"    target="_blank">YC11 startup</a> and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and a variety of functionalities available on it.</p><p name="ccdf" class="graf graf--p graf-after--p">A lot of quick integrations are available with Firebase. Some of these are listed below:</p><ul class="postList"><li name="9892" class="graf graf--li graf-after--p">Real-time database</li><li name="d39d" class="graf graf--li graf-after--li">Email Authentication</li><li name="f5a2" class="graf graf--li graf-after--li">Social logins</li><li name="69f9" class="graf graf--li graf-after--li">In-app messages</li><li name="12b8" class="graf graf--li graf-after--li">Push notifications</li><li name="44ed" class="graf graf--li graf-after--li">Analytics</li><li name="b1ba" class="graf graf--li graf-after--li">Crashlytics</li><li name="956a" class="graf graf--li graf-after--li">Remote config</li></ul><p name="e159" class="graf graf--p graf-after--li">Firebase is quickly growing to become the most popular mobile app back-end platform.</p><h4 name="a38d" class="graf graf--h4 graf-after--p">Firebase Authentication Options</h4><p name="646b" class="graf graf--p graf-after--h4">Firebase not only provides ready-made email authentication but also provides authentication using a variety of social logins. You can see the authentication options available with Firebase.</p><figure tabindex="0" contenteditable="false" name="6d8d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 329px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 47%;"></div><img class="graf-image" data-image-id="1*T0ahVQ8vWbQOd-Eg6-HEbw.jpeg" data-width="1377" data-height="647" src="https://cdn-images-1.medium.com/max/800/1*T0ahVQ8vWbQOd-Eg6-HEbw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Authentication options available in&nbsp;Firebase</figcaption></figure><p name="aac3" class="graf graf--p graf-after--figure">We will use Firebase to store user profile information once the Facebook login is done. This is the preferred method, as it is reliable for both apps and PWA.</p><h3 name="7389" class="graf graf--h3 graf-after--p">Steps for Facebook authentication</h3><p name="d58e" class="graf graf--p graf-after--h3">We will follow these step-by-step instructions to create our Ionic 5 app with Facebook authentication</p><p name="6529" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1</strong>: Setting up a latest Ionic CLI</p><p name="8a2e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2</strong>: Creating an Ionic 5 app</p><p name="cfb1" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3</strong>: Facebook Developer Console&#8202;—&#8202;Create your app</p><p name="5c1f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4</strong>: Add your Platforms to Facebook</p><p name="f920" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">&zwnj;Step 5</strong>: Enable Facebook Sign-In in Firebase project</p><p name="3da7" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">&zwnj;Step 6</strong>: Install the Cordova Facebook Plugin to connect your app with Firebase</p><p name="a3ef" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 7</strong>: Authenticate Users using Facebook</p><p name="882e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 8</strong>: Store the Facebook auth tokens in Firebase</p><p name="772b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 9</strong>: Use Firebase to auto-login the user</p><p name="4f1b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 10</strong>: Test your app for Android</p><h3 name="a5cf" class="graf graf--h3 graf-after--p">Step 1: Setting up a latest Ionic&nbsp;CLI</h3><p name="9923" class="graf graf--p graf-after--h3">Make sure the latest version of the Ionic CLI is installed. Get the installed version by running <code class="markup--code markup--p-code">ionic --version</code></p><p name="4c04" class="graf graf--p graf-after--p">My node version for this post is <strong class="markup--strong markup--p-strong">12.13.1</strong>. See <a href="https://ionicframework.com/docs/intro/environment#node-npm"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Node &amp; npm</a> environment setup.</p><p name="3510" class="graf graf--p graf-after--p">(At the time of writing the blog, my node version is 12.13.1)</p><p name="1454" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step1.1</strong>: Installation</p><p name="b55a" class="graf graf--p graf-after--p">The Ionic CLI can be installed globally with npm:</p><pre name="3513" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ npm install -g @ionic/cli</code></pre><p name="d2af" class="graf graf--p graf-after--pre">And you are good to go. Check your environment information using</p><pre name="e639" class="graf graf--pre graf-after--p">$ ionic info</pre><p name="16bc" class="graf graf--p graf-after--pre">This will display your runtime environment, something like following (Android SDK tools and XCode will require separate installations)</p><figure tabindex="0" contenteditable="false" name="89ef" class="graf graf--figure graf-after--p"><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*xpZrOslOU6qS_-woOaHMSg.jpeg" data-width="1023" data-height="552" src="https://cdn-images-1.medium.com/max/800/1*xpZrOslOU6qS_-woOaHMSg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Development environment information</figcaption></figure><h3 name="feb3" class="graf graf--h3 graf-after--figure">Step 2: Creating an Ionic 5&nbsp;app</h3><p name="69a5" class="graf graf--p graf-after--h3">For the purposes of this post we’ll create an app using the below command:</p><pre name="673d" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ ionic start facebook-login sidemenu</code></pre><p name="5726" class="graf graf--p graf-after--pre">For now, we only need to know that this command creates a sidemnu layout app with the following structure.</p><figure tabindex="0" contenteditable="false" name="f856" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 384px; max-height: 683px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.89999999999998%;"></div><img class="graf-image" data-image-id="1*dRHARQ6gy3JLzFVA6hzgJg.jpeg" data-width="384" data-height="683" src="https://cdn-images-1.medium.com/max/800/1*dRHARQ6gy3JLzFVA6hzgJg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Folder structure</figcaption></figure><h3 name="70bb" class="graf graf--h3 graf-after--figure">Step 3: Facebook Developer Console</h3><p name="4c6a" class="graf graf--p graf-after--h3">The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our Ionic application.</p><p name="fd92" class="graf graf--p graf-after--p">For that, you’ll need to go to <a href="https://developers.facebook.com/apps"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">F</strong></a><a href="https://developers.facebook.com/apps"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank"><strong class="markup--strong markup--p-strong">acebook developer console</strong></a> and create a new app.</p><figure tabindex="0" contenteditable="false" name="3fe4" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 620px; max-height: 425px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 68.5%;"></div><img class="graf-image" data-image-id="1*xhUabRpSLLGxauvD5JCkuw.jpeg" data-width="620" data-height="425" src="https://cdn-images-1.medium.com/max/800/1*xhUabRpSLLGxauvD5JCkuw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Select the type of Application Facebook Developer console</figcaption></figure><figure tabindex="0" contenteditable="false" name="2eea" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 667px; max-height: 590px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 88.5%;"></div><img class="graf-image" data-image-id="1*KB2yU0H7wuv12iyV8DhBYg.jpeg" data-width="667" data-height="590" src="https://cdn-images-1.medium.com/max/800/1*KB2yU0H7wuv12iyV8DhBYg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create new app in Facebook Developer console</figcaption></figure><p name="7e25" class="graf graf--p graf-after--figure">Once we finish creating our app, we will go to Facebook app dashboard and pick <strong class="markup--strong markup--p-strong">App Id</strong> from there. It will be required in installing Facebook plugin in the app.</p><figure tabindex="0" contenteditable="false" name="769b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 331px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 47.3%;"></div><img class="graf-image" data-image-id="1*pH3KFkmz3hMjD_josuUHuQ.jpeg" data-width="974" data-height="461" src="https://cdn-images-1.medium.com/max/800/1*pH3KFkmz3hMjD_josuUHuQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Facebook Developer Console&#8202;—&#8202;App ID on&nbsp;top-left</figcaption></figure><h3 name="f285" class="graf graf--h3 graf-after--figure">Step 4: Add your Platforms to&nbsp;Facebook</h3><p name="55ae" class="graf graf--p graf-after--h3">We need to let Facebook know which platforms we’ll be using (<em class="markup--em markup--p-em">if it’s just web, iOS, or Android</em>).</p><p name="7ec6" class="graf graf--p graf-after--p">&zwnj;In our case, we will add all platforms iOS and Android.</p><p name="cb65" class="graf graf--p graf-after--p">To add the platforms, go ahead inside your Facebook dashboard and click on <strong class="markup--strong markup--p-strong">Settings</strong>, then right below the app’s information you’ll see a button that says <strong class="markup--strong markup--p-strong">Add Platform</strong>, click it.</p><p name="dbb0" class="graf graf--p graf-after--p">You’ll see several options for the platforms you’re creating</p><figure tabindex="0" contenteditable="false" name="017f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 449px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.2%;"></div><img class="graf-image" data-image-id="1*mFcr7IhywkC5djSkRs--nw.jpeg" data-width="704" data-height="452" src="https://cdn-images-1.medium.com/max/800/1*mFcr7IhywkC5djSkRs--nw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Options to create platforms</figcaption></figure><h4 name="cbdb" class="graf graf--h4 graf-after--figure">Add Platforms in Facebook dashboard</h4><p name="46e8" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Let’s start with iOS:-</strong> You’ll see a form asking you for some information, right now we just need the <code class="markup--code markup--p-code">Bundle ID</code>.</p><figure tabindex="0" contenteditable="false" name="6c64" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 355px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.7%;"></div><img class="graf-image" data-image-id="1*yuwwCAhHl-Sz8zgk4MTZ1w.jpeg" data-width="981" data-height="497" src="https://cdn-images-1.medium.com/max/800/1*yuwwCAhHl-Sz8zgk4MTZ1w.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create an iOS app in Facebook&nbsp;console</figcaption></figure><p name="0099" class="graf graf--p graf-after--figure">If you don’t know where to get the Bundle ID, it’s the same as the package name when you create an Ionic app, it’s inside your <code class="markup--code markup--p-code">config.xml</code> file:</p><pre name="29e5" class="graf graf--pre graf-after--p">&lt;widget id="io.ionic.sociallogin" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"&gt;</pre><p name="5d42" class="graf graf--p graf-after--pre">Once you add the Bundle ID, just follow the process to create the app.</p><p name="b7f0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Android:-</strong> The difference is that instead of <code class="markup--code markup--p-code">Bundle ID</code>, Android calls it “<strong class="markup--strong markup--p-strong">Google Play Package Name</strong>”.</p><figure tabindex="0" contenteditable="false" name="19c9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 341px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.8%;"></div><img class="graf-image" data-image-id="1*w_cOaOKvkRdbVHnEFrfmyw.jpeg" data-width="982" data-height="479" src="https://cdn-images-1.medium.com/max/800/1*w_cOaOKvkRdbVHnEFrfmyw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create an Android app in Facebook&nbsp;console</figcaption></figure><h3 name="3897" class="graf graf--h3 graf-after--figure">Step 5: Enable Facebook Login in Firebase.</h3><p name="8f1f" class="graf graf--p graf-after--h3">Now that everything is set up on Facebook’s side, we need to go into our Firebase console and enable Facebook authentication for our app.</p><p name="fdae" class="graf graf--p graf-after--p">&zwnj;To enable Facebook, you’ll need to go to <a href="https://console.firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">your Firebase Console</a> and locate the app you’re using (or create a new Firebase project)</p><p name="a03d" class="graf graf--p graf-after--p">&zwnj;Once you’re inside the app’s dashboard, you’re going to go into <strong class="markup--strong markup--p-strong">Authentication &gt; Sign-In Method &gt; Facebook</strong> and are going to click the <strong class="markup--strong markup--p-strong">Enable</strong> toggle.</p><p name="88f1" class="graf graf--p graf-after--p">It will ask you App ID and App secret. Copy it from your Facebook console, under your app’s settings.</p><h3 name="9a31" class="graf graf--h3 graf-after--p">Step 6: Install the Facebook Cordova&nbsp;Plugin</h3><p name="ac34" class="graf graf--p graf-after--h3">Open your terminal and type</p><pre name="7c1a" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="FACEBOOK_APP_ID" --variable APP_NAME="myApplication"</pre><p name="6730" class="graf graf--p graf-after--pre">You’ll need to replace the values or <code class="markup--code markup--p-code">FACEBOOK_APP_ID</code> and <code class="markup--code markup--p-code">APP_NAME</code> with your real credentials. You can find both of these inside your Facebook Developers Dashboard.</p><p name="ed7a" class="graf graf--p graf-after--p">You’ll see a warning from Ionic saying they prefer Capacitor over Cordova now. But that is ok, you can proceed with Cordova itself. <strong class="markup--strong markup--p-strong">If you want to implement Facebook login with Capacitor, </strong><a href="https://enappd.com/blog/facebook-login-in-capacitor-apps-with-ionic-angular/128"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">check my other blog</strong></a><strong class="markup--strong markup--p-strong">.</strong></p><figure tabindex="0" contenteditable="false" name="8b3e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 42.1%;"></div><img class="graf-image" data-image-id="1*tYhKlsT8b4MBMP0AU4jrrQ.jpeg" data-width="878" data-height="370" src="https://cdn-images-1.medium.com/max/800/1*tYhKlsT8b4MBMP0AU4jrrQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Process to install Facebook&nbsp;Plugin</figcaption></figure><p name="4dd5" class="graf graf--p graf-after--figure">Open your terminal and run this command&zwnj; to install Facebook package from Ionic Native.</p><pre name="798e" class="graf graf--pre graf-after--p">$ npm install --save @ionic-native/facebook</pre><p name="cf9a" class="graf graf--p graf-after--pre">Also, we need to install <a href="https://github.com/angular/angularfire2"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener noopener"    target="_blank">AngularFire2 npm module</a> and <a href="https://www.npmjs.com/package/firebase"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a>, which actually connects the Firebase functionality to Ionic app. To install the module, run</p><pre name="b7bb" class="graf graf--pre graf-after--p">$ npm install firebase @angular/fire --save</pre><p name="9ad7" class="graf graf--p graf-after--pre">Also, include <code class="markup--code markup--p-code">environment</code>&nbsp;,<code class="markup--code markup--p-code">AngularFireModule</code> and <code class="markup--code markup--p-code">AngularFireAuthModule</code>in <code class="markup--code markup--p-code">app.module.ts</code></p><figure tabindex="0" contenteditable="false" name="c316" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 113.857%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/135476c9c39ac1857f48512fd3ba3798 %}</div></div></figure><p name="b707" class="graf graf--p graf-after--figure">Notice that Firebase is initialized in your app with</p><pre name="7dba" class="graf graf--pre graf-after--p">AngularFireModule.initializeApp(environment.firebaseConfig)</pre><p name="c36b" class="graf graf--p graf-after--pre">where <code class="markup--code markup--p-code">environment.config</code> is the Firebase config you picked from Firebase project.</p><blockquote name="be79" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Details of this step can be found in our blog </em><a href="https://enappd.com/blog/connect-firebase-with-ionic-5-app/134/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">How to connect Firebase with Ionic 5 App</a></blockquote><p name="7d8b" class="graf graf--p graf-after--blockquote">To connect your app to Firebase, you first need a Firebase project. From the project, pick up your Firebase config parameters and include them in an <code class="markup--code markup--p-code">environment.ts</code> file at the root of your Ionic project. The environment file will look like following.</p><figure tabindex="0" contenteditable="false" name="b4a5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 406px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.99999999999999%;"></div><img class="graf-image" data-image-id="1*-CySwP5vyY5P6HxWZqQ2gw.jpeg" data-width="876" data-height="508" src="https://cdn-images-1.medium.com/max/800/1*-CySwP5vyY5P6HxWZqQ2gw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase config params in environment file</figcaption></figure><p name="6c10" class="graf graf--p graf-after--figure">You can create two different environment files for development and production environments&#8202;—&#8202;<code class="markup--code markup--p-code">environment.ts</code> and <code class="markup--code markup--p-code">environment.prod.ts</code></p><h3 name="843b" class="graf graf--h3 graf-after--p">Step 7: Authenticate Users.</h3><p name="c2e8" class="graf graf--p graf-after--h3">The first thing we need to do is to get the authorization token from Facebook. To do that, we need to import Facebook plugin from Ionic Native and ask our user to log in. The import and login functions will be as follows:</p><figure tabindex="0" contenteditable="false" name="c6bb" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 164.143%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/925cd54beb764404124be1c96a3a45d0 %}</div></div></figure><figure tabindex="0" contenteditable="false" name="221c" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 229px; max-height: 400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 174.70000000000002%;"></div><img class="graf-image" data-image-id="1*Q1DYDU6etSgS3PdcGr3_oQ.png" data-width="229" data-height="400" src="https://cdn-images-1.medium.com/max/800/1*Q1DYDU6etSgS3PdcGr3_oQ.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="a21f" class="graf graf--p graf-after--figure">This function will give you Facebook Token and from this token, we will login user to Firebase app.</p><h3 name="a2fb" class="graf graf--h3 graf-after--p">Step 8— Store the Facebook auth token in&nbsp;Firebase</h3><p name="7a16" class="graf graf--p graf-after--h3">In the previous step, the authentication is done via a Facebook app on your phone. Once logged in, you will receive a <code class="markup--code markup--p-code">token</code> response. This info will be used to connect to Firebase in the <code class="markup--code markup--p-code">success</code> of Facebook login.</p><figure tabindex="0" contenteditable="false" name="42c4" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 32.143%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/fd1e225555762f54b3a8f383c95f7850 %}</div></div></figure><p name="3a72" class="graf graf--p graf-after--figure">So, in short, we have logged in via Facebook and created a Firebase user using the Facebook auth token. From now on, Firebase can handle your login/logout in the app. After we store the token in Firebase, we navigate to a <strong class="markup--strong markup--p-strong">Profile</strong> page.</p><h4 name="ea73" class="graf graf--h4 graf-after--p">Get user profile&nbsp;info</h4><p name="a16f" class="graf graf--p graf-after--h4">In the <strong class="markup--strong markup--p-strong">Profile</strong> page, we will get the profile information of the user using the Firebase Auth Module again.</p><figure tabindex="0" contenteditable="false" name="d859" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 145.286%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/938c21c44496228dce340d22ae1382b5 %}</div></div></figure><figure tabindex="0" contenteditable="false" name="a215" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 229px; max-height: 400px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 174.70000000000002%;"></div><img class="graf-image" data-image-id="1*BtLU99PhmI-pIO1YT_O5Cg.png" data-width="229" data-height="400" src="https://cdn-images-1.medium.com/max/800/1*BtLU99PhmI-pIO1YT_O5Cg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">User Profile&nbsp;Page</figcaption></figure><blockquote name="b1b2" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">Note</strong>:- If you want profile image with better resolution you can check <a href="https://developers.facebook.com/docs/graph-api/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Facebook graph API</a></blockquote><h4 name="7215" class="graf graf--h4 graf-after--blockquote">Logout function</h4><p name="c110" class="graf graf--p graf-after--h4">Since Firebase is now handling the login/logout, the logout function in <code class="markup--code markup--p-code">profile.page.ts</code> the logout code will look like following.</p><figure tabindex="0" contenteditable="false" name="4e22" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 22.714%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/0d76fa9fba7758d3a943ca704799b030 %}</div></div></figure><h3 name="2779" class="graf graf--h3 graf-after--figure">Step 9— Use Firebase to auto-login the&nbsp;user</h3><p name="9353" class="graf graf--p graf-after--h3">At this point, we have covered the following points</p><ul class="postList"><li name="5dad" class="graf graf--li graf-after--p">Login with Cordova Facebook plugin</li><li name="a9c6" class="graf graf--li graf-after--li">Pass Facebook auth token to Firebase</li><li name="c75c" class="graf graf--li graf-after--li">Fetch user profile info via the Facebook plugin</li><li name="c060" class="graf graf--li graf-after--li">Logout using Firebase</li></ul><p name="e59d" class="graf graf--p graf-after--li">Now, if the user does not logout and leaves the app, we want the app to auto-login the next time user starts the app. For this, we will use Firebase’s <code class="markup--code markup--p-code">onAuthStateChanged</code> function at the start of the app. If there is a valid user logged in, it will return the user’s information. Our <code class="markup--code markup--p-code">app.component.ts</code> the file will look like following</p><figure tabindex="0" contenteditable="false" name="06cd" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 264.714%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/4e15e8982ad7cc61c77a7eb7bbd5afaf %}</div></div></figure><h3 name="e42d" class="graf graf--h3 graf-after--figure">Step 10: Test your app on&nbsp;Android</h3><p name="718d" class="graf graf--p graf-after--h3">To test this app you’ll need to run in a real device. You can do it generating an APK using the command <code class="markup--code markup--p-code">ionic cordova run android</code>&nbsp;. Here we’ll use the first method.</p><p name="8190" class="graf graf--p graf-after--p">So, run the below commando to generate your APK.</p><pre name="3277" class="graf graf--pre graf-after--p">$ ionic cordova build android</pre><figure tabindex="0" contenteditable="false" name="c6e1" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 400px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 175%;"></div><img class="graf-image" data-image-id="1*rCWKqDD0IoGuhEUc7aG6gw.gif" data-width="400" data-height="700" src="https://cdn-images-1.medium.com/max/800/1*rCWKqDD0IoGuhEUc7aG6gw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Gif Demo</figcaption></figure><blockquote name="7a79" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">Note: If your app still in Development Mode then it throws an error like below image.</strong></blockquote><figure tabindex="0" contenteditable="false" name="32bd" class="graf graf--figure graf-after--blockquote"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 594px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 84.8%;"></div><img class="graf-image" data-image-id="1*8YR4jJjBLgWHllui4OVBxg.jpeg" data-width="744" data-height="631" src="https://cdn-images-1.medium.com/max/800/1*8YR4jJjBLgWHllui4OVBxg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Developer Mode ON&nbsp;error</figcaption></figure><p name="4068" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Follow these steps to make it live:</strong></p><ul class="postList"><li name="e1ce" class="graf graf--li graf-after--p">Login to Facebook developer account <a href="https://developers.facebook.com/"  class="markup--anchor markup--li-anchor" rel="nofollow noreferrer noopener" target="_blank">https://developers.facebook.com/</a></li><li name="da93" class="graf graf--li graf-after--li">Goto you app dashboard</li><li name="ae78" class="graf graf--li graf-after--li">Switch on to change status live (before that you just need to fill privacy policy URL and etc. in basic setting).</li></ul><figure tabindex="0" contenteditable="false" name="641d" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 82px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 11.600000000000001%;"></div><img class="graf-image" data-image-id="1*Apj897GvooDlgkzzTzklGA.jpeg" data-width="1374" data-height="160" src="https://cdn-images-1.medium.com/max/800/1*Apj897GvooDlgkzzTzklGA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable Live&nbsp;Mode</figcaption></figure><h3 name="6dfd" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="adcf" class="graf graf--p graf-after--h3 graf--trailing">In this post, you learnt how to implement Facebook login in your Ionic 5 app. You also learnt how to auto-login your user using info stored in Firebase. The Firebase integration done for Authentication, can be used for various purposes like Database CRUD operations, push notifications, analytics etc.</p></div></div></section>
<section name="aecd" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="01a8" class="graf graf--h3 graf--leading">Next Steps</h3><p name="01b7" class="graf graf--p graf-after--h3">If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section</p><ul class="postList"><li name="1a12" class="graf graf--li graf-after--p">Ionic Payment Gateways&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa%2F17" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa%2F17" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa%2F17" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Stripe</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-paypal-payment-integration-for-apps-and-pwa%2F16" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-paypal-payment-integration-for-apps-and-pwa%2F16" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-paypal-payment-integration-for-apps-and-pwa%2F16" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">PayPal</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-apple-pay-in-ionic-4-apps%2F21" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-apple-pay-in-ionic-4-apps%2F21" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-apple-pay-in-ionic-4-apps%2F21" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Apple Pay</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-razorpay-in-ionic-4-apps-and-pwa%2F20" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-razorpay-in-ionic-4-apps-and-pwa%2F20" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-razorpay-in-ionic-4-apps-and-pwa%2F20" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">RazorPay</a></li><li name="9210" class="graf graf--li graf-after--li">Ionic Charts with&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-charts-using-google-charts%2F66" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-charts-using-google-charts%2F66" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-charts-using-google-charts%2F66" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Google Charts </a>| <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-charts-in-ionic-4-apps-and-pwa-part-3%2F60" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-charts-in-ionic-4-apps-and-pwa-part-3%2F60" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-charts-in-ionic-4-apps-and-pwa-part-3%2F60" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">HighCharts</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-charts-in-ionic-4-apps-and-pwa-part-2%2F54" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-charts-in-ionic-4-apps-and-pwa-part-2%2F54" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-charts-in-ionic-4-apps-and-pwa-part-2%2F54" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">d3.js</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fcharts-in-ionic-4-apps-and-pwa-part-1%2F52" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fcharts-in-ionic-4-apps-and-pwa-part-1%2F52" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fcharts-in-ionic-4-apps-and-pwa-part-1%2F52" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Chart.js</a></li><li name="e50b" class="graf graf--li graf-after--li">Ionic Social Logins&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffacebook-login-in-ionic-4-apps-using-firebase%2F25" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffacebook-login-in-ionic-4-apps-using-firebase%2F25" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffacebook-login-in-ionic-4-apps-using-firebase%2F25" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Facebook</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fgoogle-login-in-ionic-4-apps-using-firebase%2F39" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fgoogle-login-in-ionic-4-apps-using-firebase%2F39" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fgoogle-login-in-ionic-4-apps-using-firebase%2F39" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Google</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ftwitter-login-in-ionic-4-apps-using-firebase%2F24" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ftwitter-login-in-ionic-4-apps-using-firebase%2F24" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ftwitter-login-in-ionic-4-apps-using-firebase%2F24" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Twitter</a></li><li name="ce2c" class="graf graf--li graf-after--li">Ionic Authentications&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Femail-authentication-with-firebase-in-ionic-4%2F38" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Femail-authentication-with-firebase-in-ionic-4%2F38" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Femail-authentication-with-firebase-in-ionic-4%2F38" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Via Email</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-anonymous-login-in-ionic-4%2F37" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-anonymous-login-in-ionic-4%2F37" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-anonymous-login-in-ionic-4%2F37" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Anonymous</a></li><li name="7bd1" class="graf graf--li graf-after--li">Ionic Features&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fusing-geolocation-geocoding-and-reverse-geocoding-in-ionic-4%2F45" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fusing-geolocation-geocoding-and-reverse-geocoding-in-ionic-4%2F45" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fusing-geolocation-geocoding-and-reverse-geocoding-in-ionic-4%2F45" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Geolocation</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fqr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4%2F9" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fqr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4%2F9" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fqr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4%2F9" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">QR Code reader </a>| <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fbest-fitness-plugins-for-ionic-4-how-to-use-pedometer%2F15" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fbest-fitness-plugins-for-ionic-4-how-to-use-pedometer%2F15" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fbest-fitness-plugins-for-ionic-4-how-to-use-pedometer%2F15" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Pedometer</a>| <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-signature-pad-in-ionic-apps%2F145%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-signature-pad-in-ionic-apps%2F145%2F" class="markup--anchor markup--li-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-signature-pad-in-ionic-apps%2F145%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Signature Pad</a></li><li name="bba3" class="graf graf--li graf-after--li">Media in Ionic&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fspotify-like-music-in-ionic-4-apps%2F48" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fspotify-like-music-in-ionic-4-apps%2F48" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fspotify-like-music-in-ionic-4-apps%2F48" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Audio</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-video-player-in-ionic-4-app%2F64" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-video-player-in-ionic-4-app%2F64" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fadding-video-player-in-ionic-4-app%2F64" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Video</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimage-picker-in-ionic-4-app%2F67" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimage-picker-in-ionic-4-app%2F67" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimage-picker-in-ionic-4-app%2F67" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Image Picker</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-add-image-cropper-in-ionic-4-app%2F68" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-add-image-cropper-in-ionic-4-app%2F68" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-add-image-cropper-in-ionic-4-app%2F68" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Image Cropper</a></li><li name="ca53" class="graf graf--li graf-after--li">Ionic Essentials&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-save-and-retrieve-data-locally-on-device%2F59" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-save-and-retrieve-data-locally-on-device%2F59" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fionic-4-save-and-retrieve-data-locally-on-device%2F59" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Native Storage</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-translate-in-ionic-4-globalization-internationalization-and-localization%2F11" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-translate-in-ionic-4-globalization-internationalization-and-localization%2F11" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-translate-in-ionic-4-globalization-internationalization-and-localization%2F11" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Translations</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Frtl-right-to-left-use-in-ionic-4%2F50" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Frtl-right-to-left-use-in-ionic-4%2F50" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Frtl-right-to-left-use-in-ionic-4%2F50" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">RTL</a></li><li name="b3a4" class="graf graf--li graf-after--li">Ionic messaging&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-ionic-4-firebase-push%2F34" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-ionic-4-firebase-push%2F34" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fimplement-ionic-4-firebase-push%2F34" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Firebase Push</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fautomatically-read-sms-in-ionic-4-apps%2F42" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fautomatically-read-sms-in-ionic-4-apps%2F42" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fautomatically-read-sms-in-ionic-4-apps%2F42" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Reading SMS</a></li><li name="1cc4" class="graf graf--li graf-after--li graf--trailing">Ionic with Firebase&#8202;—&#8202;<a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-firebase-in-ionic-4-apps%2F23" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-firebase-in-ionic-4-apps%2F23" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Fhow-to-integrate-firebase-in-ionic-4-apps%2F23" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Basics</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-with-ionic-4-hosting-auth-and-db-connection%2F58" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-with-ionic-4-hosting-auth-and-db-connection%2F58" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-with-ionic-4-hosting-auth-and-db-connection%2F58" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Hosting and DB</a> | <a href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-cloud-functions-in-ionic-4-complete-guide%2F32" data-href="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-cloud-functions-in-ionic-4-complete-guide%2F32" class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fenappd.com%2Fblog%2Ffirebase-cloud-functions-in-ionic-4-complete-guide%2F32" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Cloud functions</a></li></ul></div></div></section>
<section name="5071" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="ad14" class="graf graf--h3 graf--leading is-selected">Ionic React Full App with Capacitor</h3><p name="4fa5" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using <a href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-react-full-app-capacitor%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-react-full-app-capacitor%2F" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-react-full-app-capacitor%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Ionic 5 React Full App in Capacitor</a></p><figure tabindex="0" contenteditable="false" name="0d2d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 441px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="1*G3yOFVX4oABx9MhUy-3kng.png" data-width="760" data-height="479" alt="Ionic 5 React Full App in Capacitor from Enappd" src="https://cdn-images-1.medium.com/max/800/1*G3yOFVX4oABx9MhUy-3kng.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 React Full App in Capacitor from&nbsp;Enappd</figcaption></figure><h3 name="30ba" class="graf graf--h3 graf-after--figure">Ionic Capacitor Full App (Angular)</h3><p name="9a60" class="graf graf--p graf-after--h3">If you need a base to start your next Angular <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fcapacitor-full-app-with-ionic-angular%2F" data-href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fcapacitor-full-app-with-ionic-angular%2F" class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fcapacitor-full-app-with-ionic-angular%2F" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="c219" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="0*UwSHcofTMStMnzAX.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*UwSHcofTMStMnzAX.png"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h3 name="2f1c" class="graf graf--h3 graf-after--figure">Ionic Full App (Angular and&nbsp;Cordova)</h3><p name="1008" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 app, you can make your next awesome app using <a href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-full-app" data-href="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-full-app" class="markup--anchor markup--p-anchor" rel="noopener" data-tooltip="https://medium.com/r/?url=https%3A%2F%2Fstore.enappd.com%2Fproduct%2Fionic-full-app" data-tooltip-position="bottom" data-tooltip-type="link" target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" alt="Ionic Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Full App in Cordova, with huge number of layouts and&nbsp;features</figcaption></figure><p name="dbe7" class="graf graf--p graf--empty graf-after--figure"><br></p><p name="7299" class="graf graf--p graf--empty graf-after--p graf--trailing"><br></p></div></div></section></div></article></main>