Google Login in Ionic React Capacitor Apps
Tags: ionic, react, capacitor, google
Published: 2020-03-29 21:46:48

<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="45c8" 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="a5f6" class="graf graf--p graf-after--figure">In this post, you’ll learn how to implement <strong class="markup--strong markup--p-strong">Google login</strong> in your Capacitor apps, based on Ionic React framework. We will also retrieve user name and profile photo to show after login. We will test the authentication on Web, Android and iOS.</p><p name="c222" class="graf graf--p graf-after--p">Since this post is a mix of three new frameworks, it is possible you landed here by mistake. If you are looking for Google login in</p><ul class="postList"><li name="f09a" class="graf graf--li graf-after--p">Ionic Angular (Cordova) apps&#8202;—&#8202;Please check <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">this post</a></li><li name="334a" class="graf graf--li graf-after--li">React Native&#8202;—&#8202;Please check this for <a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Android</a> and <a href="https://enappd.com/blog/google-login-in-react-native-apps-with-firebase/88"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">iOS</a></li><li name="a6f7" class="graf graf--li graf-after--li">Ionic React Capacitor Apps&#8202;—&#8202;Continue reading 😄</li></ul><p name="fdd9" class="graf graf--p graf-after--li">As you can see from above, there are several options available for Hybrid app development these days, and it is easy to get confused between them. This post is focussed on <strong class="markup--strong markup--p-strong">Ionic framework</strong> with <a href="https://reactjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">React</strong></a> as the front-end framework, and <a href="https://capacitor.ionicframework.com/docs/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Capacitor</strong></a> as runtime and build environment.</p><blockquote name="f425" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Code for this tutorial is available on Github repo </em></strong><a href="https://github.com/enappd/ionic-react-capacitor-google-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">ionic-react-capacitor-google-login</em></strong></a></blockquote><p name="6ec3" class="graf graf--p graf-after--blockquote">Let’s see a brief intro to each of the included frameworks:</p><ol class="postList"><li name="430b" class="graf graf--li graf-after--p">Ionic</li><li name="0eb5" class="graf graf--li graf-after--li">Capacitor</li><li name="960b" class="graf graf--li graf-after--li">Ionic-React</li></ol><h3 name="5362" class="graf graf--h3 graf-after--li">What is Ionic&nbsp;?</h3><p name="f59a" class="graf graf--p graf-after--h3">In short&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Ionic and Cordova/Capacitor you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><p name="a73b" class="graf graf--p graf-after--p">It is important to note the contribution of Cordova/Capacitor in this. Ionic is only a UI wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Cordova/Capacitor is the build environment that containerizes (sort of) this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera etc.</p><h3 name="f7d1" class="graf graf--h3 graf-after--p">Capacitor&#8202;—&#8202;How is it different from Cordova&nbsp;?</h3><blockquote name="59c5" class="graf graf--blockquote graf-after--h3"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Capacitor is very similar to Cordova, but with some key differences in the app workflow</em></strong></blockquote><p name="a887" class="graf graf--p graf-after--blockquote">Cordova helps build Ionic web app into a device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.</p><p name="7f22" class="graf graf--p graf-after--p">Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, <em class="markup--em markup--p-em">and</em> the web. Ionic people call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.</p><p name="8e52" class="graf graf--p graf-after--p">Here are the differences between Cordova and Capacitor</p><ol class="postList"><li name="45e4" class="graf graf--li graf-after--p">Capacitor considers each platform project a <em class="markup--em markup--li-em">source asset</em> instead of a <em class="markup--em markup--li-em">build time asset</em>. That means, Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time</li><li name="9140" class="graf graf--li graf-after--li">Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like <code class="markup--code markup--li-code">ionic run ios</code>&nbsp;. You will have to run iOS apps using Xcode, and Android apps using Android studio</li><li name="3c9d" class="graf graf--li graf-after--li">Because of the above, Capacitor does not use <code class="markup--code markup--li-code">config.xml</code> or a similar custom configuration for platform settings. Instead, configuration changes are made by editing <code class="markup--code markup--li-code">AndroidManifest.xml</code> for Android and <code class="markup--code markup--li-code">Info.plist</code> for Xcode</li><li name="05c2" class="graf graf--li graf-after--li">Since platform code is a <em class="markup--em markup--li-em">source asset, </em>you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers. We will do some similar changes for Google login as well.</li></ol><h4 name="c44a" class="graf graf--h4 graf-after--li">Plugins</h4><p name="3a69" class="graf graf--p graf-after--h4">Cordova and <a href="https://ionicframework.com/docs/native"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic Native</a> plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be <a href="https://capacitor.ionicframework.com/docs/cordova/known-incompatible-plugins/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">incompatible with Capacitor.</a> For Google login functionality, we’ll use the <a href="https://github.com/CodetrixStudio/CapacitorGoogleAuth"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Google Auth plugin</a></p><p name="2293" class="graf graf--p graf-after--p">Other than that, Capacitor also doesn’t support plugin installation with variables. Those changes have to be done manually in the native code. We will do something similar in this post.</p><h3 name="1566" class="graf graf--h3 graf-after--p">Why Ionic React&nbsp;?</h3><p name="90fd" class="graf graf--p graf-after--h3">Since Ionic 4, Ionic has become framework agnostic. Now you can create Ionic apps in Angular, React, Vue or even in plain JS. This gives Ionic great flexibility to be used by all kinds of developers.</p><p name="bdfd" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic Angular apps are supported by both Cordova and Capacitor build environments.</strong></p><p name="d50b" class="graf graf--p graf-after--p">Same is not true for Ionic React apps&#8202;—&#8202;<strong class="markup--strong markup--p-strong">Ionic React apps are only supported by Capacitor build environment. </strong>Hence, if you want to build apps in Ionic React, you need to use Capacitor to build the app on device.</p><p name="4da2" class="graf graf--p graf-after--p">I know if can get confusing as three frameworks are crossing paths here. <strong class="markup--strong markup--p-strong">Bottom line for this post&#8202;—&#8202;Ionic + React + Capacitor + Capacitor Google Login plugin</strong></p><h3 name="a1e2" class="graf graf--h3 graf-after--p">A word on Google authentication</h3><p name="6fdd" class="graf graf--p graf-after--h3">We will use the <a href="https://github.com/CodetrixStudio/CapacitorGoogleAuth"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Google Auth Plugin</a> to authenticate the user. Once the login is done, we receive user profile information in auth response itself. Hence, there is no need to fetch user’s profile information separately.</p><p name="ece8" class="graf graf--p graf-after--p">This Google Auth plugin supports 2 functions, across web, Android and iOS</p><ul class="postList"><li name="186c" class="graf graf--li graf-after--p">Login</li><li name="61d2" class="graf graf--li graf-after--li">Logout</li></ul><h3 name="319c" class="graf graf--h3 graf-after--li">Structure of&nbsp;post</h3><p name="1215" class="graf graf--p graf-after--h3">I always go step-by-step for readers of all experience level. If you know certain steps, feel free to skip them</p><p name="0242" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1:</strong> Create a basic Ionic React app</p><p name="66ca" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2:</strong> Connect Capacitor with your app</p><p name="50c9" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3</strong>: Create a Google project for authentication</p><p name="afd3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4: </strong>Setup Google Login Plugin and functions</p><p name="7529" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5</strong>: Prepare and Test on Web</p><p name="a7c6" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 6: </strong>Build and Test your app on Android</p><p name="adf9" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 7: </strong>Build and Test your app on iOS</p><p name="dc6e" class="graf graf--p graf-after--p">Let’s get started with Ionic React Capacitor Google login&nbsp;!</p><h3 name="a27e" class="graf graf--h3 graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic-React app</h3><p name="9e7a" class="graf graf--p graf-after--h3">First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using</p><pre name="cf8a" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">npm install -g ionic@latest</code></pre><p name="f38b" class="graf graf--p graf-after--pre">Creating a basic Ionic-React app is not much different or difficult from creating a basic Ionic-Angular app. Start a basic <code class="markup--code markup--p-code">blank</code> starter using</p><pre name="d448" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">ionic start IonCapReactGoogleLogin blank --type=react</code></pre><p name="39bc" class="graf graf--p graf-after--pre">The <code class="markup--code markup--p-code">--type=react</code> told the CLI to create a <strong class="markup--strong markup--p-strong">React</strong> app, not an <strong class="markup--strong markup--p-strong">Angular</strong> app&nbsp;!!</p><p name="8b9b" class="graf graf--p graf-after--p">Run the app in browser using</p><pre name="96ce" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="6306" class="graf graf--p graf-after--pre">You won’t see much in the homepage created in the blank starter. Let’s modify this page to include a button, icon and a title for login. Also, I have created a Homepage, where the user is redirected after successful login. The user profile information in this page comes after login and single API call.</p><figure tabindex="0" contenteditable="false" name="9ab3" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 614px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 87.7%;"></div><img class="graf-image" data-image-id="1*p8UeZIZQWk7vobz1hQ1Dow.png" data-width="772" data-height="677" alt="Login and Homepage for Ionic React Capacitor Google Login starter app" src="https://cdn-images-1.medium.com/max/800/1*p8UeZIZQWk7vobz1hQ1Dow.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Login and Homepage for Ionic React Capacitor Google Login starter&nbsp;app</figcaption></figure><p name="8472" class="graf graf--p graf-after--figure">The code for this can be found in the attached Github repository.</p><h3 name="35d2" class="graf graf--h3 graf-after--p">Step 2&#8202;—&#8202;Attach Capacitor to your Ionic-React app</h3><p name="4384" class="graf graf--p graf-after--h3">Capacitor can be attached to an existing Ionic app as well. To attach Capacitor to your existing Ionic app, run</p><pre name="e29e" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">ionic integrations enable capacitor</code></pre><p name="2503" class="graf graf--p graf-after--pre">This will attach Capacitor to your Ionic app. After this, you have to <code class="markup--code markup--p-code">init</code> the Capacitor app with</p><pre name="c8ac" class="graf graf--pre graf-after--p">$ npx cap init</pre><p name="c9af" class="graf graf--p graf-after--pre">It will ask you the app name and ID. Give app name whatever you want. App ID is the domain identifier of your app (ex: <code class="markup--code markup--p-code">com.example.app</code>). Note this ID as this will be required later when you create app in Google developer console. In my case, the ID is <code class="markup--code markup--p-code">com.enappd.IonCapReactGoogleLogin</code> ( too long, I know)</p><h3 name="ee08" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Create a Google app in Developer console</h3><p name="4950" class="graf graf--p graf-after--h3">To implement a Google login, you will need a Google app/project in Google developer account.</p><h4 name="6e4c" class="graf graf--h4 graf-after--p">Create new&nbsp;project</h4><p name="38f6" class="graf graf--p graf-after--h4">Create a project in <a href="https://console.cloud.google.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Google Developer console</a> or create it in <a href="https://console.firebase.google.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase Console</a> (recommended). Both consoles are essentially integrated with each other.&nbsp;<br><strong class="markup--strong markup--p-strong">More details about creating a Firebase project can be found </strong><a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">here</strong></a><strong class="markup--strong markup--p-strong">.</strong></p><figure tabindex="0" contenteditable="false" name="97b3" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 657px; max-height: 450px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 68.5%;"></div><img class="graf-image" data-image-id="1*wuSIMiINZ704PCNK8pXyLA.png" data-width="657" data-height="450" alt="Create a project in Google Developer console" src="https://cdn-images-1.medium.com/max/800/1*wuSIMiINZ704PCNK8pXyLA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a project in <a href="https://console.cloud.google.com"  class="markup--anchor markup--figure-anchor" rel="noopener"    target="_blank">Google Developer console</a></figcaption></figure><h4 name="36fb" class="graf graf--h4 graf-after--figure">Get project keys and&nbsp;IDs</h4><p name="bfd3" class="graf graf--p graf-after--h4">Now, to implement Google Login in Web, Android and iOS, we need two things</p><ol class="postList"><li name="fac1" class="graf graf--li graf-after--p">A web-client ID</li><li name="0753" class="graf graf--li graf-after--li"><code class="markup--code markup--li-code">google-services.plist</code> file from the project containing project configuration</li></ol><h4 name="22fe" class="graf graf--h4 graf-after--li">google-services.<code class="markup--code markup--h4-code">plist</code></h4><p name="d98d" class="graf graf--p graf-after--h4">In your Firebase console, create a new iOS app. During creation process it will ask you the app bundle ID. Use the bundle ID you used to initialize Capacitor in section 2 (<code class="markup--code markup--p-code">com.enappd.IonCapReactGoogleLogin</code>). In next step, download the <code class="markup--code markup--p-code">google-services.plist</code> file.</p><p name="aa07" class="graf graf--p graf-after--p">If you already have an existing project, download the <code class="markup--code markup--p-code">google-services.plist</code> from the Project Settings page.</p><figure tabindex="0" contenteditable="false" name="ac6d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 326px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.6%;"></div><img class="graf-image" data-image-id="1*BkHDohZGeuBus2BupbzW4g.png" data-width="1384" data-height="645" src="https://cdn-images-1.medium.com/max/800/1*BkHDohZGeuBus2BupbzW4g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Download <code class="markup--code markup--figure-code">google-services.plist from your Firebase iOS&nbsp;project</code></figcaption></figure><h4 name="040e" class="graf graf--h4 graf-after--figure">web-client ID</h4><blockquote name="c21e" class="graf graf--blockquote graf-after--h4">I will create the Android part of ID in Google developer console just to show that it can be done in either places&#8202;—&#8202;Firebase or Google Dev Console.</blockquote><p name="a6ef" class="graf graf--p graf-after--blockquote is-selected">Open you <a href="https://console.cloud.google.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Google Developer console.</a> Select the project you are working on, and go to <strong class="markup--strong markup--p-strong">Credentials</strong> page from the left side menu. In this page, you’ll see several keys and IDs created for your project.</p><p name="0c55" class="graf graf--p graf-after--p">If you have haven’t added an Android app in this Project (in Firebase) you will not see an Android client-ID here. Create a new credential for Android using <strong class="markup--strong markup--p-strong">Create Credential</strong> → OAuth client ID option, and select Android</p><figure tabindex="0" contenteditable="false" name="4599" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 535px; max-height: 346px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.7%;"></div><img class="graf-image" data-image-id="1*zXXO7fAJklzU-22iJFOaHw.png" data-width="535" data-height="346" src="https://cdn-images-1.medium.com/max/800/1*zXXO7fAJklzU-22iJFOaHw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="9012" class="graf graf--p graf-after--figure">Fill the required options, and make sure you enter the correct package name</p><figure tabindex="0" contenteditable="false" name="098a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 547px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 78.10000000000001%;"></div><img class="graf-image" data-image-id="1*DqZxx6OwCbffWuGsHp4C6A.png" data-width="755" data-height="590" alt="Create OAuth credential for Android" src="https://cdn-images-1.medium.com/max/800/1*DqZxx6OwCbffWuGsHp4C6A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create OAuth credential for&nbsp;Android</figcaption></figure><p name="93af" class="graf graf--p graf-after--figure">Now, this Android Client-ID is created BUT you will not need this. This is only required to be generated to authenticate an Android app in the project. You will only need the <strong class="markup--strong markup--p-strong">web-client ID&nbsp;. </strong>Note it down as well.</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: 261px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37.4%;"></div><img class="graf-image" data-image-id="1*XCATai1vHqIjqJ6mp14N0A.png" data-width="1127" data-height="421" alt="Client IDs in Google Developer Console." src="https://cdn-images-1.medium.com/max/800/1*XCATai1vHqIjqJ6mp14N0A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Client IDs in Google Developer Console.</figcaption></figure><blockquote name="31e0" class="graf graf--blockquote graf-after--figure">If you create Android app in Firebase, you can get web-client ID by downloading <code class="markup--code markup--blockquote-code">google-services.json</code> file</blockquote><h3 name="d697" class="graf graf--h3 graf-after--blockquote">Step 4&#8202;—&#8202;Setup Google Login Plugin and functions</h3><p name="8ec3" class="graf graf--p graf-after--h3">To setup Google login in the app, we’ll do following things</p><p name="c71f" class="graf graf--p graf-after--p">4.1 Install <a href="https://github.com/CodetrixStudio/CapacitorGoogleAuth"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Google Auth plugin</a></p><p name="02c2" class="graf graf--p graf-after--p">4.2 Setup plugin functions for login</p><p name="aac8" class="graf graf--p graf-after--p">4.3 Enable routing between two pages of the app</p><p name="0828" class="graf graf--p graf-after--p">4.4 Control navigation via login / logout from Google Auth</p><p name="9b6c" class="graf graf--p graf-after--p">4.5 User’s profile information</p><h4 name="18aa" class="graf graf--h4 graf-after--p">4.1 Install Capacitor Google Auth&nbsp;plugin</h4><p name="5585" class="graf graf--p graf-after--h4">Install the plugin using</p><pre name="ef0f" class="graf graf--pre graf-after--p">$ npm install --save @codetrix-studio/capacitor-google-auth</pre><p name="851f" class="graf graf--p graf-after--pre">Add the following info in your <code class="markup--code markup--p-code">capacitor.config.json</code></p><pre name="ccd7" class="graf graf--pre graf-after--p">...<br>"plugins": {<br> "GoogleAuth": {<br>  "scopes": ["profile","email"],<br>  "serverClientId": "160012889513-qkxxxxxxxxxxxxxxxxxxxxxxxxkgubrp5ve.apps.googleusercontent.com"<br>}<br>}<br>...</pre><p name="0baf" class="graf graf--p graf-after--pre"><code class="markup--code markup--p-code">serverClientId</code> is basically the web-client ID itself. Import the plugin in app’s pages using</p><pre name="3421" class="graf graf--pre graf-after--p">import "@codetrix-studio/capacitor-google-auth";<br>import { Plugins } from '@capacitor/core';</pre><p name="8e9e" class="graf graf--p graf-after--pre">After this, build your app using following commands</p><pre name="046d" class="graf graf--pre graf-after--p">// Build web assets<br>$ <strong class="markup--strong markup--pre-strong">ionic build<br></strong>// Run the app in browser<br>$ <strong class="markup--strong markup--pre-strong">ionic serve</strong></pre><h4 name="a894" class="graf graf--h4 graf-after--pre">4.2 Setup plugin functions for&nbsp;login</h4><p name="7ac2" class="graf graf--p graf-after--h4">We have to setup only two major functions for Google Auth functionality</p><ol class="postList"><li name="3846" class="graf graf--li graf-after--p">Login&#8202;—&#8202;Plugins.GoogleAuth.signIn()</li><li name="ecac" class="graf graf--li graf-after--li">Logout&#8202;—&#8202;Plugins.GoogleAuth.signOut()</li></ol><h4 name="002d" class="graf graf--h4 graf-after--li">Login Page</h4><p name="8317" class="graf graf--p graf-after--h4">The complete code for Login Page looks like this</p><figure tabindex="0" contenteditable="false" name="5ea6" class="graf graf--figure graf--iframe is-defaultValue 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/8acc2c1d901e6f332aa4a77d7842514b.js %}</div></div></figure><p name="16db" class="graf graf--p graf-after--figure">Some basic things</p><pre name="ba18" class="graf graf--pre graf-after--p">history.push({<br>   pathname: '/home',<br>   state: { name: result.name || result.displayName, image: result.imageUrl, email: result.email</pre><pre name="16bc" class="graf graf--pre graf-after--pre">}<br>});</pre><p name="a5ce" class="graf graf--p graf-after--pre">Here, <code class="markup--code markup--p-code">state</code> field contains navigation params (props). These will be accessed in next page from the <code class="markup--code markup--p-code">location</code> object of <code class="markup--code markup--p-code">props</code>&nbsp;. The auth response returns <code class="markup--code markup--p-code">name</code> field in web and iOS, while it return <code class="markup--code markup--p-code">displayName</code> in Android.</p><h4 name="8bcc" class="graf graf--h4 graf-after--p">Home Page</h4><p name="936d" class="graf graf--p graf-after--h4">The complete code for Home Page looks like this</p><figure tabindex="0" contenteditable="false" name="bac4" class="graf graf--figure graf--iframe is-defaultValue 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/99dc67a3bad894170da9b7f4e0cff130.js %}</div></div></figure><p name="f34a" class="graf graf--p graf-after--figure">The <code class="markup--code markup--p-code">name</code>&nbsp;, <code class="markup--code markup--p-code">image</code> and <code class="markup--code markup--p-code">email</code> sent from first page is accessed via <code class="markup--code markup--p-code">this.props.location.state.name</code> and so on. This will be used further to display user’s profile information. The Auth response is given in Section 4.5</p><h4 name="4ade" class="graf graf--h4 graf-after--p">4.3 Enable routing between two pages of the&nbsp;app</h4><p name="c742" class="graf graf--p graf-after--h4">The routes are defined in <code class="markup--code markup--p-code">App.tsx</code> file like this</p><pre name="5f1c" class="graf graf--pre graf-after--p">&lt;IonApp&gt;<br> &lt;IonReactRouter&gt;<br>  &lt;IonRouterOutlet&gt;<br>   &lt;Route path="/login" component={Login} exact={true} /&gt;<br>   &lt;Route path="/home" component={Home} exact={true} /&gt;<br>   &lt;Route exact path="/" render={() =&gt; &lt;Redirect to="/login" /&gt;} /&gt;<br>  &lt;/IonRouterOutlet&gt;<br> &lt;/IonReactRouter&gt;<br>&lt;/IonApp&gt;</pre><h4 name="11e9" class="graf graf--h4 graf-after--pre">4.4 Control navigation via login / logout from&nbsp;Google</h4><p name="51dc" class="graf graf--p graf-after--h4">Once user is successfully logged in, we want to redirect to <code class="markup--code markup--p-code">Home</code> page. And when user logs out, we want to come back to <code class="markup--code markup--p-code">Login</code> page.</p><p name="a14b" class="graf graf--p graf-after--p">On <code class="markup--code markup--p-code">Login</code> page, <code class="markup--code markup--p-code">history.push</code> redirects user to next page after successful login</p><p name="1cea" class="graf graf--p graf-after--p">On <code class="markup--code markup--p-code">Login</code> page,<code class="markup--code markup--p-code">history.goBack()</code> takes you back to previous page after logout is successful.</p><h4 name="4d4a" class="graf graf--h4 graf-after--p">4.5 User’s profile information</h4><p name="2662" class="graf graf--p graf-after--h4">User’s profile info is returned in auth response in this format</p><pre name="2f3e" class="graf graf--pre graf-after--p">{"authentication": {<br>  "accessToken": "xxxxxxxxxx", <br>"idToken": "xxxxxxxxxxxx"},<br>"email": "<a href="mailto:abhijeetrathoreiitd@gmail.com"  class="markup--anchor markup--pre-anchor" rel="nofollow"    target="_blank">abhijeetrathoreiitd@gmail.com</a>",<br>"familyName": "Rathore",<br>"givenName": "Abhijeet",<br>"id": "104xxxxxxxxx2852",<br>"imageUrl": "<a href="https://lh3.googleusercontent.com/a-/AAuE7mAFAYbG5aiKj1RGsZEq-pnteIcLe-XGib4kn7eZsQ=s96-c"  class="markup--anchor markup--pre-anchor" rel="nofollow noopener"    target="_blank">https://lh3.googleusercontent.com/a-/AAuE7XXXXXXXXXXXXEq-pnteIcLe-XGib4kn7eZsQ=s96-c</a>",<br>"name": "Abhijeet Rathore",<br>"serverAuthCode": "XXXXXXXX"<br>}</pre><h3 name="4e1e" class="graf graf--h3 graf-after--pre"><strong class="markup--strong markup--h3-strong">Step 5</strong>: Prepare and Test on&nbsp;Web</h3><p name="a909" class="graf graf--p graf-after--h3">To implement Google Auth in web app with Capacitor, add <code class="markup--code markup--p-code"><a href="https://developers.google.com/identity/sign-in/web/sign-in#specify_your_apps_client_id"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">clientId</a></code> meta tag to head in <code class="markup--code markup--p-code">public/index.html</code> file.</p><pre name="e77a" class="graf graf--pre graf-after--p">&lt;meta name="google-signin-client_id" content="{your client id here}"&gt;</pre><p name="6969" class="graf graf--p graf-after--pre">With all the above code in place, web Google login can be tested in <code class="markup--code markup--p-code">ionic serve</code> itself. Here’s how it will work on browser</p><figure tabindex="0" contenteditable="false" name="fbc7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 518px; max-height: 733px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 141.5%;"></div><img class="graf-image" data-image-id="1*f929nQSCWwqglKwe3psU5w.gif" data-width="518" data-height="733" alt="Google Auth implementation in Web-app using Capacitor" src="https://cdn-images-1.medium.com/max/800/1*f929nQSCWwqglKwe3psU5w.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Google Auth implementation in Web-app using Capacitor</figcaption></figure><p name="7ad3" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>: At the time of writing this blog, V1.2.1 of Google Auth plugin, signOut function is missing for Web. If you want to fix this, go to <code class="markup--code markup--p-code u-paddingRight0 u-marginRight0">node_modules/<a href="http://twitter.com/codetrix"  class="markup--anchor markup--p-anchor" title="Twitter profile for @codetrix" rel="noopener"    target="_blank">@codetrix</a>-studio/capacitor-google-auth/dist/esm/definitions.d.ts</code> and add a <strong class="markup--strong markup--p-strong">signOut</strong> declaration as</p><pre name="a1ae" class="graf graf--pre graf-after--p">signOut(): Promise&lt;{value: string;}&gt;;</pre><h3 name="7b29" class="graf graf--h3 graf-after--pre">Step 6&#8202;—&#8202;Build and Test your app on&nbsp;Android</h3><p name="8989" class="graf graf--p graf-after--h3">To build the app on Android, run these commands</p><pre name="b71a" class="graf graf--pre graf-after--p">// Add android platform<br>$ npx cap add android<br>// Copy all changes to Android platform<br>$ npx cap sync<br>// Open the project in Android studio<br>$ npx cap open android</pre><p name="ad06" class="graf graf--p graf-after--pre">In Android studio, locate file <code class="markup--code markup--p-code">android/app/src/main/java/**/**/MainActivity.java</code>, and add the plugin to the initialization list:</p><pre name="1ecc" class="graf graf--pre graf-after--p">import com.codetrixstudio.capacitor.GoogleAuth.GoogleAuth<br>this.init(savedInstanceState, new ArrayList&lt;Class&lt;? extends Plugin&gt;&gt;() `{{<br>  ...<br>  add(GoogleAuth.class);<br>  ...<br>}}`);</pre><figure tabindex="0" contenteditable="false" name="ecaf" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 326px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.6%;"></div><img class="graf-image" data-image-id="1*mN4SJSkVzC2XAaY0aJQ_XQ.png" data-width="1104" data-height="514" alt="Import Google Auth plugin in Android Project" src="https://cdn-images-1.medium.com/max/800/1*mN4SJSkVzC2XAaY0aJQ_XQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Import Google Auth plugin in Android&nbsp;Project</figcaption></figure><p name="90cb" class="graf graf--p graf-after--figure">Also, add the following in your <code class="markup--code markup--p-code">strings.xml</code> file in Android Project</p><pre name="3e95" class="graf graf--pre graf-after--p">&lt;resources&gt;<br>  &lt;string name="server_client_id"&gt;Your Web Client ID&lt;/string&gt;<br>&lt;/resources&gt;</pre><p name="f517" class="graf graf--p graf-after--pre">Build the app on Android device using Android studio. You should be able to login via Google, and reach the inner page where you see the user information. Following GIF shows the login flow in my OnePlus device.</p><figure tabindex="0" contenteditable="false" name="a7a3" class="graf graf--figure graf-after--p"><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*VQ_RkOw_UGd5vNrtsXhp4w.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*VQ_RkOw_UGd5vNrtsXhp4w.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Google login in Ionic React Capacitor App</figcaption></figure><h3 name="d8bc" class="graf graf--h3 graf-after--figure">Step 7— Build and Test your app on&nbsp;iOS</h3><p name="ada6" class="graf graf--p graf-after--h3">To build the app on iOS, run these commands</p><pre name="6896" class="graf graf--pre graf-after--p">// Add android platform<br>$ npx cap add ios<br>// Copy all changes to iOS platform<br>$ npx cap sync<br>// Open the project in XCode<br>$ npx cap open ios</pre><ul class="postList"><li name="c96b" class="graf graf--li graf-after--pre">Place your downloaded<code class="markup--code markup--li-code">GoogleService.plist</code> in <code class="markup--code markup--li-code">ios/App</code> folder</li><li name="2ce6" class="graf graf--li graf-after--li">Find <code class="markup--code markup--li-code">REVERSED_CLIENT_ID</code> from the <code class="markup--code markup--li-code">GoogleService.plist</code> and Add it as a URL scheme in <code class="markup--code markup--li-code">info.plist</code> of Xcode</li></ul><figure tabindex="0" contenteditable="false" name="42a3" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 351px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.1%;"></div><img class="graf-image" data-image-id="1*01o4BI4x-eOojeHOUEIJeQ.png" data-width="1027" data-height="515" src="https://cdn-images-1.medium.com/max/800/1*01o4BI4x-eOojeHOUEIJeQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add REVERSE_CLIENT_ID as URL&nbsp;scheme</figcaption></figure><p name="767b" class="graf graf--p graf-after--figure">Build the app on iOS device or Simulator using Xcode. You should be able to login via Google, and reach the inner page where you see the user information. Following GIF shows the login flow in my OnePlus device.</p><figure tabindex="0" contenteditable="false" name="fa38" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 643px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 183.7%;"></div><img class="graf-image" data-image-id="1*G4TvVioAeO8I6rYeR0oPqQ.gif" data-width="350" data-height="643" src="https://cdn-images-1.medium.com/max/800/1*G4TvVioAeO8I6rYeR0oPqQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Google login in Ionic React Capacitor App&#8202;—&#8202;iOS</figcaption></figure><h3 name="49f9" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="40e8" class="graf graf--p graf-after--h3">In this post you learnt how to implement Google login in your Ionic React Capacitor app. Social logins are very important part of your apps, as they make users trust your apps more. It is also easy to use, and users don’t have to remember any passwords. You can always link the Social logins with your server as well.</p><p name="0658" class="graf graf--p graf-after--p">We also tested the Authentication on all three devices&#8202;—&#8202;Android, iOS and Web. This creates a complete set of devices a user can use with your app.</p><blockquote name="9ed2" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Code for this tutorial is available on Github repo </em></strong><a href="https://github.com/enappd/ionic-react-capacitor-google-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">ionic-react-capacitor-google-login</em></strong></a></blockquote><h3 name="8963" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="3e7f" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Google Login in Ionic React Capacitor app, you can also try following blogs for other <strong class="markup--strong markup--p-strong">Ionic apps</strong></p><h4 name="35e7" class="graf graf--h4 graf-after--p">Ionic React Capacitor</h4><ul class="postList"><li name="5a6e" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/facebook-login-in-ionic-react-capacitor-apps/118"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook Login in Ionic React Capacitor Apps</a></li><li name="f81a" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-react-capacitor-app/121"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter Login in Ionic React Capacitor Apps</a></li><li name="8885" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-ionic-apps-in-react-using-capacitor/26"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">How to make basic apps in ionic-react</a>-capacitor</li><li name="6594" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Camera and Image gallery in Ionic-React-Capacitor</a></li><li name="4f4f" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/111"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Push notification in Ionic-React-Capacitor apps</a></li><li name="c5a7" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/play-music-in-ionic-capacitor-apps/112"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Playing Music in Ionic Capacitor apps</a></li><li name="66fd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Adding Icon and Splash in Ionic React Capacitor apps</a></li><li name="d39b" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/html5-games-in-ionic-capacitor-using-phaser/115"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create HTML5 games in Ionic Capacitor apps using Phaser</a></li></ul><p name="9ed9" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 React app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic React Full App</a></p><figure tabindex="0" contenteditable="false" name="074b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="0*AxzmDBUVguZ1kw_i.jpeg" data-width="600" data-height="600" src="https://cdn-images-1.medium.com/max/800/0*AxzmDBUVguZ1kw_i.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 React Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="9d27" class="graf graf--h4 graf-after--figure">Ionic Angular</h4><ul class="postList"><li name="85a8" class="graf graf--li graf-after--h4">Ionic 4 Payment Gateways&#8202;—&#8202;<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"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <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"    target="_blank">RazorPay</a></li><li name="5acf" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="dfc7" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<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</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <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</a></li><li name="6667" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="91ad" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <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"    target="_blank">Pedometer</a></li><li name="a628" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="779c" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <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"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="38ee" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="0711" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="12ae" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 Angular app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="001a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 560px; max-height: 353px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="0*lqQcM0JyxN7nFQdL.jpeg" data-width="560" data-height="353" src="https://cdn-images-1.medium.com/max/800/0*lqQcM0JyxN7nFQdL.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 App with huge number of layouts and&nbsp;features</figcaption></figure><p name="e67a" class="graf graf--p graf--empty graf-after--figure graf--trailing" ><br></p></div></div></section></div></article></main>