Implement Google login in Ionic 4 apps using Firebase
Tags: ionic, firebase, authentication, login
Published: 2019-09-26 07:48:50

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="6c31" 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="8cd4" class="graf graf--p graf-after--figure">In this post, you will learn how to implement a Google authentication in Ionic 4 apps using Firebase 🔥.</p><p name="c276" class="graf graf--p graf-after--p">We’ll cook a sample app 👨&zwj;🍳&nbsp;, where users can login using their Google account. After login, users can see their basic profile information on home page, and sessions are saved in Firebase.</p><h3 name="47b6" class="graf graf--h3 graf-after--p">Social logins&#8202;—&#8202;What and&nbsp;why</h3><p name="9913" class="graf graf--p graf-after--h3 is-selected">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 Google login is automatically done with the pre-installed Google app.</p><h3 name="d7cc" class="graf graf--h3 graf-after--p">Google 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 Google 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 Google. 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 Google 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. Google 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>Google 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">Google integration</strong>&#8202;—&#8202;If your app uses Google authentication, you can use Google 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 moreover custom email logins. Social logins follows standard privacy protocols and hence are more reliable for information sharing</li></ul><h3 name="c92a" 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. Also in Ionic 4 you get to keep a single source code for both Android and iOS app. What more can a developer ask for!</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="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><li name="c209" 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.<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></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">A lot of quick integrations are available with Firebase. Some of these are listed below:</p><ul class="postList"><li name="0e5e" 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="4bff" class="graf graf--p graf-after--li">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="2386" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*3ZPJiOPkpD0oAjs4hBz4mA.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*3ZPJiOPkpD0oAjs4hBz4mA.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="8822" class="graf graf--p graf-after--figure">We will use Firebase to store user profile information once the Google login is done. This is the preferred method, as it is reliable for both apps and PWA.</p><h3 name="f281" class="graf graf--h3 graf-after--p">Steps for Google 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 Google authentication</p><p name="cfb1" class="graf graf--p graf-after--p">Step 1: Google Developer Console&#8202;—&#8202;Create your app</p><p name="5c1f" class="graf graf--p graf-after--p">Step 2: Add your Platforms to Google</p><p name="f920" class="graf graf--p graf-after--p">&zwnj;Step 3: Enable Google Sign-In in Firebase project</p><p name="3da7" class="graf graf--p graf-after--p">&zwnj;Step 4: Install the Cordova Google Plugin to connect your app with Firebase</p><p name="a3ef" class="graf graf--p graf-after--p">Step 5: Authenticate Users using Google</p><p name="882e" class="graf graf--p graf-after--p">Step 6: Store the Google auth IdToken and AccessToken in Firebase</p><p name="772b" class="graf graf--p graf-after--p">Step 7: Use Firebase to auto-login the user</p><p name="4f1b" class="graf graf--p graf-after--p">Step 8: Test your app on Android</p><h3 name="2383" class="graf graf--h3 graf-after--p">Step 1: Google Developer Console</h3><p name="4c6a" class="graf graf--p graf-after--h3">The first thing we need to do is to set up everything we’re going to need from Google to get our app working. We need to get:</p><ul class="postList"><li name="727b" class="graf graf--li graf-after--p">A <code class="markup--code markup--li-code">REVERSED_CLIENT_ID</code> from the Google developers console.</li><li name="c652" class="graf graf--li graf-after--li">Enable Google sign-in inside the Firebase console.</li><li name="34d6" class="graf graf--li graf-after--li">Take note of the credential so we can install the plugin.</li></ul><p name="e97e" class="graf graf--p graf-after--li">To generate our credentials, we need to create both iOS and Android apps in the <a href="https://console.developers.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Google Developers Console</a> <em class="markup--em markup--p-em">(because we are using the awesome Ionic, which creates both iOS and Android from same code base 😎 ← woah I just italicized an emoji&nbsp;!!)</em></p><p name="243f" class="graf graf--p graf-after--p">Log in with the Google account you use for Firebase (<em class="markup--em markup--p-em">if it asks you to log in</em>), and follow the instructions to create the app.</p><p name="316c" class="graf graf--p graf-after--p">The first thing it’s going to ask you is the app name, as soon as you start typing it’s going to search for your Firebase apps, pick the one you linked to this project.</p><blockquote name="329e" class="graf graf--blockquote graf-after--p">Note: You can create a Firebase project beforehand for this. Check out <a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">how to create a Firebase project and link to Ionic 4</a></blockquote><p name="7cce" class="graf graf--p graf-after--blockquote">In your project, go to <em class="markup--em markup--p-em">API credentials</em> and look for <em class="markup--em markup--p-em">Web-Client ID</em>. This will be used to get an <code class="markup--code markup--p-code">idToken</code> or <code class="markup--code markup--p-code">serverAuthCode</code> back from the Sign In Process, so we can save it in Firebase.</p><p name="8b73" class="graf graf--p graf-after--p">For first time you will get it after credentials process.For create credentials goto API credentials tab in Google Console.</p><p name="9a68" class="graf graf--p graf-after--p">And then&#8202;—&#8202;Create Credentials → OAuth Client ID.</p><figure tabindex="0" contenteditable="false" name="4416" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*bnXV_AFh-jiqQcsX0FZPiQ.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*bnXV_AFh-jiqQcsX0FZPiQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="6df0" class="graf graf--p graf-after--figure">And then it will ask you for application type and so select your application type here.</p><figure tabindex="0" contenteditable="false" name="23b8" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*7OpKQrNr93AgL5-DX6ZutA.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*7OpKQrNr93AgL5-DX6ZutA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f132" class="graf graf--p graf-after--figure">For iOS setup, you need to supply the bundle ID. This is the value in <code class="markup--code markup--p-code">config.xml</code> which is set to <code class="markup--code markup--p-code">io.ionic.starter</code> by default. Change that to whatever you like, and that will be your bundle ID.</p><p name="962b" class="graf graf--p graf-after--p">Make sure you don’t leave it as the default value, it might conflict later on with other similar apps if you make your way to App stores.</p><figure tabindex="0" contenteditable="false" name="1d03" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*jOpWUMhFJ0iSc6URi0vShQ.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*jOpWUMhFJ0iSc6URi0vShQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="9eac" class="graf graf--p graf-after--figure">The process for adding Google sign into the Android platform is almost identical, with one extra requirement. To get started, head <a href="https://developers.google.com/mobile/add?platform=android%26cntapi=signin"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">to this link</a>, and start creating your Android app.</p><blockquote name="1b7a" class="graf graf--blockquote graf-after--p">It’s important to note that for building to Android (and also for using the cordova plugin) you will need to install the Android build tools version 19.1.0 or higher.</blockquote><h4 name="fa67" class="graf graf--h4 graf-after--blockquote">Acquiring the key&nbsp;🔑</h4><p name="2983" class="graf graf--p graf-after--h4">Once the build tools are installed and you’ve confirmed this, the <strong class="markup--strong markup--p-strong">keystore</strong> should be available to get the SHA-1 value we need for the Android part of the process. The keystore is used to hold the signing keys you use for the apps you build.</p><p name="a482" class="graf graf--p graf-after--p">Run this command in the terminal to acquire the SHA-1 value need:</p><pre name="9ca6" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore</code></pre><blockquote name="6be4" class="graf graf--blockquote graf-after--pre"><strong class="markup--strong markup--blockquote-strong">Important</strong>: The keystores are different for debug and release versions. For testing purpose the debug.keystore (default) works good. But when you are going for production, make sure you repeat these steps with your release Keystore. Otherwise you’ll face random login errors</blockquote><p name="b17c" class="graf graf--p graf-after--blockquote">Add the SHA-1 value you got after running the previous command, to the above input.</p><p name="9269" class="graf graf--p graf-after--p">After this step, head <a href="https://developers.google.com/mobile/add?platform=android%26cntapi=signin"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">to this link</a>, and add your Android project.</p><p name="251b" class="graf graf--p graf-after--p">Make sure again that you have changed the config.xml ‘id’ value for your project so that it is no longer <code class="markup--code markup--p-code">io.ionic.starter</code>&nbsp;.</p><figure tabindex="0" contenteditable="false" name="d863" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*o-NUniTjwFLj5XaND9-Eow.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*o-NUniTjwFLj5XaND9-Eow.png"><div class="crosshair u-ignoreBlock"></div></div></figure><blockquote name="a6a0" class="graf graf--blockquote graf-after--figure">Here package name is bundle id</blockquote><p name="ad46" class="graf graf--p graf-after--blockquote">After Adding application it will give you web client id</p><figure tabindex="0" contenteditable="false" name="ca1a" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*1HMuW6xI389MecFIWXHRbg.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*1HMuW6xI389MecFIWXHRbg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="b966" class="graf graf--p graf-after--figure">Which is also Reflected in OUR OAuth2.0 client Id’s</p><figure tabindex="0" contenteditable="false" name="f1af" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.2%;"></div><img class="graf-image" data-image-id="1*fj7S64qhG_DUdfsWbiCHZQ.png" data-width="1389" data-height="767" src="https://cdn-images-1.medium.com/max/800/1*fj7S64qhG_DUdfsWbiCHZQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Look for Web-client ID in your project Credentials</figcaption></figure><p name="df24" class="graf graf--p graf-after--figure">Now, click on edit button in front of highlighted Web Client ID as shown in pic above.</p><figure tabindex="0" contenteditable="false" name="8d52" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 433px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.8%;"></div><img class="graf-image" data-image-id="1*O8LR5D5pSnhUSWzCioyubw.png" data-width="1006" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*O8LR5D5pSnhUSWzCioyubw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ac14" class="graf graf--p graf-after--figure">If you click the Web-client Id, you’ll get the <strong class="markup--strong markup--p-strong">Client</strong> <strong class="markup--strong markup--p-strong">Secret</strong> as well. Keep these safe for a later step.</p><h3 name="fade" class="graf graf--h3 graf-after--p">Step 2: Add your Platforms to&nbsp;Google</h3><p name="8a7f" class="graf graf--p graf-after--h3">In order for Firebase to work with both the native Android and iOS platforms, we’ll need to do two configurations for the app, each a little bit different.</p><h4 name="6bf4" class="graf graf--h4 graf-after--p">iOS</h4><p name="7664" class="graf graf--p graf-after--h4">In your Firebase console, create an iOS app</p><figure tabindex="0" contenteditable="false" name="ac98" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder"><img class="graf-image" data-image-id="1*KlFx5bRuIjvvlsaK5JTc6g.png" src="https://cdn-images-1.medium.com/max/800/1*KlFx5bRuIjvvlsaK5JTc6g.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="3afc" class="graf graf--p graf-after--figure">For iOS setup, you need to supply the bundle ID. This is the value in <code class="markup--code markup--p-code">config.xml</code> which is set to <code class="markup--code markup--p-code">io.ionic.starter</code> by default. Change that to whatever you like, and that will be your bundle ID.</p><p name="9951" class="graf graf--p graf-after--p">Make sure you don’t leave it as the default value, it might conflict later on with other similar apps if you make your way to App stores.</p><p name="8f0a" class="graf graf--p graf-after--p">After setup, you will get a <strong class="markup--strong markup--p-strong">GoogleService-Info.plist</strong>. Save this file to the root of the Ionic project folder. After performing these steps, your done! For iOS at least…</p><p name="f323" class="graf graf--p graf-after--p">You should now see the following UI and have your Plist file downloaded and ready to use.</p><figure tabindex="0" contenteditable="false" name="f0ed" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder"><img class="graf-image" data-image-id="1*04dZ4snRrJ7hyuim6C2Q-w.png" src="https://cdn-images-1.medium.com/max/800/1*04dZ4snRrJ7hyuim6C2Q-w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="97be" class="graf graf--h4 graf-after--figure">Android</h4><p name="12da" class="graf graf--p graf-after--h4">The process for adding Google sign into the Android platform is almost identical, with one extra requirement. To get started, head <a href="https://developers.google.com/mobile/add?platform=android%26cntapi=signin"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">to this link</a>, and start creating your Android app.</p><blockquote name="69a8" class="graf graf--blockquote graf-after--p">It’s important to note that for building to Android (and also for using the cordova plugin) you will need to install the Android build tools version 19.1.0 or higher.</blockquote><h4 name="4dcf" class="graf graf--h4 graf-after--blockquote">Acquiring the key&nbsp;🔑</h4><p name="dd99" class="graf graf--p graf-after--h4">Once the build tools are installed and you’ve confirmed this, the <strong class="markup--strong markup--p-strong">keystore</strong> should be available to get the SHA-1 value we need for the Android part of the process. The keystore is used to hold the signing keys you use for the apps you build.</p><p name="ead5" class="graf graf--p graf-after--p">Run this command in the terminal to acquire the SHA-1 value need:</p><pre name="e297" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore</code> </pre><blockquote name="e4e8" class="graf graf--blockquote graf-after--pre"><strong class="markup--strong markup--blockquote-strong">Important</strong>: The keystores are different for debug and release versions. For testing purpose the debug.keystore (default) works good. But when you are going for production, make sure you repeat these steps with your release Keystore. Otherwise you’ll face random login errors</blockquote><figure tabindex="0" contenteditable="false" name="0046" class="graf graf--figure graf-after--blockquote is-defaultValue"><div class="aspectRatioPlaceholder"><img class="graf-image" data-image-id="1*QelLvXTfoua-6TSoJJjTpQ.png" src="https://cdn-images-1.medium.com/max/800/1*QelLvXTfoua-6TSoJJjTpQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="c1de" class="graf graf--h3 graf-after--figure">&zwnj;Step 3: Enable Google Login in Firebase.</h3><p name="8f1f" class="graf graf--p graf-after--h3">Now that everything is set up on Google side, we need to go into our Firebase console and enable Google authentication for our app.</p><p name="fdae" class="graf graf--p graf-after--p">&zwnj;To enable Google&nbsp;, 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 Authentication &gt; Sign-In Method &gt; Google and click the Enable toggle.</p><figure tabindex="0" contenteditable="false" name="4ad7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*a0UaP33qRQtHlrdVi8BbmA.png" data-width="1389" data-height="768" src="https://cdn-images-1.medium.com/max/800/1*a0UaP33qRQtHlrdVi8BbmA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable google-login and save Web-client ID and&nbsp;Secret</figcaption></figure><p name="5d9e" class="graf graf--p graf-after--figure">And save your <strong class="markup--strong markup--p-strong">web client Id</strong> and <strong class="markup--strong markup--p-strong">Secret</strong> in Your Firebase app.</p><h3 name="564a" class="graf graf--h3 graf-after--p">Step 4: Install the Google 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-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid <code class="markup--code markup--pre-code">--variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid</code></pre><p name="8cd3" class="graf graf--p graf-after--pre">&zwnj;You’ll need to replace the values in REVERSED_CLIENT_ID with your real credentials. You can find both of these inside your Google 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 Ionic Native, 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 Google package from Ionic Native</p><pre name="1403" class="graf graf--pre graf-after--p">$   npm install --save @ionic-native/google-plus</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"><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><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"><em class="markup--em markup--blockquote-em">How to create Ionic 4 app from scratch for beginners</em></a></blockquote><p name="88f4" class="graf graf--p graf-after--blockquote">Also, we need to install @angular/fire <a href="https://github.com/angular/angularfire2"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">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="3036" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/2ead5738458333f788620b53a08eae95.js %}</div></div></figure><p name="80bd" class="graf graf--p graf-after--figure">Import environment and AngularFire modules in app.module.ts</p><p name="fb05" class="graf graf--p graf-after--p">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">Connect you app with Firebase</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="fec0" 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 idToken and Access Token from Google. To do that, we need to import Google 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="c5e5" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/f0fcf91feb4d8893b3b7379e7d82d459.js %}</div></div></figure><p name="f482" class="graf graf--p graf-after--figure">home.page.ts for Google login</p><figure tabindex="0" contenteditable="false" name="cd88" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 324px; max-height: 648px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*RLY6lD6HpHlXHzllcC3gmQ.jpeg" data-width="324" data-height="648" src="https://cdn-images-1.medium.com/max/800/1*RLY6lD6HpHlXHzllcC3gmQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="9206" class="graf graf--p graf-after--figure">This function will give you Google idToken and AccessToken and from this tokens we will login user to Firebase app.</p><h3 name="3870" class="graf graf--h3 graf-after--p">Step 6&#8202;—&#8202;Store the Google auth tokens in&nbsp;Firebase</h3><p name="7a16" class="graf graf--p graf-after--h3">In previous step, the authentication is done via Google app on your phone. Once logged in, you will receive a idToken and Accesstoken in response. This info will be used to connect to Firebase in the <code class="markup--code markup--p-code">success</code> of Google login</p><figure tabindex="0" contenteditable="false" name="90b8" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/f0fcf91feb4d8893b3b7379e7d82d459.js %}</div></div></figure><p name="9809" class="graf graf--p graf-after--figure">So, in short we have logged in via Google, and created a Firebase user using the Google id token and access Token&nbsp;. From now on, Firebase can handle your login / logout in the app. After we store the token in Firebase, we navigate to Profile 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 Profile page, we will get the profile information of the user using Firebase Auth Module again.</p><p name="809e" class="graf graf--p graf-after--p">profile.page.ts&#8202;—&#8202;Getting user profile and Logout function</p><figure tabindex="0" contenteditable="false" name="c570" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 324px; max-height: 648px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*7d71j-e6yRNSzf69ZpNxbQ.jpeg" data-width="324" data-height="648" src="https://cdn-images-1.medium.com/max/800/1*7d71j-e6yRNSzf69ZpNxbQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="bf5b" class="graf graf--h4 graf-after--figure">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="fb3c" 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/6caa71b6f05b19cf932daca20c10909a.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 Google plugin</li><li name="a9c6" class="graf graf--li graf-after--li">Pass Google idToken, accessToken to Firebase</li><li name="c75c" class="graf graf--li graf-after--li">Fetch user profile info via Google 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="33e5" 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/60c33fb4bfdccfbd56d18b2c98d24367.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><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 Google 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><h3 name="f7fc" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Firebase Email auth in Ionic 4, you can also try</p><ul class="postList"><li name="98b5" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous logic in Ionic 4</a> using Firebase</li><li name="e6f4" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="9f48" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="2e5a" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li></ul><p name="2930" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">If you need a base to start your next Ionic 4 app, you can make your next awesome app using </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic 4 Full App</strong></a><strong class="markup--strong markup--p-strong">. This is the most powerful Ionic 4 starter available today.</strong></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app for your next awesome&nbsp;app</figcaption></figure><p name="fb35" class="graf graf--p graf-after--figure graf--trailing">This blog was originally posted on <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p></div></div></section></div></article></main>