Facebook login in Ionic 4 Apps using Firebase 🔥
Tags: ionic, facebook, login, firebase
Published: 2019-09-20 10:30:32

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors is-withLeadingImage" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="5e79" 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="d06e" class="graf graf--p graf-after--figure">This is part-1 of two post series. In this post, you will learn how to implement a Facebook authentication in Ionic 4 apps using Firebase 🔥. In Part 2 of the series we will discuss how to use Facebook login with Native Storage.</p><p name="c276" class="graf graf--p graf-after--p is-selected">We will cook a sample app, where users can login using their Facebook account. After login, user can see their basic profile information on home page, and sessions are saved in Firebase.</p><blockquote name="edf8" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://store.enappd.com/product/ionic-4-facebook-login-with-firebase/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Ionic-4-facebook-auth starter.</em></a></blockquote><h3 name="47b6" class="graf graf--h3 graf-after--blockquote">Social logins&#8202;—&#8202;What and&nbsp;why</h3><p name="9913" class="graf graf--p graf-after--h3">It’s helpful to use social sign-ins 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="d7cc" 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="16d8" 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="9351" 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="e6d2" 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="05ea" 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="3e01" 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="b474" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Trust</strong>&#8202;—&#8202;Nowadays, people generally trust social logins more over custom email logins. Social logins follows standard privacy protocols and hence are more reliable for information sharing</li></ul><h3 name="81e8" class="graf graf--h3 graf-after--li">Ionic Authentication</h3><p name="3e3e" class="graf graf--p graf-after--h3">Ionic framework has been around for around 5 years, and has been very popular among developers for its ease of usage over Swift / Java. Plus it requires you to have single source code for both an Android and an iOS app. What more can a developer ask for&nbsp;!</p><p name="fc16" class="graf graf--p graf-after--p">Ionic 4 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="9429" class="graf graf--p graf-after--p">There are several ways of Authentication in Ionic 4 apps</p><ul class="postList"><li name="17df" 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="19a5" 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 a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms.&nbsp;<br><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 next section</li><li name="0544" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Create you 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 the user authentication. But this method is the most time taking one as well.</li></ul><h3 name="14e8" class="graf graf--h3 graf-after--li">Firebase</h3><p name="669e" 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"    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 variety of functionalities available on it.</p><p name="25ba" class="graf graf--p graf-after--p">Some of the quick integrations available with Firebase are</p><ul class="postList"><li name="d39d" class="graf graf--li graf-after--p">Email Authentication</li><li name="f5a2" class="graf graf--li graf-after--li">Social logins</li><li name="6db5" class="graf graf--li graf-after--li">Real-time database</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="7063" class="graf graf--li graf-after--li">Push notifications</li><li name="5b13" class="graf graf--li graf-after--li">In-app messages</li><li name="956a" class="graf graf--li graf-after--li">Remote config</li></ul><p name="4bff" class="graf graf--p graf-after--li">and much more. Firebase is quickly growing to become the most popular mobile app back-end platform.</p><h4 name="4a34" class="graf graf--h4 graf-after--p">Firebase Authentication Options</h4><p name="0ada" 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="1ce9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 416px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.4%;"></div><img class="graf-image" data-image-id="1*N0bxJuNXDmEF_6_7kTOZ7g.png" data-width="1125" data-height="668" src="https://cdn-images-1.medium.com/max/800/1*N0bxJuNXDmEF_6_7kTOZ7g.png"><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="0c1f" 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="002d" class="graf graf--h3 graf-after--p">A word on Facebook authentication</h3><p name="6fdd" class="graf graf--p graf-after--h3">As mentioned earlier, we are going to implement Facebook authentication using two different storage methods</p><ul class="postList"><li name="a08e" class="graf graf--li graf-after--p">Native Storage</li><li name="d509" class="graf graf--li graf-after--li">Firebase</li></ul><p name="109f" class="graf graf--p graf-after--li">We will implemented Native Storage in the Part-2 of this post&nbsp;.</p><p name="117a" class="graf graf--p graf-after--p">In both cases, we will use the Ionic Cordova Facebook Plugin to interact with Facebook and authenticate the user. Once the login is done, we receive user profile information. This information will be saved in Native storage / Firebase. This acts as a safe storage for user sessions because non-persistent LocalStorage data can be removed by the device. <strong class="markup--strong markup--p-strong">When user closes the app and return to the app, the information / session saved in Native Storage or Firebase will allow user to auto-login.</strong></p><h3 name="9162" 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 4 app with Facebook authentication</p><p name="cfb1" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1: Facebook Developer Console&#8202;—&#8202;Create your app</strong></p><p name="5c1f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2: Add your Platforms to Facebook</strong></p><p name="f920" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">&zwnj;Step 3: Enable Facebook Sign-In in Firebase project</strong></p><p name="3da7" class="graf graf--p graf-after--p">&zwnj;<strong class="markup--strong markup--p-strong">Step 4: Install the Cordova Facebook Plugin to connect your app with Firebase</strong></p><p name="a3ef" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5: Authenticate Users using Facebook</strong></p><p name="882e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 6: Store the Facebook auth tokens in Firebase</strong></p><p name="772b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 7: Use Firebase to auto-login the user</strong></p><p name="4f1b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 8: Test your app for Android</strong></p><h3 name="d3eb" class="graf graf--h3 graf-after--p">Step 1: 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">&#8203;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"    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="8ed7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 313px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.7%;"></div><img class="graf-image" data-image-id="0*25XkXnSODKdAfMqY" data-width="1912" data-height="855" src="https://cdn-images-1.medium.com/max/800/0*25XkXnSODKdAfMqY"><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="9511" 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="95a9" 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="0*QT4zATT8m2s_NfQI" data-width="1919" data-height="855" src="https://cdn-images-1.medium.com/max/800/0*QT4zATT8m2s_NfQI"><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="e7d6" class="graf graf--h3 graf-after--figure">&zwnj;&zwnj;Step 2: 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="991d" class="graf graf--p graf-after--p">&zwnj;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="5428" 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="1dd6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 213px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30.5%;"></div><img class="graf-image" data-image-id="0*0VnMWKBszvJ5iwCf" data-width="1041" data-height="317" src="https://cdn-images-1.medium.com/max/800/0*0VnMWKBszvJ5iwCf"><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="de96" class="graf graf--h4 graf-after--figure">Add Platforms in Facebook dashboard</h4><p name="7565" class="graf graf--p graf-after--h4">&zwnj; <strong class="markup--strong markup--p-strong">Let’s start with iOS&nbsp;:-</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><p name="c03a" class="graf graf--p graf-after--p">&#8203;</p><figure tabindex="0" contenteditable="false" name="fc10" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 380px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.300000000000004%;"></div><img class="graf-image" data-image-id="0*aCcsrSi7qQNWASm0" data-width="1007" data-height="547" src="https://cdn-images-1.medium.com/max/800/0*aCcsrSi7qQNWASm0"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create iOS app in Facebook&nbsp;console</figcaption></figure><p name="eb89" 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="b22b" class="graf graf--pre graf-after--p">&lt;widget id="co.ionic.facebookAuth" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"&gt;</pre><p name="42b3" class="graf graf--p graf-after--pre">&zwnj;Once you add the Bundle ID, just follow the process to create the app.</p><p name="4db2" class="graf graf--p graf-after--p">&zwnj;<strong class="markup--strong markup--p-strong">Android&nbsp;:-</strong> The difference is that instead of <code class="markup--code markup--p-code">Bundle ID</code>, Android calls it “Google Play Package Name.”</p><h3 name="a628" class="graf graf--h3 graf-after--p">&zwnj;Step 3: 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"    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><figure tabindex="0" contenteditable="false" name="a180" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 411px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 58.699999999999996%;"></div><img class="graf-image" data-image-id="0*Z9_e-y2g3MiR9sGJ" data-width="1240" data-height="728" src="https://cdn-images-1.medium.com/max/800/0*Z9_e-y2g3MiR9sGJ"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable Facebook login in Firebase&nbsp;console</figcaption></figure><p name="d34a" class="graf graf--p graf-after--figure">It will ask you App ID and App secret you will copy it from your Facebook console, under your app’s settings.</p><figure tabindex="0" contenteditable="false" name="63ec" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 119px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 17%;"></div><img class="graf-image" data-image-id="1*eAF14yTB3WQi7JmwW52vEQ.png" data-width="800" data-height="136" src="https://cdn-images-1.medium.com/max/800/1*eAF14yTB3WQi7JmwW52vEQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Pick App ID and App Secret from Facebook&nbsp;console</figcaption></figure><h3 name="a26b" class="graf graf--h3 graf-after--figure">Step 4: Install the Facebook Cordova&nbsp;Plugin</h3><p name="ac34" class="graf graf--p graf-after--h3">In this step we will install the Cordova plugin in our Ionic app.</p><p name="a9cc" class="graf graf--p graf-after--p">&zwnj;For that, open your terminal and type</p><pre name="5e31" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"</pre><p name="8cd3" class="graf graf--p graf-after--pre">&zwnj;You’ll need to replace the values or <code class="markup--code markup--p-code">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="98b4" class="graf graf--p graf-after--p">&zwnj;It’s bit clumsy to work with Cordova plugin so ionic team created <strong class="markup--strong markup--p-strong">Ionic Native</strong>, which is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” way.</p><p name="f788" class="graf graf--p graf-after--p">&zwnj;So now we will open our terminal and try this command&zwnj; to install Facebook package from Ionic Native</p><pre name="1403" class="graf graf--pre graf-after--p">$ npm install --save @ionic-native/facebook</pre><h4 name="1705" class="graf graf--h4 graf-after--pre">Initialize Firebase in your&nbsp;app</h4><p name="1175" class="graf graf--p graf-after--h4">To start off, let’s create an Ionic Application. You can either use our <a href="https://store.enappd.com/product/firebase-starter-full-auth/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 full Auth </a>starter or you can create your own Ionic 4 app from scratch. This app contains all type of Authentications using Firebase.</p><figure tabindex="0" contenteditable="false" name="bd6b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 525px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*aw_rO-fnmbUEAdIu3_3UvQ.jpeg" data-width="1200" data-height="900" src="https://cdn-images-1.medium.com/max/800/1*aw_rO-fnmbUEAdIu3_3UvQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full Auth app&nbsp;starter</figcaption></figure><blockquote name="220a" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">To learn more about how to create Ionic app from </em>scratch<em class="markup--em markup--blockquote-em">, read </em></strong><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">How to create Ionic 4 app from scratch for beginners</em></strong></a></blockquote><p name="88f4" class="graf graf--p graf-after--blockquote">Also, we need to install <a href="https://github.com/angular/angularfire2"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">AngularFire2 npm module</a>, which actually connects the Firebase functionality to Ionic app. To install the module, run</p><pre name="ef86" class="graf graf--pre graf-after--p">$ npm install firebase @angular/fire --save</pre><p name="237a" 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="e78e" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/c9ba347b62b4e68e6a4046fa70b5e1a8.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Import environment and AngularFire modules in app.module.ts</figcaption></figure><p name="fb05" 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.config)</pre><p name="4c7c" 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><p name="3237" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Connect you app with Firebase</strong></p><blockquote name="08c6" class="graf graf--blockquote graf-after--p">Details of this step can be found in our blog <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23/"  class="markup--anchor markup--blockquote-anchor" rel="nofollow noopener noopener"    target="_blank">How to integrate Firebase in Ionic 4 apps</a></blockquote><p name="3504" class="graf graf--p graf-after--blockquote">To connect you app to Firebase, you first need a Firebase project. From the project you will pick up you Firebase config parameters and include them in an environment file at the root of your Ionic project. The environment file will look like following</p><figure tabindex="0" contenteditable="false" name="d494" class="graf graf--figure graf-after--p"><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><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase config params in environment file</figcaption></figure><p name="78d7" class="graf graf--p graf-after--figure">You can create two different environment files for development and production environments.</p><h3 name="f2bc" class="graf graf--h3 graf-after--p">Step 5: 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="c108" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/0a42b1b848ae25b624dd361404043a1e.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">home.page.ts for Facebook login</figcaption></figure><figure tabindex="0" contenteditable="false" name="0d61" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*5Nv-Oja0QV22p51Vz_gPxA.jpeg" data-width="350" data-height="700" src="https://cdn-images-1.medium.com/max/800/1*5Nv-Oja0QV22p51Vz_gPxA.jpeg"><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="9206" 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><blockquote name="e729" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://store.enappd.com/product/ionic-4-facebook-login-with-firebase/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Ionic-4-facebook-auth starter.</em></a></blockquote><h3 name="3870" class="graf graf--h3 graf-after--blockquote">Step 6&#8202;—&#8202;Store the Facebook auth token in&nbsp;Firebase</h3><p name="7a16" class="graf graf--p graf-after--h3">In previous step, the authentication is done via Facebook app on your phone. Once logged in, you will receive a <code class="markup--code markup--p-code">token</code> in 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="b749" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/e81d043ded52e534a3638b32e4337c62.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Facebook Auth success function</figcaption></figure><p name="9809" 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 <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 <strong class="markup--strong markup--p-strong">Profile</strong> page, we will get the profile information of the user using Firebase Auth Module again.</p><figure tabindex="0" contenteditable="false" name="809e" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/bc2f7a3d776573fe948742ea07c0a8a1.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">profile.page.ts&#8202;—&#8202;Getting user profile and Logout function</figcaption></figure><figure tabindex="0" contenteditable="false" name="2d80" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*hafY13uCj34L30Qc62LcYA.jpeg" data-width="350" data-height="700" src="https://cdn-images-1.medium.com/max/800/1*hafY13uCj34L30Qc62LcYA.jpeg"><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="e073" class="graf graf--blockquote graf-after--figure">Note:- 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="bf5b" 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> page will look like following</p><figure tabindex="0" contenteditable="false" name="8930" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/3d3ea7ec3c2be1b96a82a5cabb2a6404.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Logout from app using Firebase</figcaption></figure><h3 name="76de" class="graf graf--h3 graf-after--figure">Step 7&#8202;—&#8202;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 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 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 leave 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 user’s information. Our <code class="markup--code markup--p-code">app.component.ts</code> file will look like following</p><figure tabindex="0" contenteditable="false" name="b005" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/d099e53f913c78782fe114e0a6ada02f.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Auto-login using Firebase’s onAuthStateChanged() function</figcaption></figure><figure tabindex="0" contenteditable="false" name="6135" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 622px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*CMV7syfeAhiYPVKROvL7TA.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*CMV7syfeAhiYPVKROvL7TA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Facebook / Firebase auto-login</figcaption></figure><h3 name="105e" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="adcf" class="graf graf--p graf-after--h3">In this post you learnt how to implement Facebook login in your Ionic 4 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><blockquote name="e406" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://store.enappd.com/product/ionic-4-facebook-login-with-firebase/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Ionic-4-facebook-auth starter.</em></a></blockquote><p name="8df3" class="graf graf--p graf-after--blockquote">This story was initially published on <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">enappd.com</a></p><h3 name="f7fc" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="8964" class="graf graf--p graf-after--h3">Now that you have learnt how to implement Facebook login in Ionic 4 apps, there are several things you can do next</p><ul class="postList"><li name="2313" class="graf graf--li graf-after--p">How to implement <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</a></li><li name="e62a" class="graf graf--li graf-after--li">How to implement <a href="https://enappd.com/blog/how-to-create-mobile-games-pwa-with-ionic-4-and-phaser/19"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">Phaser game framework in Ionic 4</a></li><li name="21d0" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">mplement multi-language text in Ionic 4</a></li><li name="d038" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">mplement Stripe payment in Ionic 4</a></li><li name="3f89" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">mplement PayPal payment in Ionic 4</a></li><li name="ede6" class="graf graf--li graf-after--li">How to <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">implement Pedometer in Ionic </a>4</li><li name="80f9" class="graf graf--li graf-after--li">Integrate <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">Apple Pay in Ionic 4</a></li><li name="55b4" class="graf graf--li graf-after--li">Integrate <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener"    target="_blank">Razorpay in Ionic 4</a></li></ul><h3 name="281e" class="graf graf--h3 graf-after--li">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--li-anchor"    target="_blank">Free Ionic 4&#8202;—&#8202;Phaser game framework integration</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also 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"    target="_blank">Ionic 4 Full App</a></p><h3 name="1b1c" class="graf graf--h3 graf-after--p">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3 graf--trailing"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener"    target="_blank">Ionic documentation</a></li></ul></div></div></section></div></article></main>