Integrate Google Login in React Native (iOS) apps with Firebase
Tags: reactnative, google, ios, firebase
Published: 2020-03-27 02:38:41

<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="d1b0" 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="c43a" 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 iOS</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;—</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">&#8202;React-Native-google-login (master branch)</em></strong></a></blockquote><p name="453f" 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-android-apps-with-firebase/90"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Google Login in React Native for Android, using Firebase.</strong></a></p><p name="7bde" class="graf graf--p graf-after--p">If you have read the Android 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 iOS 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 iOS</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="ce2f" class="graf graf--h3 graf-after--p">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 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="c09f" class="graf graf--p graf-after--figure">First, let’s create an iOS app and attach it to the project</p><figure tabindex="0" contenteditable="false" name="97a3" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 402px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.4%;"></div><img class="graf-image" data-image-id="1*BdmFhGDTVGntr_wm53ViKQ.png" data-width="1386" data-height="796" src="https://cdn-images-1.medium.com/max/800/1*BdmFhGDTVGntr_wm53ViKQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a new iOS&nbsp;app</figcaption></figure><p name="7d3b" class="graf graf--p graf-after--figure">Just mention the correct <code class="markup--code markup--p-code">bundle_id</code> of your app in the <code class="markup--code markup--p-code">iOS bundle ID</code> input. 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">GoogleService-Info.plist</code> file and put it in the root of your iOS project folder. 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">Authentication → Sign-In Method → Google, 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><p name="922b" class="graf graf--p graf-after--p">We will also need a<code class="markup--code markup--p-code">reversed_client_id</code>&nbsp;, but that we can get from the <code class="markup--code markup--p-code">GoogleService-Info.plist</code> file you just downloaded in above step. This <code class="markup--code markup--p-code">reversed_client_id</code> can also be obtained from <a href="https://console.developers.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Google developer console</strong></a>, but let’s not get into that for now.</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 first run iOS)</p><p name="24eb" class="graf graf--p graf-after--p">Let’s run the app in iOS using (I’m using emulator)</p><pre name="4f57" class="graf graf--pre graf-after--p">$ react-native run-ios</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="cdd7" class="graf graf--figure graf-after--p"><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*iQuWplkxwda9CLf8bIXmwQ.png" data-width="350" data-height="623" src="https://cdn-images-1.medium.com/max/800/1*iQuWplkxwda9CLf8bIXmwQ.png"><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">Install 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><h4 name="eb15" class="graf graf--h4 graf-after--pre">Add Google Auth SDK to iOS&nbsp;platform</h4><p name="bc49" class="graf graf--p graf-after--h4">This is usually done using Pods. Pods are package manager for iOS project, similar to <code class="markup--code markup--p-code">yarn</code> or <code class="markup--code markup--p-code">npm</code> for Javascript projects. Pod file is found in your iOS project’s root.</p><p name="027e" class="graf graf--p graf-after--p">Open the podfile with any text editor, add <code class="markup--code markup--p-code">pod 'GoogleSignIn', '~&gt; 4.4.0'</code> in your Podfile and run <code class="markup--code markup--p-code">pod install</code></p><p name="d633" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Note: </em></strong><em class="markup--em markup--p-em">If you don’t have a Podfile, follow these instructions:</em></p><p name="403f" class="graf graf--p graf-after--p">1&nbsp;. <code class="markup--code markup--p-code">pod init</code> creates a Podfile.</p><p name="df5a" class="graf graf--p graf-after--p">2&nbsp;. add <code class="markup--code markup--p-code">GoogleSignIn</code> pod (see example below)</p><p name="b0a7" class="graf graf--p graf-after--p">3&nbsp;. run <code class="markup--code markup--p-code">pod install</code></p><p name="76ae" class="graf graf--p graf-after--p">4&nbsp;. from now on, use Xcode to open the <code class="markup--code markup--p-code">&lt;your project&gt;.xcodeworkspace</code> file (do not open the&nbsp;<code class="markup--code markup--p-code">.xcodeproj</code> any more)</p><p name="0340" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Sample Podfile</strong></p><pre name="4062" class="graf graf--pre graf-after--p"># Uncomment the next line to define a global platform for your project<br># platform :ios, '9.0'<br>target 'test_google_signin' do<br>  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks<br>  # use_frameworks!<br>  # Pods for test_google_signin<br>  pod 'GoogleSignIn', '~&gt; 4.4.0' // RNGoogleSignin requires GoogleSignIn &gt;= 4.3.0<br>  target 'test_google_signin-tvOSTests' do<br>    inherit! :search_paths<br>    # Pods for testing<br>  end<br>  target 'test_google_signinTests' do<br>    inherit! :search_paths<br>    # Pods for testing<br>  end<br>end</pre><p name="00dd" class="graf graf--p graf-after--pre">At the end, the dependencies should be linked like in this picture</p><figure tabindex="0" contenteditable="false" name="63ab" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 572px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 81.69999999999999%;"></div><img class="graf-image" data-image-id="1*y5aYpGRfoYIUkNtlBO22nw.png" data-width="859" data-height="702" src="https://cdn-images-1.medium.com/max/800/1*y5aYpGRfoYIUkNtlBO22nw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Linked GoogleSignIn dependency in&nbsp;XCode</figcaption></figure><p name="0838" class="graf graf--p graf-after--figure">Also notice that GoogleServiceInfo.plist is added to resources. If you don’t see it here, click the + button in <code class="markup--code markup--p-code">Copy Bundle Resources</code> section, and add the file.</p><h4 name="3632" class="graf graf--h4 graf-after--p">XCode configuration</h4><p name="d5a7" class="graf graf--p graf-after--h4">In XCode, add your <code class="markup--code markup--p-code">REVERSED_CLIENT_ID</code> (found inside <code class="markup--code markup--p-code">GoogleService-Info.plist</code>) to the URL schemes as shown below</p><figure tabindex="0" contenteditable="false" name="3e24" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 572px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 81.69999999999999%;"></div><img class="graf-image" data-image-id="1*NChv_7S1dJZXAdNNl8m-9A.png" data-width="859" data-height="702" src="https://cdn-images-1.medium.com/max/800/1*NChv_7S1dJZXAdNNl8m-9A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add revers_client_id to URL&nbsp;types</figcaption></figure><blockquote name="80df" class="graf graf--blockquote graf-after--figure">If you are having issues with Pod install, Xcode configuration or if you have more than one social login in the app, check further details <a href="https://github.com/react-native-community/react-native-google-signin/blob/master/docs/ios-guide.md"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">here</a></blockquote><p name="5074" class="graf graf--p graf-after--blockquote">Now your iOS project is all set to connect to Firebase and Google Login. <strong class="markup--strong markup--p-strong">Notice that at this point, we are using Firebase only as a way to create a Google Project and obtain </strong><code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">web_client_id</strong></code><strong class="markup--strong markup--p-strong"> and </strong><code class="markup--code markup--p-code"><strong class="markup--strong markup--p-strong">reverse_client_id</strong></code><strong class="markup--strong markup--p-strong">&nbsp;. We haven’t yet connected Firebase with the app, as such. </strong>We will do that later in another section.</p><h3 name="a00c" class="graf graf--h3 graf-after--p">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 - 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&nbsp;iOS</h3><p name="0941" class="graf graf--p graf-after--h3">Let’s now build the app for iOS. I am using a simulator, but you can always use a real device as well.</p><p name="3074" class="graf graf--p graf-after--p">Run the app on iOS simulator using</p><pre name="e96a" class="graf graf--pre graf-after--p">$ react-native run-ios --simulator="iPhone 8"</pre><p name="0dab" class="graf graf--p graf-after--pre">or simply on a connected device (or default simulator) using</p><pre name="170d" class="graf graf--pre graf-after--p">$ react-native run-ios</pre><p name="44c5" class="graf graf--p graf-after--pre">Here’s how my Google Login app works</p><figure tabindex="0" contenteditable="false" name="3bbf" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 638px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 182.29999999999998%;"></div><img class="graf-image" data-image-id="1*387kgaIkflW36n9Plf0DuA.gif" data-width="350" data-height="638" src="https://cdn-images-1.medium.com/max/800/1*387kgaIkflW36n9Plf0DuA.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&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><h4 name="9d35" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">UserInfo</strong></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 auto-login the&nbsp;user</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 <code class="markup--code markup--li-code">reversed_client_id</code></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"><strong class="markup--strong markup--h4-strong">So why do we need to attach Firebase at all&nbsp;?</strong></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.</p><ul class="postList"><li name="44f2" class="graf graf--li graf-after--p">To connect it to your app, make sure the <code class="markup--code markup--li-code">GoogleService-Info.plist</code> file to your iOS app using ‘File → Add Files to “[YOUR APP NAME]”…’ in XCode, as shown in the screenshot below</li></ul><figure tabindex="0" contenteditable="false" name="f5dc" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 420px; max-height: 542px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 129%;"></div><img class="graf-image" data-image-id="1*rzFJgyIgv45DiY5mA6x96Q.png" data-width="420" data-height="542" src="https://cdn-images-1.medium.com/max/800/1*rzFJgyIgv45DiY5mA6x96Q.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add the <code class="markup--code markup--figure-code">GoogleService-Info.plist file to the App Folder in&nbsp;XCode</code></figcaption></figure><ul class="postList"><li name="ccd4" class="graf graf--li graf-after--figure">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 XCode properly</p><h4 name="4e35" class="graf graf--h4 graf-after--p">Modify Xcode&nbsp;files</h4><p name="31b4" class="graf graf--p graf-after--h4">To initialize the native SDK in your app, add the following to your <code class="markup--code markup--p-code">ios/[YOUR APP NAME]/AppDelegate.m</code> file:</p><pre name="8314" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">#import &lt;Firebase.h&gt;</code> </pre><p name="aba6" class="graf graf--p graf-after--pre">Also, at the beginning of the <code class="markup--code markup--p-code">didFinishLaunchingWithOptions:(NSDictionary *)launchOptions</code> method add the following line:</p><pre name="9694" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">[FIRApp configure];</code> </pre><h4 name="65e7" class="graf graf--h4 graf-after--pre">Install required&nbsp;Pods</h4><p name="0fb9" class="graf graf--p graf-after--h4">Open your pod file in iOS root folder and add two dependencies</p><pre name="c895" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">pod 'Firebase/Core', '~&gt; 6.3.0'<br>pod 'Firebase/Auth', '~&gt; 6.3.0'</code></pre><p name="e614" class="graf graf--p graf-after--pre">Run<code class="markup--code markup--p-code">pod install</code> to install the dependencies. If you face an error of versions, try running <code class="markup--code markup--p-code">pod repo update</code> and then run <code class="markup--code markup--p-code">pod install</code></p><h4 name="0f49" class="graf graf--h4 graf-after--p">Link the react-native-firebase package with iOS&nbsp;platform</h4><p name="6497" class="graf graf--p graf-after--h4">Link the react-native-firebase package with iOS 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 XCode, 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><h4 name="fc70" class="graf graf--h4 graf-after--li">Firebase, further</h4><p name="d3cf" class="graf graf--p graf-after--h4 is-selected">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 iOS. You also learnt how to attach this authentication to Firebase for better handling using back-end. We also built the app in iOS and ran on a simulator.</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 (master 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="2f64" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>