Twitter Login in React Native Apps Using Firebase
Tags: reactnative, login, authentication, firebase
Published: 2020-03-28 10:17:18

<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="04de" 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="7cb8" class="graf graf--p graf-after--figure">In this tutorial, you will get to know how we can implement both <strong class="markup--strong markup--p-strong">React-Native Firebase Social Auth</strong> T<strong class="markup--strong markup--p-strong">witter login</strong> in our app and how to integrate <code class="markup--code markup--p-code">react-native-twitter-signin </code>npm package for twitter login in our cool application, and then test it <strong class="markup--strong markup--p-strong">on Android</strong>.</p><blockquote name="de28" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/RNFirebaseTwitterLogin"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">React-Native-twitter-login (android branch)</strong></a></blockquote><h3 name="ea63" class="graf graf--h3 graf-after--blockquote">Twitter Login&#8202;—&#8202;What and&nbsp;why?</h3><p name="c80f" class="graf graf--p graf-after--h3">There are several reasons why you should use a Twitter login in your app</p><ul class="postList"><li name="10fc" 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 Twitter. 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 Twitter 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. Twitter 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>Twitter 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">Twitter integration</strong>&#8202;—&#8202;If your app uses Twitter authentication, you can use Twitter 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="2aa9" 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 us for around 4 years and has been very popular among developers for its ease of usage over Swift / Java. Also, you get to keep 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.5 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 your 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 the next section</p><h3 name="fbd7" class="graf graf--h3 graf-after--p">Firebase</h3><p name="5f73" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Firebase </strong>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 a variety of functionalities available on it.</p><p name="9ea7" 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 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 Twitter login is done. This is the preferred method, as it is reliable for both apps and PWA.</p><h3 name="2a59" class="graf graf--h3 graf-after--p">Steps for Twitter authentication</h3><p name="a4d5" class="graf graf--p graf-after--h3">We will follow these step-by-step instructions to create our React Native app with Twitter authentication</p><p name="0814" class="graf graf--p graf-after--p">Step 1: Create a Firebase Project and Add android platform</p><p name="8fd1" class="graf graf--p graf-after--p">&zwnj;Step 2: Enable Twitter 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-twitter-signin</code> package for Twitter Login</p><p name="e4a4" class="graf graf--p graf-after--p">Step 5: Implement Twitter 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="13d1" 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 the following steps&nbsp;: —</p><p name="0c2b" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Method 1: —</strong></p><pre name="bc62" class="graf graf--pre graf-after--p">step 1:-- Open <code class="markup--code markup--pre-code">Android Studio<br>step 2:-- </code>Open Your Project<br>step 3:-- Click on <strong class="markup--strong markup--pre-strong">Gradle</strong> (From <strong class="markup--strong markup--pre-strong">Right Side Panel</strong>, you will see <strong class="markup--strong markup--pre-strong">Gradle Bar</strong>)<br>step 4:--  Click on <strong class="markup--strong markup--pre-strong">Refresh</strong> (Click on Refresh from Gradle Bar , you              will see List Gradle scripts of your Project)<br>step 5:-- Click on Your Project (Your Project Name form List)<br>step 6:-- Click on Tasks/Android<br>step 7:-- Double Click on <code class="markup--code markup--pre-code">signingReport</code> (You will get <code class="markup--code markup--pre-code">SHA1</code> and <code class="markup--code markup--pre-code">MD5</code> in Run Bar).<br>Now you are all done , check your keys in results.</pre><p name="ed8b" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Method 2: —</strong></p><p name="7e6c" class="graf graf--p graf-after--p">Generate the key using the 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: </strong>This is where many people commit a 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 the Android project folder.</p><h3 name="3a1f" class="graf graf--h3 graf-after--p">Step 1: Create a 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 a few things in Firebase. First of all, we’ll create a new Firebase project and new app inside it.</p><h4 name="fe00" 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!</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.twitterlogin</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 the 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 Twitter Login in&nbsp;Firebase</h3><p name="ca36" class="graf graf--p graf-after--h3">Now that your app is connected to Firebase project, we need to go into our Firebase console and enable Twitter 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 → Twitter</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="3599" 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.5</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 RNTwitterLogin</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.</p><p name="939f" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Code View: —</strong></p><figure tabindex="0" contenteditable="false" name="7866" 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/mdshadman/0becb95584d2f627e77495d6fb44419d.js %}</div></div></figure><p name="a055" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Result: —</strong></p><figure tabindex="0" contenteditable="false" name="82b8" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 369px; max-height: 650px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.2%;"></div><img class="graf-image" data-image-id="1*2svQUI9A413tobFdhBfa7w.jpeg" data-width="369" data-height="650" src="https://cdn-images-1.medium.com/max/800/1*2svQUI9A413tobFdhBfa7w.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="80d1" class="graf graf--h3 graf-after--figure">Step 4: Install the package for Twitter Login using <code class="markup--code markup--h3-code">react-native-twitter-signin package</code></h3><p name="9d55" class="graf graf--p graf-after--h3">To enable Twitter 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-twitter-signin</strong></a><strong class="markup--strong markup--p-strong">. </strong>This is a widely used package for Twitter Login, and also very reliable.</p><h4 name="cca5" 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-twitter-signin </code></pre><p name="c707" class="graf graf--p graf-after--pre">Linking the package is not required above react-native version 0.60.</p><h4 name="76a0" 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><p name="8aa3" class="graf graf--p graf-after--figure">Now let's see some tricky parts for this package —</p><p name="c52c" class="graf graf--p graf-after--p">There is an unknown error which has very less solution on any platform like StackOverflow or others but I found that solution after too many hecks,<br>First of all, you need to install the below package to get it in work</p><pre name="57ac" class="graf graf--pre graf-after--p">npm install --save GoldenOwlAsia/react-native-twitter-signin#master<br>instead of<br><code class="markup--code markup--pre-code">yarn add react-native-twitter-signin</code></pre><p name="1134" class="graf graf--p graf-after--pre">Now you are all set to install packages<br><strong class="markup--strong markup--p-strong">4.3.1: —</strong></p><p name="e8e9" class="graf graf--p graf-after--p">Go to <a href="https://apps.twitter.com/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener"    target="_blank">Twitter Apps</a> to create your app so that you can obtain API key and secret, note:</p><ul class="postList"><li name="bed0" class="graf graf--li graf-after--p">Remember to set a Callback Url, whatever will work</li><li name="cb91" class="graf graf--li graf-after--li">By default, Twitter won’t allow you to grab user’s email, so you have to apply for permission for your app to retrieve user’s email</li><li name="1572" class="graf graf--li graf-after--li">Here is how callbacks would look like:</li></ul><figure tabindex="0" contenteditable="false" name="9c58" class="graf graf--figure graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 647px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 92.5%;"></div><img class="graf-image" data-image-id="0*VXZ7K7-odlpXF0yS" data-width="1118" data-height="1034" src="https://cdn-images-1.medium.com/max/800/0*VXZ7K7-odlpXF0yS"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="6e85" class="graf graf--p graf-after--figure">It may take up to 72 hrs to verify your developer's account, so stay calm and code rest!</p><h4 name="acdc" class="graf graf--h4 graf-after--p">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>}<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-twitter-signin')<strong class="markup--strong markup--pre-strong">/ &lt;--- add this line<br></strong>}<br>apply plugin: 'com.google.gms.google-services' <strong class="markup--strong markup--pre-strong">// &lt;--- this should be the last line</strong></pre><p name="7258" class="graf graf--p graf-after--pre">Now let’s setup <code class="markup--code markup--p-code">react-native-firebase</code> authentication in your application —</p><h4 name="20e8" class="graf graf--h4 graf-after--p">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-twitter-signin</a></code>for Twitter authentication, which we just used above. The <code class="markup--code markup--p-code">react-native-twitter-signin</code> the library allows us to login (using <code class="markup--code markup--p-code">twitter</code>) which returns an optional <code class="markup--code markup--p-code">accessToken</code> and <code class="markup--code markup--p-code">authToken</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/TwitterAuthProvider#credential"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">TwitterAuthProvider#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">yarn add 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.android.gms:play-services-base:17.1.0"<br>implementation "com.google.firebase:firebase-core:17.0.9"<br>implementation 'com.google.firebase:firebase-auth:19.0.0'<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 the 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><ul class="postList"><li name="ca1a" class="graf graf--li graf-after--p">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.5, there is a need to edit <code class="markup--code markup--li-code">MainApplication.java</code></li></ul><pre name="a4f0" class="graf graf--pre graf-after--li">import com.goldenowl.twittersignin.TwitterSigninPackage; // &lt;---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>packages.add(new RNFirebaseAuthPackage());// &lt;-- this needs to be in the list<br>) <br>);<br>}<br>......}</pre><p name="46ef" class="graf graf--p graf-after--pre">Wow, you have done well. Now, you are all set to take the taste of your own cooked food!</p><p name="00d3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Code for Twitter Signin&nbsp;: —</strong></p><figure tabindex="0" contenteditable="false" name="4b28" 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/mdshadman/a3b1c33ec5a57df8e6c2975d8a3f030b.js %}</div></div></figure><p name="1c92" 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 the back-end.</p><p name="6800" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Here,</strong></p><pre name="2c19" class="graf graf--pre graf-after--p">TwitterKeys.TWITTER_CONSUMER_KEY = api key of the application TdewitterKeys.TWITTER_CONSUMER_SECRET = secret key of the app</pre><p name="c668" class="graf graf--p graf-after--pre">You can get both keys after creating the twitter developer’s account and registering the app on that. <a href="https://developer.twitter.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">To create a developers account go here</strong></a>.</p><p name="983c" class="graf graf--p graf-after--p">When you will click on the SignIn button then you will be redirected to some pages for authentication or you may say confirmation of your valid account as follow:</p><p name="f3ed" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1 Clicked: —</strong></p><figure tabindex="0" contenteditable="false" name="fa88" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 369px; max-height: 650px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.2%;"></div><img class="graf-image" data-image-id="1*2svQUI9A413tobFdhBfa7w.jpeg" data-width="369" data-height="650" src="https://cdn-images-1.medium.com/max/800/1*2svQUI9A413tobFdhBfa7w.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Click on login&nbsp;button</figcaption></figure><p name="6efe" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 2 Enter credentials&nbsp;: —</strong></p><figure tabindex="0" contenteditable="false" name="2300" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*cjeKNW-SJkJtN2QRkaNxyw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*cjeKNW-SJkJtN2QRkaNxyw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enter your Twitter accounts credentials here</figcaption></figure><p name="c37b" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 3 Authorize app&nbsp;: —</strong></p><figure tabindex="0" contenteditable="false" name="50fa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*W8wHNQG2cfeAwwXOE9e1Ew.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*W8wHNQG2cfeAwwXOE9e1Ew.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Authorize application confirmation</figcaption></figure><p name="0eb5" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Now you are in…</strong></p><figure tabindex="0" contenteditable="false" name="892d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*E14u0ZehQrMr15qXQ5UYtQ.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*E14u0ZehQrMr15qXQ5UYtQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">User Logged&nbsp;in.</figcaption></figure><p name="b52d" class="graf graf--p graf-after--figure">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="954d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 152px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 21.7%;"></div><img class="graf-image" data-image-id="1*HztNM4l5JsVzKoKTvs_jaw.png" data-width="1119" data-height="243" src="https://cdn-images-1.medium.com/max/800/1*HztNM4l5JsVzKoKTvs_jaw.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 Twitter&nbsp;Login</figcaption></figure><p name="ed94" class="graf graf--p graf-after--figure">In the whole setup, you may encounter a problem related to access token from react-native firebase so for that solution you would need to write <strong class="markup--strong markup--p-strong">twittersdk:// </strong>as callback URL in the in your attached twitter app.</p><blockquote name="1c50" class="graf graf--blockquote graf-after--p is-selected"><strong class="markup--strong markup--blockquote-strong">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/RNFirebaseTwitterLogin"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">React-Native-twitter-login (android branch)</strong></a></blockquote><p name="8cb0" class="graf graf--p graf-after--blockquote">You have successfully</p><ul class="postList"><li name="2952" class="graf graf--li graf-after--p">Logged in a user using Twitter 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, user info, 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 Twitter 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 learned how to implement Twitter Login in React Native apps for Android. You also learned 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">Complete source code of this tutorial is available here&#8202;—&#8202;</strong><a href="https://github.com/mdshadman/RNFirebaseTwitterLogin"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">React-Native-twitter-login (android branch)</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 learned about setting up React-Native Firebase social auth Twitter 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="2ea9" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>