How to integrate Firebase in React Native apps
Tags: reactnative, firebase, authentication, login
Published: 2020-03-26 00:47: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="7a55" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="50e6" class="graf graf--blockquote graf-after--figure">If you would like access to the entire source code, <a href="https://github.com/AdityaGour/react-native-firebase"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">you can check out the GitHub repo here</a>. For step-by-step tutorial, continue reading below.</blockquote><p name="e78d" class="graf graf--p graf-after--blockquote">Firebase is a Backend as a Service (<em class="markup--em markup--p-em">BaaS</em>) that provides an advantage to mobile developers who use React Native for developing mobile applications. <a href="https://console.firebase.google.com/?pli=1"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">Firebase</a> is a platform that got acquired by Google and has a healthy and active community.</p><p name="7016" class="graf graf--p graf-after--p is-selected"><strong class="markup--strong markup--p-strong">React Native </strong>has been gaining popularity in the last few years, and rightfully so. Making apps in <strong class="markup--strong markup--p-strong">React Native</strong> is a breeze compared to Native languages (Java / Swift). React Native domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.</p><h4 name="e184" class="graf graf--h4 graf-after--p">Features of&nbsp;Firebase</h4><ol class="postList"><li name="e27e" class="graf graf--li graf-after--h4">Cloud Database Store</li><li name="c809" class="graf graf--li graf-after--li">Authentication</li><li name="739a" class="graf graf--li graf-after--li">Hosting</li><li name="f0dd" class="graf graf--li graf-after--li">Storage</li><li name="d21e" class="graf graf--li graf-after--li">Machine Learning Kit</li><li name="c2b7" class="graf graf--li graf-after--li">Crashlytics</li><li name="7451" class="graf graf--li graf-after--li">Performance</li><li name="b91b" class="graf graf--li graf-after--li">Test lab</li><li name="9a08" class="graf graf--li graf-after--li">Dynamic Links</li><li name="e68a" class="graf graf--li graf-after--li">Cloud Messaging</li><li name="e0db" class="graf graf--li graf-after--li">In-App messaging and many more…</li></ol><h3 name="9b0e" class="graf graf--h3 graf-after--li">Getting Started</h3><p name="41a0" class="graf graf--p graf-after--h3">To get started, you will need a target mobile OS, whether you choose to go with iOS or Android or both. Please refer to <a href="https://facebook.github.io/react-native/docs/getting-started"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">React Native Official Documentation</a> if you are setting up React Native development environment for the first time.</p><h4 name="5b8c" class="graf graf--h4 graf-after--p">For Android</h4><p name="320b" class="graf graf--p graf-after--h4">You will need <a href="https://developer.android.com/studio/releases/sdk-tools"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">SDK tools</a> and<a href="https://developer.android.com/studio/index.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"> Android Studio</a> especially to setup a developer environment.</p><h4 name="bf17" class="graf graf--h4 graf-after--p">For iOS</h4><p name="8017" class="graf graf--p graf-after--h4">You only need <a href="https://developer.apple.com/xcode/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Xcode</a> installed on your macOS.</p><h4 name="8815" class="graf graf--h4 graf-after--p">Other Setup</h4><ul class="postList"><li name="65e0" class="graf graf--li graf-after--h4"><a href="https://nodejs.org/en/"  class="markup--anchor markup--li-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">Nodejs</a> (<code class="markup--code markup--li-code">&gt;= 8.x.x</code>)</li><li name="9707" class="graf graf--li graf-after--li">npm/<a href="https://yarnpkg.com/lang/en/docs/install/"  class="markup--anchor markup--li-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">yarn</a> installed</li><li name="95a4" class="graf graf--li graf-after--li"><a href="https://www.npmjs.com/package/react-native-cli"  class="markup--anchor markup--li-anchor" rel="noopener noreferrer noopener noopener"    target="_blank">react-native-cli</a> (<code class="markup--code markup--li-code">&gt;= 2.0.1</code>)</li></ul><p name="ab2f" class="graf graf--p graf-after--li">Once those tools have been installed, run the following commands:</p><pre name="9841" class="graf graf--pre graf-after--p">npm install -g react-native-cli</pre><p name="aadb" class="graf graf--p graf-after--pre">Now, let’s create a new React Native project, e.g. firebaseStarter</p><pre name="d4b2" class="graf graf--pre graf-after--p">react-native init firebaseStarter</pre><p name="9afa" class="graf graf--p graf-after--pre">When the above command is done, open the main folder in your preferred editor. When we open the project in a code editor, its structure looks like this.</p><figure tabindex="0" contenteditable="false" name="7515" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 262px; max-height: 556px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 212.2%;"></div><img class="graf-image" data-image-id="1*J9e0ntwCcYbCCz8-ac1yxg.png" data-width="262" data-height="556" src="https://cdn-images-1.medium.com/max/720/1*J9e0ntwCcYbCCz8-ac1yxg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Folder Structure</figcaption></figure><p name="2cf6" class="graf graf--p graf-after--figure">To check if everything is working correctly and that our React Native app has been properly initialized, run the following command:</p><h4 name="05ed" class="graf graf--h4 graf-after--p">For macOS</h4><pre name="696c" class="graf graf--pre graf-after--h4">react-native run-ios</pre><h4 name="f963" class="graf graf--h4 graf-after--pre">For Windows</h4><pre name="fee4" class="graf graf--pre graf-after--h4">react-native run-android</pre><p name="eea2" class="graf graf--p graf-after--pre">Above command will run the default screen as shown below in an iOS simulator or Android emulator</p><figure tabindex="0" contenteditable="false" name="c382" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 531px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177%;"></div><img class="graf-image" data-image-id="1*u5H5905FAQ5Yj6rFt7QCBg.png" data-width="300" data-height="531" src="https://cdn-images-1.medium.com/max/720/1*u5H5905FAQ5Yj6rFt7QCBg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="0b6a" class="graf graf--p graf-after--figure">React Native comes with <strong class="markup--strong markup--p-strong">hot-reloading</strong>, which means you can make an edit to the code, App.js, and then hit <code class="markup--code markup--p-code">Cmd+R</code> and see your changes instantly update.</p><h3 name="e1f0" class="graf graf--h3 graf-after--p">Firebase Setup</h3><p name="e526" class="graf graf--p graf-after--h3">To add Firebase to our React Native Project, we need to run the following command at the root of the project</p><pre name="6f05" class="graf graf--pre graf-after--p">npm install firebase --save<br><strong class="markup--strong markup--pre-strong">or<br></strong>yarn add firebase</pre><h4 name="eccc" class="graf graf--h4 graf-after--pre">Firebase Configuration</h4><p name="0f40" class="graf graf--p graf-after--h4">Once you’ve installed the firebase then we will build communication between our React Native app and Firebase</p><p name="9ea3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1:-</strong></p><p name="f02a" class="graf graf--p graf-after--p">In this step, we will create a project in a firebase console. For that, we will go to <a href="https://firebase.google.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase</a></p><figure tabindex="0" contenteditable="false" name="45d7" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 327px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.800000000000004%;"></div><img class="graf-image" data-image-id="1*6B6dmJZLY6V_Zl2qO5xm5w.png" data-width="1364" data-height="638" src="https://cdn-images-1.medium.com/max/720/1*6B6dmJZLY6V_Zl2qO5xm5w.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="abf1" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 2:-</strong></p><p name="b29c" class="graf graf--p graf-after--p">We will create a new project in our Firebase console. So click on the console button to check all of your projects.</p><figure tabindex="0" contenteditable="false" name="7326" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 484px; max-height: 60px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 12.4%;"></div><img class="graf-image" data-image-id="1*ijxnjsH05DdjGN3XgJSRSQ.png" data-width="484" data-height="60" src="https://cdn-images-1.medium.com/max/720/1*ijxnjsH05DdjGN3XgJSRSQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Go to Firebase&nbsp;Console</figcaption></figure><p name="1943" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 3:-</strong></p><p name="2fa3" class="graf graf--p graf-after--p">Create a new project if you do not have already otherwise click on any existing project you want to use.</p><figure tabindex="0" contenteditable="false" name="ab67" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 325px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.5%;"></div><img class="graf-image" data-image-id="1*oWj7txbUVzelsV0B-ERPuw.png" data-width="1360" data-height="632" src="https://cdn-images-1.medium.com/max/720/1*oWj7txbUVzelsV0B-ERPuw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="1390" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 4:-</strong></p><p name="dc2b" class="graf graf--p graf-after--p">When you click on <em class="markup--em markup--p-em">Add Project</em> Button it will ask you for your project name, fill your project name in project name input box, accept their terms and condition and click on <em class="markup--em markup--p-em">Create Project</em> button.</p><figure tabindex="0" contenteditable="false" name="5546" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 648px; max-height: 632px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 97.5%;"></div><img class="graf-image" data-image-id="1*hHrDgNeIXGOJsOLs7-zosQ.jpeg" data-width="648" data-height="632" src="https://cdn-images-1.medium.com/max/720/1*hHrDgNeIXGOJsOLs7-zosQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Add a project in&nbsp;Firebase</figcaption></figure><p name="647c" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 5:-</strong></p><p name="0c93" class="graf graf--p graf-after--p">So now our Firebase project is created. In this step, we will add Firebase to our React Native app. For this, select <strong class="markup--strong markup--p-strong">Add Firebase to your Web App.</strong></p><figure tabindex="0" contenteditable="false" name="3d62" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 395px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.39999999999999%;"></div><img class="graf-image" data-image-id="1*Pr5BpBoZa1V_ScQIGX3LhA.jpeg" data-width="1103" data-height="622" src="https://cdn-images-1.medium.com/max/720/1*Pr5BpBoZa1V_ScQIGX3LhA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase project dashboard</figcaption></figure><p name="c1ac" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 6:-</strong></p><p name="3ad8" class="graf graf--p graf-after--p">In this Step, we will Register our web app to firebase so we will enter our App nickname and click on the register button.</p><figure tabindex="0" contenteditable="false" name="2cd5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*VjjqCfywqTGrgqICav8siQ.jpeg" data-width="808" data-height="536" src="https://cdn-images-1.medium.com/max/720/1*VjjqCfywqTGrgqICav8siQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a Firebase Web&nbsp;App</figcaption></figure><p name="95c6" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 7:-</strong></p><p name="b28e" class="graf graf--p graf-after--p">Copy your Firebase Config from Firebase dashboard and paste in into our app code.</p><figure tabindex="0" contenteditable="false" name="8b3e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 522px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 74.6%;"></div><img class="graf-image" data-image-id="1*b7SMVfjGHvPeWveQW7iKjg.jpeg" data-width="837" data-height="624" src="https://cdn-images-1.medium.com/max/720/1*b7SMVfjGHvPeWveQW7iKjg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Pick Firebase credentials from the code&nbsp;snippet</figcaption></figure><p name="e126" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 8:-</strong></p><p name="4bac" class="graf graf--p graf-after--p">We have successfully created our Firebase app. From left side tabs, we can use Firebase tools according to our requirements.</p><figure tabindex="0" contenteditable="false" name="42b9" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 325px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.5%;"></div><img class="graf-image" data-image-id="1*XgADCA3WGzfVAWSbk68tIA.jpeg" data-width="1353" data-height="629" src="https://cdn-images-1.medium.com/max/720/1*XgADCA3WGzfVAWSbk68tIA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f083" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Step 9:-</strong></p><p name="9912" class="graf graf--p graf-after--p">Create an <code class="markup--code markup--p-code">environment</code> directory inside the root folder We will then add the firebase configuration in a new file inside <code class="markup--code markup--p-code">environment/config.js</code>&nbsp;.</p><p name="af22" class="graf graf--p graf-after--p">Open <code class="markup--code markup--p-code">config.js</code> and add the following line to the top:</p><pre name="12d0" class="graf graf--pre graf-after--p">import * as firebase from 'firebase';</pre><p name="bc9e" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Step 10:-</strong></p><p name="470b" class="graf graf--p graf-after--p">Then right above the component, initialize Firebase with your config values:</p><pre name="fec2" class="graf graf--pre graf-after--p">// Initialize Firebase<br>const firebaseConfig = {<br>  apiKey: "&lt;your-api-key&gt;",<br>  authDomain: "&lt;your-auth-domain&gt;",<br>  databaseURL: "&lt;your-database-url&gt;",<br>  storageBucket: "&lt;your-storage-bucket&gt;",,<br>};<br>const firebaseApp = firebase.initializeApp(firebaseConfig);</pre><p name="9c1a" class="graf graf--p graf-after--pre">Your <code class="markup--code markup--p-code">config.js</code> should look like this:</p><figure tabindex="0" contenteditable="false" name="b5fe" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 532px; max-height: 268px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 50.4%;"></div><img class="graf-image" data-image-id="1*W4Ooh9Roe9QzNWox6Z0www.jpeg" data-width="532" data-height="268" src="https://cdn-images-1.medium.com/max/720/1*W4Ooh9Roe9QzNWox6Z0www.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="f3c1" class="graf graf--h3 graf-after--figure">Firebase Authentication Configuration</h3><h4 name="a23a" class="graf graf--h4 graf-after--h3">Enable Email &amp; Password Authentication in Firebase:</h4><p name="e451" class="graf graf--p graf-after--h4">To allow users to use an email and password combo, we need to enable this provider in our firebase console.</p><p name="130c" class="graf graf--p graf-after--p">To enable Email &amp; Password, head on over to your Firebase Project → Authentication → Sign-in Method. Click on <code class="markup--code markup--p-code">Email/Password</code> and set to enabled and save. Your dashboard should look like this:</p><figure tabindex="0" contenteditable="false" name="9682" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 240px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 34.300000000000004%;"></div><img class="graf-image" data-image-id="1*_-P3JVQf8Fa08ogSJJdkfw.jpeg" data-width="988" data-height="339" src="https://cdn-images-1.medium.com/max/720/1*_-P3JVQf8Fa08ogSJJdkfw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ce31" class="graf graf--p graf-after--figure">We need to make some modifications before we can really start building our app. Create an <code class="markup--code markup--p-code">src</code> directory inside the root folder. within the <code class="markup--code markup--p-code">src</code> directory, we will create three folders: <code class="markup--code markup--p-code">screens</code> <code class="markup--code markup--p-code">components </code>and <code class="markup--code markup--p-code">images</code>.</p><figure tabindex="0" contenteditable="false" name="b8db" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 271px; max-height: 95px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.099999999999994%;"></div><img class="graf-image" data-image-id="1*OxQQVoujat0FY72d5vKMhg.jpeg" data-width="271" data-height="95" src="https://cdn-images-1.medium.com/max/720/1*OxQQVoujat0FY72d5vKMhg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Src folder Structure</figcaption></figure><p name="95a5" class="graf graf--p graf-after--figure">The <code class="markup--code markup--p-code">screen</code> directory will contain all the UI related components that we need to display to the end user.</p><p name="518a" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">components</code> folder will contain any other component that will be used or re-used to display the user interface.</p><p name="15be" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">images</code> folder will contain images that will be used in our <code class="markup--code markup--p-code">screens</code>.</p><h4 name="9022" class="graf graf--h4 graf-after--p">Creating our&nbsp;Screens</h4><p name="23e7" class="graf graf--p graf-after--h4">we have to create four screens: <code class="markup--code markup--p-code">Loading</code>, <code class="markup--code markup--p-code">SignUp</code>, <code class="markup--code markup--p-code">Login</code>, and <code class="markup--code markup--p-code">Main</code></p><ul class="postList"><li name="a7e0" class="graf graf--li graf-after--p">A <code class="markup--code markup--li-code">Loading</code> screen that displays until we determine the auth state of a user.</li><li name="77e8" class="graf graf--li graf-after--li">A<code class="markup--code markup--li-code">SignUp</code> screen where the user can create an account.</li><li name="85e4" class="graf graf--li graf-after--li">A <code class="markup--code markup--li-code">Login</code> screen where an existing user can login.</li><li name="9671" class="graf graf--li graf-after--li">A <code class="markup--code markup--li-code">Main</code> screen of our application that we only show to an authenticated user.</li></ul><p name="5b7f" class="graf graf--p graf-after--li">To navigate between different screens, we need to add the <code class="markup--code markup--p-code">react-navigation</code>library.</p><pre name="dd43" class="graf graf--pre graf-after--p">npm install react-navigation --save<br><strong class="markup--strong markup--pre-strong">or<br></strong>yarn add react-navigation</pre><p name="0af1" class="graf graf--p graf-after--pre">Next, we will install <code class="markup--code markup--p-code">react-native-gesture-handler</code>. If you’re using Expo, you don’t need to do anything here.</p><pre name="6bbd" class="graf graf--pre graf-after--p">yarn add react-native-gesture-handler</pre><p name="a9e1" class="graf graf--p graf-after--pre">The next step is clearly to run the command below and link the libraries we just installed:</p><pre name="cd13" class="graf graf--pre graf-after--p">react-native link</pre><h4 name="318a" class="graf graf--h4 graf-after--pre">Let’s create our&nbsp;screens:</h4><p name="fbe8" class="graf graf--p graf-after--h4">Create the screens inside the <code class="markup--code markup--p-code">src</code> → <code class="markup--code markup--p-code">screens</code></p><p name="0474" class="graf graf--p graf-after--p">Your Screens Structure should look like this:</p><figure tabindex="0" contenteditable="false" name="45d9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 267px; max-height: 124px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.400000000000006%;"></div><img class="graf-image" data-image-id="1*J0ejWpkbEKa6q8SvK_gf2Q.jpeg" data-width="267" data-height="124" src="https://cdn-images-1.medium.com/max/720/1*J0ejWpkbEKa6q8SvK_gf2Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Screen folder structure</figcaption></figure><p name="2587" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Loading.js</strong></p><figure tabindex="0" contenteditable="false" name="edc4" 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/AdityaGour/86e96f974a45f6c9410c3b7a12690dbb.js %}</div></div></figure><p name="097a" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">SignUp.js</strong></p><figure tabindex="0" contenteditable="false" name="29a7" 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/AdityaGour/4c75efcbaded0d4d36b735eb06b14eff.js %}</div></div></figure><p name="3de3" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Login.js</strong></p><figure tabindex="0" contenteditable="false" name="d2f5" 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/AdityaGour/d9a0d4859853ffdb4a57328daa3cf498.js %}</div></div></figure><p name="17d4" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Main.js</strong></p><figure tabindex="0" contenteditable="false" name="479c" 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/AdityaGour/8ae54302202527bca00a45d691cd7fe3.js %}</div></div></figure><p name="c332" class="graf graf--p graf-after--figure">Now that we have all our screens created, let’s wire up our navigation inside our <code class="markup--code markup--p-code">App.js</code> file.</p><figure tabindex="0" contenteditable="false" name="c180" 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/AdityaGour/55fcee7ae3370c94a0e1bafe3301c6d9.js %}</div></div></figure><p name="732e" class="graf graf--p graf-after--figure">If you start our app, you should see our <code class="markup--code markup--p-code">Loading</code> screen with the <code class="markup--code markup--p-code">ActivityIndicator</code> spinning forever. This is what we expected because we need to determine if the user is authenticated or not to determine where to route them.</p><p name="8bb2" class="graf graf--p graf-after--p">If the user is authenticated, route them to the <code class="markup--code markup--p-code">Main</code> screen. Otherwise, redirect them to the <code class="markup--code markup--p-code">SignUp</code> screen.</p><h4 name="5106" class="graf graf--h4 graf-after--p">Adding Firebase Authentication:</h4><p name="09ce" class="graf graf--p graf-after--h4">We will then add the firebase Authentication configuration in a file inside <code class="markup--code markup--p-code">environment/config.js</code>.</p><p name="250e" class="graf graf--p graf-after--p">Open <code class="markup--code markup--p-code">config.js</code> and add the following line to the bottom:</p><pre name="2dd3" class="graf graf--pre graf-after--p">export const firebaseAuth = firebaseApp.auth();</pre><h3 name="afde" class="graf graf--h3 graf-after--pre">Determining if a user is authenticated</h3><p name="aabe" class="graf graf--p graf-after--h3">We can use Firebase to determine the authentication state of a user. Let’s add a check on our <code class="markup--code markup--p-code">Loading</code> screen that determines if a user is logged in or not.</p><p name="c231" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Loading.js</strong></p><figure tabindex="0" contenteditable="false" name="8b8e" 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/AdityaGour/9e8117177a537240dc808d7033242837.js %}</div></div></figure><p name="a45a" class="graf graf--p graf-after--figure">We are using Firebase’s <code class="markup--code markup--p-code">onAuthStateChanged</code> listener to get the current auth state of the user. If they are authenticated, we route them to the <code class="markup--code markup--p-code">Main</code>screen. Otherwise, we send them to the <code class="markup--code markup--p-code">SignUp</code> screen.</p><h3 name="235a" class="graf graf--h3 graf-after--p">Signing a&nbsp;user</h3><p name="b8ce" class="graf graf--p graf-after--h3">We need to create a new user, so we can log in them! Let’s head on over to the <code class="markup--code markup--p-code">SignUp</code> screen and call our <code class="markup--code markup--p-code">handleSignUp</code> method.</p><p name="91bb" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">SignUp.js</strong></p><figure tabindex="0" contenteditable="false" name="d258" 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/AdityaGour/b1a24b5d01c76556b7d158b46dbd77fc.js %}</div></div></figure><h3 name="f23e" class="graf graf--h3 graf-after--figure">Logging an existing&nbsp;user</h3><p name="71a4" class="graf graf--p graf-after--h3">If a user already exists, so we can log them in. Let’s head on over to the <code class="markup--code markup--p-code">Login</code> screen and call our <code class="markup--code markup--p-code">handleLogin</code> method.</p><p name="d886" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Login.js</strong></p><figure tabindex="0" contenteditable="false" name="e65f" 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/AdityaGour/876f8fba26040b78db036da4620e5ea8.js %}</div></div></figure><h3 name="e073" class="graf graf--h3 graf-after--figure">Displaying the current user on the Main&nbsp;screen</h3><p name="7bfc" class="graf graf--p graf-after--h3">With our current implementation, we will only see the <code class="markup--code markup--p-code">Main</code> screen if a user is logged in. We need to grab the <code class="markup--code markup--p-code">currentUser</code> from firebase so that we can display their email. Let’s update our <code class="markup--code markup--p-code">Main</code> screen do handle this.</p><p name="54c0" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Main.js</strong></p><figure tabindex="0" contenteditable="false" name="776d" 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/AdityaGour/8b27c973ed5188a656fd5ff80ff1d530.js %}</div></div></figure><p name="0b26" class="graf graf--p graf-after--figure">Now, when we see the <code class="markup--code markup--p-code">Main</code> screen, we should see the user’s email address. If we refresh the app, we should be automatically routed to the <code class="markup--code markup--p-code">Main</code> screen because are already authenticated.</p><h3 name="72ce" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="60ac" class="graf graf--p graf-after--h3 graf--trailing">In this post, we’ve shown you how to integrate Firebase and simple firebase authentication flow set up with a React Native app. You can find the complete code inside this Github repo <a href="https://github.com/AdityaGour/react-native-firebase"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p></div></div></section><section name="effe" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="5930" class="graf graf--h3 graf--leading">References</h3><ul class="postList"><li name="6bd6" class="graf graf--li graf-after--h3 graf--trailing"><a href="https://medium.com/react-native-training/react-native-firebase-authentication-7652e1d2c8a2"  class="markup--anchor markup--li-anchor" target="_blank">https://medium.com/react-native-training/react-native-firebase-authentication-7652e1d2c8a2</a></li></ul></div></div></section></div></article></main>