Integrate Google Login in React Native apps with Firebase (Android)
Tags: reactnative, login, google, firebase
Published: 2020-03-27 03:36:44

<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="b7d8" 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="8880" class="graf graf--p graf-after--figure">In this post, we’ll learn how to setup <strong class="markup--strong markup--p-strong">Google Login in React Native apps using Firebase</strong>. We’ll implement the authentication using <code class="markup--code markup--p-code">react-native-google-signin</code> npm package, and then test it <strong class="markup--strong markup--p-strong">on Android</strong>.</p><blockquote name="d7fb" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available here&#8202;—&#8202;</em></strong><a href="https://github.com/enappd/react-native-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">React-Native-google-login (android branch)</em></strong></a></blockquote><p name="7dac" class="graf graf--p graf-after--blockquote">I have another blog explaining how to implement <a href="https://enappd.com/blog/google-login-in-react-native-apps-with-firebase/88"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Google Login in React Native for iOS, using Firebase.</strong></a></p><p name="7bde" class="graf graf--p graf-after--p">If you have read the iOS version already, skip the next few sections and jump to <strong class="markup--strong markup--p-strong">Steps for Google authentication </strong>directly<strong class="markup--strong markup--p-strong">.</strong></p><h3 name="8e29" class="graf graf--h3 graf-after--p">Google login&#8202;—&#8202;What and&nbsp;why</h3><p name="9b8f" 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="432c" 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="f8c9" 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="89bb" 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="ace5" 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="8449" 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="fcb0" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Trust</strong>&#8202;—&#8202;Nowadays, people generally trust social logins more over custom email logins. Social logins follows standard privacy protocols and hence are more reliable for information sharing</li></ul><h3 name="c896" class="graf graf--h3 graf-after--li">Authentication in React&nbsp;Native</h3><p name="3767" class="graf graf--p graf-after--h3">React Native has been around for around 4 years, and has been very popular among developers for its ease of usage over Swift / Java. Also you get to keep a single source code for both Android and iOS app. What more can a developer ask for!</p><p name="37ab" class="graf graf--p graf-after--p">React Native 0.60 is the latest version (at the time of writing this post), and is much more reliable and robust than previous versions. It also includes breaking changes related to AndroidX, but don’t worry we’ll create an Android test app as well.</p><p name="439b" class="graf graf--p graf-after--p">There are several ways of Authentication in React Native Apps</p><ul class="postList"><li name="e038" 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="d5d2" 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="fc7f" 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.</li></ul><p name="6a64" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Firebase</em></strong> is the most popular among these for mobile apps, which we’ll study in next section</p><h3 name="2976" class="graf graf--h3 graf-after--p">Firebase</h3><p name="5f73" 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"    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="4ed4" 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="63c3" class="graf graf--li graf-after--p">Real-time database</li><li name="6f5b" class="graf graf--li graf-after--li">Email Authentication</li><li name="8da5" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Social logins</strong></li><li name="e0ac" class="graf graf--li graf-after--li">In-app messages</li><li name="8501" class="graf graf--li graf-after--li">Push notifications</li><li name="9746" class="graf graf--li graf-after--li">Analytics</li><li name="7552" class="graf graf--li graf-after--li">Crashlytics</li><li name="1406" class="graf graf--li graf-after--li">Remote config</li></ul><p name="0d89" class="graf graf--p graf-after--li">Firebase is quickly growing to become the most popular mobile app back-end platform.</p><h3 name="81e6" class="graf graf--h3 graf-after--p">Firebase Authentication Options</h3><p name="bb3e" class="graf graf--p graf-after--h3">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="4506" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 393px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.10000000000001%;"></div><img class="graf-image" data-image-id="0*X3mXZsyay3Q1ZUVo.png" data-width="700" data-height="393" src="https://cdn-images-1.medium.com/max/800/0*X3mXZsyay3Q1ZUVo.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="8e54" 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="9d7a" class="graf graf--h3 graf-after--p">Steps for Google authentication</h3><p name="0569" class="graf graf--p graf-after--h3">We will follow these step-by-step instructions to create our React Native app with Google authentication</p><p name="f003" class="graf graf--p graf-after--p">Step 1: Create Firebase Project and Add android platform</p><p name="8fd1" class="graf graf--p graf-after--p">&zwnj;Step 2: Enable Google Sign-In in Firebase project</p><p name="5259" class="graf graf--p graf-after--p">Step 3: Create a Basic React Native app</p><p name="e359" class="graf graf--p graf-after--p">&zwnj;Step 4: Install the <code class="markup--code markup--p-code">react-native-google-signin</code> package for Google Login</p><p name="e4a4" class="graf graf--p graf-after--p">Step 5: Implement Google auth functions in RN app</p><p name="6f5f" class="graf graf--p graf-after--p">Step 6: Test your app on Android</p><p name="f1bb" class="graf graf--p graf-after--p">Step 7: Use Firebase to store user info and handle Auth</p><p name="5302" class="graf graf--p graf-after--p">So let’s jump right in</p><h3 name="8fbd" class="graf graf--h3 graf-after--p">Step 0: Create a SHA-1 Signature</h3><blockquote name="b13f" class="graf graf--blockquote graf-after--h3">This is an important step where many developers commit mistake. That’s why Step 0</blockquote><p name="29a5" class="graf graf--p graf-after--blockquote">This is a way for the app and Firebase to recognize the system from which the app was developed. It is generated based on the system and your<code class="markup--code markup--p-code">keystore</code> file.</p><p name="de1c" class="graf graf--p graf-after--p">Generate the key using following command</p><pre name="652b" class="graf graf--pre graf-after--p">$ keytool -exportcert -keystore &lt;&lt;keystore file location&gt;&gt; -list -v</pre><p name="1657" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Important&nbsp;: </strong>This is where many people commit mistake. The <code class="markup--code markup--p-code">keystore</code> file in the above command is NOT the default <code class="markup--code markup--p-code">keystore</code> file of your system. React Native automatically generates a <code class="markup--code markup--p-code">debug.keystore</code> for your Android project, which resides in Android project folder</p><figure tabindex="0" contenteditable="false" name="4567" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 302px; max-height: 321px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 106.3%;"></div><img class="graf-image" data-image-id="1*KKAaGC0kVAsdf13uXgANGg.png" data-width="302" data-height="321" src="https://cdn-images-1.medium.com/max/800/1*KKAaGC0kVAsdf13uXgANGg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="cc80" class="graf graf--p graf-after--figure">Use this <code class="markup--code markup--p-code">keystore</code> file location to generate SHA-1 signature. Keep the signature safe for further steps. SHA-1 looks like this</p><pre name="f87e" class="graf graf--pre graf-after--p">RE:YY:16:06:XX:XX:RR:2C:XX:0D:54:XX:G6:BA:XX:F3:XX:AB:F6:XX</pre><h4 name="0416" class="graf graf--h4 graf-after--pre">No I want only one debug.keystore in my life&nbsp;!&nbsp;😠</h4><p name="84a0" class="graf graf--p graf-after--h4">If however, you don’t want to include this <code class="markup--code markup--p-code">keystore</code> and want to generate the signature using default <code class="markup--code markup--p-code">keystore</code> file, then you need to update the default <code class="markup--code markup--p-code">keystore</code> file’s location in</p><p name="1181" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">android → app → build.gradle → signingConfigs</strong></p><p name="1e9b" class="graf graf--p graf-after--p">Enter the correct values in<code class="markup--code markup--p-code">signingConfigs</code> for your own key</p><pre name="a2e2" class="graf graf--pre graf-after--p">signingConfigs {<br>  debug {<br>  storeFile file('debug.keystore')<br>  storePassword 'android'<br>  keyAlias 'androiddebugkey'<br>  keyPassword 'android'<br> }<br>}</pre><h3 name="ce2f" class="graf graf--h3 graf-after--pre">Step 1: Create Firebase&nbsp;Project</h3><p name="5343" class="graf graf--p graf-after--h3">For authentication, we need a back-end. For this tutorial, Firebase is our back-end, so we need to configure few things in Firebase. First of all we’ll create a new Firebase project and new app inside it.</p><h4 name="a1c7" class="graf graf--h4 graf-after--p">1.1 If you don’t have an existing Firebase&nbsp;Project</h4><p name="760a" class="graf graf--p graf-after--h4">If you already have a Firebase project, skip to step 1.2. Otherwise, create a new Firebase project by going to<a href="https://firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> Firebase Console</a>. Give your project a name and that’s it&nbsp;!</p><figure tabindex="0" contenteditable="false" name="d76e" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.49999999999999%;"></div><img class="graf-image" data-image-id="1*oxNBmImt5P-OnbKCz5MGiA.png" data-width="1388" data-height="798" src="https://cdn-images-1.medium.com/max/800/1*oxNBmImt5P-OnbKCz5MGiA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="58e1" class="graf graf--h4 graf-after--figure">1.2 Create and attach new app to the&nbsp;project</h4><p name="7304" class="graf graf--p graf-after--h4">Now that the project is created, create a new Android app in the project dashboard.</p><figure tabindex="0" contenteditable="false" name="a2cd" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 184px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 26.200000000000003%;"></div><img class="graf-image" data-image-id="1*G0TF-UwnSuuvcOWpWh1uiQ.png" data-width="1387" data-height="364" src="https://cdn-images-1.medium.com/max/800/1*G0TF-UwnSuuvcOWpWh1uiQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add new app to the&nbsp;project</figcaption></figure><p name="341e" class="graf graf--p graf-after--figure">Add the <code class="markup--code markup--p-code">SHA1</code> key you generated in Step 0 and add it in <code class="markup--code markup--p-code">Debug signing certificate SHA-1</code> field</p><figure tabindex="0" contenteditable="false" name="a04f" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 403px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.599999999999994%;"></div><img class="graf-image" data-image-id="1*x45CZ61SIYVPEp59vW8Qag.png" data-width="1387" data-height="799" src="https://cdn-images-1.medium.com/max/800/1*x45CZ61SIYVPEp59vW8Qag.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="7d3b" class="graf graf--p graf-after--figure">Just mention the correct package name of your app in the <code class="markup--code markup--p-code">Android package name</code>input. For me, it is <strong class="markup--strong markup--p-strong">com.rngooglelogin</strong>. Give it a nickname to remember.</p><p name="c9cb" class="graf graf--p graf-after--p">Next step, download the <code class="markup--code markup--p-code">google-services.json</code> file and put it in the <code class="markup--code markup--p-code">android/app</code>folder of your project. You can skip rest of the steps for now. Your app is created now, and you should see it in the dashboard.</p><h3 name="9549" class="graf graf--h3 graf-after--p">&zwnj;Step 2: Enable Google Login in&nbsp;Firebase</h3><p name="ca36" class="graf graf--p graf-after--h3">Now that your app is connect to Firebase project, we need to go into our Firebase console and enable Google authentication for our app.</p><p name="c76d" class="graf graf--p graf-after--p">&zwnj;Once you’re inside the app’s dashboard, you’re going to go into</p><p name="ab21" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Authentication → Sign-In Method → Google</strong></p><p name="2f6c" class="graf graf--p graf-after--p">and click the <code class="markup--code markup--p-code">Enable</code> toggle.</p><figure tabindex="0" contenteditable="false" name="8ab9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 403px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.599999999999994%;"></div><img class="graf-image" data-image-id="1*07lM4VGKAAzkXISY-bXQiQ.png" data-width="1388" data-height="799" src="https://cdn-images-1.medium.com/max/800/1*07lM4VGKAAzkXISY-bXQiQ.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</figcaption></figure><p name="3010" class="graf graf--p graf-after--figure">Give a name to for your <strong class="markup--strong markup--p-strong">Auth consent screen </strong>and save your <strong class="markup--strong markup--p-strong">web client Id</strong> as well. This will be used to integrate the React Native app with Firebase.</p><h3 name="1297" class="graf graf--h3 graf-after--p">Step 3: Create a basic React Native&nbsp;app</h3><p name="f682" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>.</p><blockquote name="cc11" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">At the time of this post, I have React-Native version 0.60</strong></blockquote><p name="2507" class="graf graf--p graf-after--blockquote">Create a blank react-native app (Replace <code class="markup--code markup--p-code">myApp</code> with your own name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init RNGoogleLogin</pre><p name="c53e" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. (let’s run Android)</p><p name="24eb" class="graf graf--p graf-after--p">Let’s run the app in Android using (I’m using a real device)</p><pre name="4f57" class="graf graf--pre graf-after--p">$ react-native run-android</pre><p name="6729" class="graf graf--p graf-after--pre">You’ll see the default start screen</p><figure tabindex="0" contenteditable="false" name="c76c" 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*TnZfGsKdsWGBUac-0YutpA.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*TnZfGsKdsWGBUac-0YutpA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Default start screen for React Native&nbsp;app</figcaption></figure><p name="8373" class="graf graf--p graf-after--figure">Change the UI of this front page by changing <code class="markup--code markup--p-code">App.js</code> and the page will look like this. (The <strong class="markup--strong markup--p-strong">Google login button</strong> here actually comes after the package integration, as explained in next section)</p><figure tabindex="0" contenteditable="false" name="5ae5" 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*ldgtyN02YvYqPDcyuLxLYg.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*ldgtyN02YvYqPDcyuLxLYg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Modified home page for our sample React Native&nbsp;app</figcaption></figure><h3 name="c772" class="graf graf--h3 graf-after--figure">Step 4: Install the package for Google&nbsp;Login</h3><p name="9d55" class="graf graf--p graf-after--h3">To enable Google Login, we’ll install a package named <a href="https://github.com/react-native-community/react-native-google-signin"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">react-native-google-signin</strong></a><strong class="markup--strong markup--p-strong">. </strong>This is a widely used package for Google Login, and also very reliable.</p><h4 name="30f8" class="graf graf--h4 graf-after--p">4.1 Install&nbsp;package</h4><p name="4e93" class="graf graf--p graf-after--h4">Install the package using</p><pre name="f98a" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">yarn add react-native-google-signin</code></pre><p name="c707" class="graf graf--p graf-after--pre">Link the package with your platforms using</p><pre name="783f" class="graf graf--pre graf-after--p">$ react-native link react-native-google-signin</pre><p name="582b" class="graf graf--p graf-after--pre">Note: For React Native ≥0.60, you don’t need to manually link most packages with React Native. It is done automatically on app build</p><h4 name="99f7" class="graf graf--h4 graf-after--p">4.2 Make sure you have latest SDK and other android&nbsp;packages</h4><p name="14a2" class="graf graf--p graf-after--h4">You should always try to stay updated with latest Android SDK and other packages. At the time of this post, my Android SDK is 9.0 (Pie) and here’s a list of my other packages</p><figure tabindex="0" contenteditable="false" name="e14b" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 370px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 52.900000000000006%;"></div><img class="graf-image" data-image-id="1*f5DiUCEMJJam8Vs9-szRjQ.png" data-width="907" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*f5DiUCEMJJam8Vs9-szRjQ.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="eb15" class="graf graf--h4 graf-after--figure">4.3 Add google-services.json file to&nbsp;project</h4><p name="bc49" class="graf graf--p graf-after--h4">If you haven’t done it yet, download the <code class="markup--code markup--p-code">google-services.json</code> file from your Firebase project and put it in the <code class="markup--code markup--p-code">android/app</code>folder of your RN project.</p><figure tabindex="0" contenteditable="false" name="949f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 302px; max-height: 321px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 106.3%;"></div><img class="graf-image" data-image-id="1*KKAaGC0kVAsdf13uXgANGg.png" data-width="302" data-height="321" src="https://cdn-images-1.medium.com/max/800/1*KKAaGC0kVAsdf13uXgANGg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Place google-services.json in android/app folder</figcaption></figure><h4 name="3632" class="graf graf--h4 graf-after--figure">4.4 Update Android configuration files</h4><ul class="postList"><li name="d5a7" class="graf graf--li graf-after--h4">Update <code class="markup--code markup--li-code">android/build.gradle</code> with latest versions. My configuration is</li></ul><pre name="3d63" class="graf graf--pre graf-after--li"><strong class="markup--strong markup--pre-strong">buildscript</strong> {<br>    ext {<br>        buildToolsVersion = "28.0.3"<br>        minSdkVersion = 16<br>        compileSdkVersion = 28<br>        targetSdkVersion = 28<br>        supportLibVersion = "28.0.0"<br>        googlePlayServicesAuthVersion = "17.0.0" // &lt;--- use this version or newer<br>    }<br>...<br><strong class="markup--strong markup--pre-strong">dependencies</strong> {<br>        classpath 'com.android.tools.build:gradle:3.4.1' // &lt;--- use this version or newer<br>        classpath 'com.google.gms:google-services:4.3.0' // &lt;--- use this version or newer<br>    }<br>...<br><strong class="markup--strong markup--pre-strong">allprojects</strong> {<br>    repositories {<br>        mavenLocal()<br>        google() // &lt;--- make sure this is included<br>        jcenter()<br>        maven {<br>            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm<br>            url "$rootDir/../node_modules/react-native/android"<br>        }<br>    }<br>}</pre><ul class="postList"><li name="588a" class="graf graf--li graf-after--pre">Update <code class="markup--code markup--li-code">android/app/build.gradle</code> dependencies. My configuration looks like this</li></ul><pre name="388c" class="graf graf--pre graf-after--li">...<br>dependencies {<br>    implementation fileTree(dir: "libs", include: ["*.jar"])<br>    implementation "com.android.support:appcompat-v7:23.0.1"<br>    implementation "com.facebook.react:react-native:+"<br>    implementation(project(":react-native-google-signin"))<br>}<br>apply plugin: 'com.google.gms.google-services' <strong class="markup--strong markup--pre-strong">// &lt;--- this should be the last line</strong></pre><ul class="postList"><li name="c24e" class="graf graf--li graf-after--pre">Check whether <code class="markup--code markup--li-code">react-native link</code> linked the native module in <code class="markup--code markup--li-code">android/settings.gradle</code> you should have</li></ul><pre name="99fb" class="graf graf--pre graf-after--li">...<br>include ':react-native-google-signin', ':app'<br>project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')</pre><ul class="postList"><li name="454f" class="graf graf--li graf-after--pre">For older versions of React Native, in <code class="markup--code markup--li-code">MainApplication.java</code> you should have the following code. For my version 0.60, there is no need to edit <code class="markup--code markup--li-code">MainApplication.java</code></li></ul><pre name="15fc" class="graf graf--pre graf-after--li">import co.apptailor.googlesignin.RNGoogleSigninPackage;  // &lt;--- import<br>public class MainApplication extends Application implements ReactApplication {<br>  ......<br>  @Override<br>    protected List&lt;ReactPackage&gt; getPackages() {<br>      return Arrays.&lt;ReactPackage&gt;asList(<br>          new MainReactPackage(),<br>          new RNGoogleSigninPackage() // &lt;-- this needs to be in the list<br>      );<br>    }<br>  ......<br>}</pre><h3 name="a00c" class="graf graf--h3 graf-after--pre">Step 5: Implement Google auth functions in RN&nbsp;app</h3><p name="90ff" class="graf graf--p graf-after--h3">Now that the app is all connected to Google Auth, let’s write the actual code to call login / logout etc functions.</p><p name="6fa9" class="graf graf--p graf-after--p">First of all, I have created a separate file <code class="markup--code markup--p-code">LoginController.js</code> and imported it in <code class="markup--code markup--p-code">App.js</code>&nbsp;, just to maintain a good code structure.</p><figure tabindex="0" contenteditable="false" name="5e09" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 320px; max-height: 534px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 166.9%;"></div><img class="graf-image" data-image-id="1*M3YY9WkBmpmz6H-ZAiNKMw.png" data-width="320" data-height="534" src="https://cdn-images-1.medium.com/max/800/1*M3YY9WkBmpmz6H-ZAiNKMw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="c15f" class="graf graf--p graf-after--figure">My <code class="markup--code markup--p-code">App.js</code> looks like following (nothing fancy, I’m not even gonna waste a gist here)</p><pre name="44a1" class="graf graf--pre graf-after--p">import React, { Fragment } from 'react';<br>import LoginController from './LoginController';<br>const App = () =&gt; {return (&lt;LoginController/&gt;);};<br>export default App;</pre><p name="7af5" class="graf graf--p graf-after--pre">Yes, that’s it 😆</p><h4 name="789b" class="graf graf--h4 graf-after--p">5.1 Implement Google Login&nbsp;button</h4><p name="a29c" class="graf graf--p graf-after--h4">In the <code class="markup--code markup--p-code">LoginController.js</code>&nbsp;, I add Google login button using following code</p><pre name="0b8e" class="graf graf--pre graf-after--p">import { GoogleSignin, GoogleSigninButton, statusCodes } from 'react-native-google-signin';<br>.....(inside render)<br>&lt;GoogleSigninButton<br>style=`{{ width: 192, height: 48 }}`<br>size={GoogleSigninButton.Size.Wide}<br>color={GoogleSigninButton.Color.Dark}<br>onPress={this._signIn}<br>disabled={this.state.isSigninInProgress} /&gt;<br>....</pre><p name="951e" class="graf graf--p graf-after--pre">This shows the beautiful Google Button as per their marketing guidelines</p><h4 name="69d6" class="graf graf--h4 graf-after--p">5.2 Configure Sign In on App&nbsp;start</h4><p name="5576" class="graf graf--p graf-after--h4">Before calling <code class="markup--code markup--p-code">signIn</code> method, we need to call <code class="markup--code markup--p-code">configure</code> method, which sets the parameters for Google Auth. You can call this method in <code class="markup--code markup--p-code">componentDidMount</code></p><pre name="e518" class="graf graf--pre graf-after--p">GoogleSignin.configure({<br>scopes: ['https://www.googleapis.com/auth/drive.readonly'], webClientId: 'XXXXXX-qXXXXXn7umiXXXXXXe1ekgubrXXe.apps.googleusercontent.com', <br>offlineAccess: true, <br>hostedDomain: '', <br>loginHint: '', <br>forceConsentPrompt: true, <br>accountName: '',<br>iosClientId: 'XXXXXX-krv1hjXXXXXXp51pisuc1104q5XXXXXXe.apps.googleusercontent.com'<br>});</pre><p name="2f12" class="graf graf--p graf-after--pre">Let’s look at this in more detail</p><ul class="postList"><li name="4bc9" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">scopes</strong>: This tell what API you want to access on behalf of the user, leave it blank for just email and profile access. For more API access, you might have to get your app verified, or you’ll see this warning when logging in</li></ul><figure tabindex="0" contenteditable="false" name="a97d" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 623px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*1RCfBMSS24cIZGdqs0Bf5Q.png" data-width="350" data-height="623" src="https://cdn-images-1.medium.com/max/800/1*1RCfBMSS24cIZGdqs0Bf5Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Verification message for broader&nbsp;scopes</figcaption></figure><ul class="postList"><li name="b6ed" class="graf graf--li graf-after--figure"><strong class="markup--strong markup--li-strong">webClientId</strong>: Client ID of type WEB for your server needed to verify user ID and offline access. This is what we copied from Firebase console in <strong class="markup--strong markup--li-strong">Step 2</strong></li><li name="5b0b" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">offlineAccess</strong>: If you want to access Google API on behalf of the user from your server</li><li name="3c77" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">hostedDomain</strong>: Specifies a hosted domain restriction for auth</li><li name="7613" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">loginHint</strong>: Only for iOS&#8202;—&#8202;The user’s ID, or email address, to be prefilled in the authentication UI if possible. (<a href="https://developers.google.com/identity/sign-in/ios/api/interface_g_i_d_sign_in.html#a0a68c7504c31ab0b728432565f6e33fd"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">See docs here</a>)</li><li name="6a61" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">forceConsentPrompt</strong>: Only for Android&#8202;—&#8202;if you want to show the authorization prompt at each login.</li><li name="d71a" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">accountName</strong>: Only for Android&#8202;—&#8202;Specifies an account name on the device that should be used</li><li name="62fb" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">iosClientId</strong>: Only for iOS&#8202;—&#8202;Optional, if you want to specify the client ID of type iOS (otherwise, it is taken from <code class="markup--code markup--li-code">GoogleService-Info.plist</code>). Of course, if you omit this, your<code class="markup--code markup--li-code">GoogleService-Info.plist</code> needs to be correctly configured in XCode.</li></ul><h4 name="5108" class="graf graf--h4 graf-after--li">5.3 Sign In&nbsp;Method</h4><p name="38ec" class="graf graf--p graf-after--h4">The <code class="markup--code markup--p-code">signIn</code> method called from the Google Login button goes like this</p><figure tabindex="0" contenteditable="false" name="9346" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/fcddce5ddd28a3c85f8867853a7eb3a7.js %}</div></div></figure><p name="8212" class="graf graf--p graf-after--figure">The <code class="markup--code markup--p-code">userinfo</code> is saved in the state and hence can work to take user to next page, or change elements in the same page. For the sake of simplicity, I won’t put in another page and trouble you with concepts of routing. Instead, we’ll just change the elements of our homepage when user gets logged in. Sounds fair&nbsp;? Cool&nbsp;!</p><h4 name="3a4d" class="graf graf--h4 graf-after--p">5.4 Sign Out&nbsp;Method</h4><p name="7cf3" class="graf graf--p graf-after--h4">The sing out method looks like this</p><figure tabindex="0" contenteditable="false" name="8baf" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/67294cfae48a0f91a84e5dea959c6646.js %}</div></div></figure><h4 name="cb0b" class="graf graf--h4 graf-after--figure">5.5 Silent&nbsp;login</h4><p name="794d" class="graf graf--p graf-after--h4">When user logs in once, on next app start you don’t want user to login again. Hence you try to silently login the user. If user is already logged in and has a valid session, the user will silently login. You can call this method as well in <code class="markup--code markup--p-code">componentDidMount</code>&nbsp;. Remember to call <code class="markup--code markup--p-code">configure</code> method before this as well. If the user does not have a valid session, this method will return <code class="markup--code markup--p-code">null</code> and you can ask user to sign in</p><figure tabindex="0" contenteditable="false" name="198a" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/dc24f7ba9808b552c390d92dc68e69c8.js %}</div></div></figure><p name="39e8" class="graf graf--p graf-after--figure">There are more methods like <code class="markup--code markup--p-code">isSignedIn()</code>&nbsp;, <code class="markup--code markup--p-code">getCurrentUser()</code>&nbsp;, <code class="markup--code markup--p-code">getTokens()</code> etc, whose details you can get on the <a href="https://github.com/react-native-community/react-native-google-signin"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">package’s Github</a>.</p><p name="aa8f" class="graf graf--p graf-after--p">Overall, my <code class="markup--code markup--p-code">LoginController.js</code> file looks like this (a bit long, I know)</p><figure tabindex="0" contenteditable="false" name="cda4" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/cb0d83a1b4025ee6e26507b7fe922d9a.js %}</div></div></figure><h3 name="953e" class="graf graf--h3 graf-after--figure">Step 6: Test your app on Android&nbsp;device</h3><p name="0941" class="graf graf--p graf-after--h3">Let’s now build the app for Android device. I am using a device, but you can always use a simulator as well.</p><p name="3074" class="graf graf--p graf-after--p">Run the app on the device using</p><pre name="e96a" class="graf graf--pre graf-after--p">$ react-native run-android</pre><p name="0dab" class="graf graf--p graf-after--pre">Here’s how my Google Login app works on my device</p><figure tabindex="0" contenteditable="false" name="8e21" 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*ZpU-VhRUiF7-CdzZrv9Dxg.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*ZpU-VhRUiF7-CdzZrv9Dxg.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 React Native Android&nbsp;app</figcaption></figure><p name="0179" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&nbsp;: If you have more scopes than just basic info, you’ll see an <code class="markup--code markup--p-code">App Not Verified</code> screen. You can skip the warning and still login. But that warning won’t look good to your user. You might consider <a href="https://support.google.com/cloud/answer/9110914?hl=en"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">getting your app verified</a> if you get that warning.</p><p name="4f9d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Troubleshooting</strong>&nbsp;: If you are facing any issues in the above setup, there are few good answers to some common questions <a href="https://github.com/react-native-community/react-native-google-signin/blob/master/docs/android-guide.md"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a></p><h4 name="9d35" class="graf graf--h4 graf-after--p">UserInfo</h4><p name="ebaa" class="graf graf--p graf-after--h4">After login, here’s how my user data looks like in essence</p><figure tabindex="0" contenteditable="false" name="f17c" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/a5703f224922708fbac192bcba60ce9f.js %}</div></div></figure><p name="c1d9" class="graf graf--p graf-after--figure">I have arranged this in the <code class="markup--code markup--p-code">LoginController.js</code> in a list format for better UI.</p><h3 name="8ac3" class="graf graf--h3 graf-after--p">Step 7: Use Firebase to handle user info / auto-login</h3><p name="f6dc" class="graf graf--p graf-after--h3">We have seen above that using “Silent Login”, we can login the user silently. Also, notice that we haven’t connected Firebase directly to our app till now, and still managed to login using Google. That’s why the Firebase user table is still empty</p><figure tabindex="0" contenteditable="false" name="0b40" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 259px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><img class="graf-image" data-image-id="1*QFNIWm4Bkljuq5hPlqXtwA.png" data-width="1121" data-height="415" src="https://cdn-images-1.medium.com/max/800/1*QFNIWm4Bkljuq5hPlqXtwA.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ee8e" class="graf graf--p graf-after--figure">We only used Firebase for</p><ul class="postList"><li name="7b33" class="graf graf--li graf-after--p">Creating a Google project</li><li name="12c8" class="graf graf--li graf-after--li">Obtaining <code class="markup--code markup--li-code">web_client_id</code> and add <code class="markup--code markup--li-code">SHA-1</code> key to the project</li></ul><p name="2269" class="graf graf--p graf-after--li">Both of which can be done in Google Developer Console as well, without touching Firebase.</p><h4 name="2721" class="graf graf--h4 graf-after--p">So why do we need to attach Firebase at all&nbsp;?</h4><ol class="postList"><li name="57ec" class="graf graf--li graf-after--h4">Well, we don’t need to. If you have an app, you’re probably going to have a back-end with it as well. Generally we store auth credentials like token and ID in back-end, so the server can authorize access based on valid sessions. In case you are using Firebase as a back-end for your app (which is a great choice btw), you can attach Firebase to Google Login, and store the <code class="markup--code markup--li-code">token</code> and <code class="markup--code markup--li-code">userID</code> in Firebase. This way, Firebase will take care of your user sessions.</li><li name="17e9" class="graf graf--li graf-after--li">If you have more than one login methods e.g. Facebook login, direct email login, you would like to have the control in single place. Firebase is perfect for such a situation.</li><li name="4f97" class="graf graf--li graf-after--li">Storing user info in Firebase is useful for analytics and so many other purposes, rather than having the info just in the user’s app.</li><li name="95cc" class="graf graf--li graf-after--li">And because you can&nbsp;! 😎</li></ol><h4 name="2fe1" class="graf graf--h4 graf-after--li">Connect Firebase to your React Native app using <a href="https://rnfirebase.io/"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">react-native-firebase</a></h4><p name="5b9e" class="graf graf--p graf-after--h4"><code class="markup--code markup--p-code">react-native-firebase</code> is a popular package to connect React Native apps to Firebase various functionalities.</p><p name="770c" class="graf graf--p graf-after--p">React-native-firebase also <a href="https://rnfirebase.io/docs/v5.x.x/auth/social-auth"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">recommends</a> using <code class="markup--code markup--p-code"><a href="https://github.com/react-native-community/react-native-google-signin"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">react-native-google-signin</a></code> for Google authentication, which we just used above. The <code class="markup--code markup--p-code">react-native-google-signin</code> library allows us to login (using <code class="markup--code markup--p-code">GoogleSignin</code>) which returns an optional <code class="markup--code markup--p-code">accessToken</code> and <code class="markup--code markup--p-code">idToken</code>. Once we have the two tokens we need to create a credential using <a href="https://rnfirebase.io/docs/v5.x.x/auth/reference/GoogleAuthProvider#credential"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">GoogleAuthProvider#credential</a> and then sign in with that credential using <a href="https://rnfirebase.io/docs/v5.x.x/auth/reference/auth#signInWithCredential"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">auth#signInWithCredential</a></p><ul class="postList"><li name="ccd4" class="graf graf--li graf-after--p">Install <code class="markup--code markup--li-code">react-native-firebase</code>package using</li></ul><pre name="4abe" class="graf graf--pre graf-after--li">$ <code class="markup--code markup--pre-code">npm install --save react-native-firebase</code></pre><p name="fd5a" class="graf graf--p graf-after--pre">This installs the package, but it still needs to be connected to your android app properly</p><h4 name="4e35" class="graf graf--h4 graf-after--p">Modify Android config&nbsp;files</h4><p name="31b4" class="graf graf--p graf-after--h4">If you have done the previous steps (in Step 4.4) correctly, then you only need to add these things further</p><ul class="postList"><li name="bfab" class="graf graf--li graf-after--p">Add following Firebase modules in dependencies in <code class="markup--code markup--li-code">android/app/build.gradle</code></li></ul><pre name="8314" class="graf graf--pre graf-after--li">dependencies {<br> .....<br> implementation project(':react-native-firebase')<br> implementation "com.google.firebase:firebase-auth:17.0.0"<br> implementation "com.google.android.gms:play-services-base:16.1.0"<br> implementation "com.google.firebase:firebase-core:16.0.9"<br> ....<br>}</pre><p name="c349" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Troubleshooting</strong>&#8202;—&#8202;If you face issues in above settings, visit the documentation of <code class="markup--code markup--p-code">react-native-firebase</code> to get detailed steps for your RN versions</p><h4 name="0f49" class="graf graf--h4 graf-after--p">Link the react-native-firebase package with Android&nbsp;platform</h4><p name="6497" class="graf graf--p graf-after--h4">Link the react-native-firebase package with Android platform using</p><pre name="e640" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ react-native link react-native-firebase</code></pre><p name="f860" class="graf graf--p graf-after--pre">However, from RN ≥0.60, you don’t need to manually link packages. It is done automatically when packaging the platform for build.</p><h4 name="ef81" class="graf graf--h4 graf-after--p">Changes in LoginController.js</h4><p name="67b1" class="graf graf--p graf-after--h4">Now that we are going to save the login info in Firebase, we’ll call a Fierbase method to store the required data in back-end. Following function logs the user in&nbsp;, and then saves the info in Firebase</p><figure tabindex="0" contenteditable="false" name="9ca5" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/2b133e6b4f5b321ca41d4702e07ebfdf.js %}</div></div></figure><p name="a3a5" class="graf graf--p graf-after--figure">Note, <code class="markup--code markup--p-code">firebase.auth().signInWithCredential</code> is the method used to store user credentials in back-end.</p><p name="b3bd" class="graf graf--p graf-after--p">Now, run the app again using CLI or Android Studio, log in as usual and you’ll see that a user pops up in Firebase Users list</p><figure tabindex="0" contenteditable="false" name="8f25" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 243px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 34.699999999999996%;"></div><img class="graf-image" data-image-id="1*pSOMFzZC4L7CtKRbCoondA.png" data-width="1126" data-height="391" src="https://cdn-images-1.medium.com/max/800/1*pSOMFzZC4L7CtKRbCoondA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">User registered in Firebase via Google&nbsp;Login</figcaption></figure><p name="5274" class="graf graf--p graf-after--figure">You have successfully</p><ul class="postList"><li name="2952" class="graf graf--li graf-after--p">Logged in a user using Google Login in React Native</li><li name="bca4" class="graf graf--li graf-after--li">Attached the authentication to Firebase to store user credentials</li></ul><p name="a147" class="graf graf--p graf-after--li">🎉 🎉 🎉 🎉 🎉 🎉 🎉</p><h4 name="fc70" class="graf graf--h4 graf-after--p">Firebase, further</h4><p name="d3cf" class="graf graf--p graf-after--h4">You can now go ahead and attach more Firebase functions like logout, silent login, userinfo etc. since you have user credentials in Firebase.</p><p name="4708" class="graf graf--p graf-after--p">Note, not all userInfo that we receive after Google Login gets stored in Firebase by default. If you want all the information to be stored, then you should use the FireStore database to store it, and retrieve it when required.</p><p name="6e73" class="graf graf--p graf-after--p">For more details on functions like</p><ul class="postList"><li name="52db" class="graf graf--li graf-after--p">CRUD operations in Firestore</li><li name="c66e" class="graf graf--li graf-after--li">Image Upload</li><li name="df81" class="graf graf--li graf-after--li">Phone authentication</li></ul><p name="e41e" class="graf graf--p graf-after--li">check out <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this blog</a>.</p><figure tabindex="0" contenteditable="false" name="9ade" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder"><img class="graf-image" data-image-id="1*LUdW0yI8LlBNaIQ1rD3nnA.png" alt="Firebase phone auth, crud and image upload in react native" src="https://cdn-images-1.medium.com/max/800/1*LUdW0yI8LlBNaIQ1rD3nnA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Check out this blog for more details on Firebase with React Native&nbsp;Apps</figcaption></figure><h3 name="7c52" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="168a" class="graf graf--p graf-after--h3">In this blog, you learnt how to implement Google Login in React Native apps for Android. You also learnt how to attach this authentication to Firebase for better handling using back-end. We also built the app in Android and ran on a device.</p><blockquote name="c8fc" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available here&#8202;—&#8202;</em></strong><a href="https://github.com/enappd/react-native-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">React-Native-google-login (android branch)</em></strong></a></blockquote><h3 name="9262" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Google login in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="6f8d" class="graf graf--li graf-after--p">Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Integrate Firebase</a> | <a href="https://enappd.com/blog/firebase-analytics-in-react-native-app/101"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Analytics</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Push notifications</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">Firebase CRUD</a></li><li name="ce44" class="graf graf--li graf-after--li">How To in React Native&#8202;—&#8202;<a href="https://enappd.com/blog/geolocation-geocoding-react-native-apps/84"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Life cycle hooks</a> | <a href="https://enappd.com/blog/pick-images-from-camera-gallery-in-react-native-app/78"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Redux implementation</a> | <a href="https://enappd.com/blog/how-to-make-api-calls-in-react-native-apps/125"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Make API calls</a> | <a href="https://enappd.com/blog/navigations-in-react-native-app/124"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Navigation</a> | <a href="https://enappd.com/blog/how-to-translate-in-react-native-app-globalization-internationalization-and-text-to-speech/120"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translation</a> | <a href="https://enappd.com/blog/react-native-qr-code-scanning-using-react-native-camera/117"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode &amp; QR code scan</a> | <a href="https://enappd.com/blog/send-read-and-delete-sms-in-react-native/107"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Send &amp; Read SMS</a> | <a href="https://enappd.com/blog/google-vision-with-react-native/96"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Vision</a></li><li name="e480" class="graf graf--li graf-after--li">Payments&#8202;—&#8202;<a href="https://enappd.com/blog/implement-apple-pay-in-react-native-apps/93"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/stripe-integration-in-react-native-apps-using-firebase/108"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe payments</a></li><li name="4d3b" class="graf graf--li graf-after--li">Authentication&#8202;—&#8202;<a href="https://enappd.com/blog/google-login-in-react-native-android-apps-with-firebase/90"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Google Login</a>| <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Facebook login</a> | <a href="https://enappd.com/blog/react-native-firebase-crud-image-upload-and-phone-authentication/86"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Phone Auth</a> | <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login</a> | <a href="https://enappd.com/blog/anonymous-login-in-react-native-apps-with-firebase/129"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous Login</a></li><li name="2ccd" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-stories-ui-like-instagram-and-whatsapp-in-react-native/123"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create Instagram / Whatsapp Story Feature in React Native</a></li><li name="01c3" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/react-native-life-cycle-hooks/79"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener"    target="_blank">React Native life cycle hooks</a> | <a href="https://enappd.com/blog/redux-in-react-native-app/92"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Implement Redux</a> | <a href="https://enappd.com/blog/async-actions-with-redux-thunk-middleware-in-react-native-apps-1/100"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Async actions with Redux</a></li><li name="8db9" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/guide-on-react-native-full-app/53"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="28d0" class="graf graf--p graf-after--li">If you need a base to start your next React Native app, you can make your next awesome app using <a href="https://store.enappd.com/product/react-native-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="e4d4" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 700px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*sWyEeAfCMk7ULOkLUCdSug.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/1*sWyEeAfCMk7ULOkLUCdSug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f2ca" class="graf graf--p graf--empty graf-after--figure graf--trailing is-selected" ><br></p></div></div></section></div></article></main>