Anonymous login in React Native Apps with Firebase
Tags: reactnative, firebase, anonymous, login
Published: 2020-03-29 22:25:07

<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="ce96" 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="64d4" class="graf graf--p graf-after--figure">In this post, you will learn how to implement anonymous login in React Native apps using Firebase. We will also learn how to link an existing anonymous login with a new set of email password, so an anonymous user can convert into a normal user. We will implement these in a simple React Native app and test on device.</p><blockquote name="da96" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">react-native-anonymous-login</a></blockquote><h3 name="18b3" class="graf graf--h3 graf-after--blockquote">What is Firebase?</h3><p name="0089" class="graf graf--p graf-after--h3 is-selected">If you don’t know much about Firebase&nbsp;… you need to catch up with latest tech news. Firebase is the popular stuff in the market today. One can use Firebase to create quick mobile app back-ends, with a ton of built-in and ready-to-integrate features.</p><p name="17b0" class="graf graf--p graf-after--p">The most used feature of Firebase is as a back-end. But along with back-end, Authentication features of Firebase are a must to use. So, essentially Auth becomes the most used feature by default.</p><h4 name="cc15" class="graf graf--h4 graf-after--p">Firebase Authentication Methods</h4><p name="5502" class="graf graf--p graf-after--h4">Firebase provides a number of login methods&#8202;—&#8202;Email/password, social logins and anonymous login.</p><p name="9ab2" class="graf graf--p graf-after--p">Yes! anonymous login. Sounds strange right?</p><p name="618c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Anonymous login</strong> is a special type of login Firebase provides, where the user does not provide any login info from their end. Firebase creates a random ID and logs user in the app. If the user wants to convert to a regular user at a later point, Firebase provides a way to link the anonymous account to a normal credential as well.</p><blockquote name="fb0b" class="graf graf--blockquote graf-after--p">Anonymous login allows users to browse an app without sharing their identity, and later convert to a normal user if they want to</blockquote><p name="23c6" class="graf graf--p graf-after--blockquote">That being said, I’m sure you are very much interested in learning all kinds of login in React Native with Firebase. You can check out our Firebase social logins with <a href="https://enappd.com/blog/facebook-login-in-react-native-apps/89"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Facebook</strong></a><strong class="markup--strong markup--p-strong">, </strong><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</strong></a><strong class="markup--strong markup--p-strong"> </strong>and <a href="https://enappd.com/blog/twitter-login-in-react-native-apps-using-firebase/95"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Twitter</strong></a> blogs on our <a href="http://enappd.com/blog"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">site</a>, along with free starters ( 👻 woohoo&nbsp;! )</p><h3 name="33f1" class="graf graf--h3 graf-after--p">What is React-Native</h3><p name="e27d" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">TLDR;</strong>&#8202;—&#8202;React Native (RN) apps are more “native” than webview apps made by Cordova / Ionic. But React Native is yet to release a stable (1.0.0_) version of the framework.</p><p name="d619" class="graf graf--p graf-after--p">React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.</p><p name="de54" class="graf graf--p graf-after--p">React Native applications render using real mobile UI components, <em class="markup--em markup--p-em">not</em> webviews, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. <a href="http://bit.ly/1YipO7A"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Facebook</a>, <a href="http://bit.ly/1PPEiZH"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Palantir</a>, <a href="http://bit.ly/1PPEjNg"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">TaskRabbit</a> etc are already using it in production for user-facing applications.</p><h3 name="a3b0" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the anonymous login feature of Firebase. This is my break-down of the blog</p><p name="cf69" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Major objectives</strong></p><ol class="postList"><li name="3785" class="graf graf--li graf-after--p">Anonymously login a user</li><li name="6f72" class="graf graf--li graf-after--li">Link an anonymous user to an email/password account, so user can login with those credentials</li></ol><p name="b627" class="graf graf--p graf-after--li"><strong class="markup--strong markup--p-strong">Overall app flow</strong></p></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="4907" class="graf graf--figure graf--layoutOutsetCenter graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 649px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.400000000000006%;"></div><img class="graf-image" data-image-id="1*3mrZOQTautiHjLHlNT9V-g.png" data-width="1200" data-height="653" src="https://cdn-images-1.medium.com/max/1200/1*3mrZOQTautiHjLHlNT9V-g.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Overall flow for Anonymous login in React Native Apps with&nbsp;Firebase</figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><p name="1a45" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="c394" class="graf graf--li graf-after--p">Create a Firebase project</li><li name="6172" class="graf graf--li graf-after--li">Create a simple React Native app for login purpose</li><li name="b6ab" class="graf graf--li graf-after--li">Connect the React Native app to Firebase</li><li name="e24a" class="graf graf--li graf-after--li">Implement anonymous login using Firebase</li><li name="3666" class="graf graf--li graf-after--li">Convert anonymous user to a regular user</li></ol><p name="08cb" class="graf graf--p graf-after--li">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="1f07" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 280px; max-height: 286px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 102.1%;"></div><img class="graf-image" data-image-id="1*5Vy4kunka20v6hmQ_LS5Mg.gif" data-width="280" data-height="286" src="https://cdn-images-1.medium.com/max/800/1*5Vy4kunka20v6hmQ_LS5Mg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Let’s&nbsp;…. dive&nbsp;better</figcaption></figure><h3 name="5996" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create a Firebase&nbsp;project</h3><p name="c4dd" class="graf graf--p graf-after--h3">If you have ever used Firebase, you can skip to next step. For beginners, you can create a Firebase project by going to <a href="http://console.firebase.google.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Firebase console</a> (sign-in if it asks you to). Create a new project or select an existing one. Your Firebase console dashboard should look like this</p><figure tabindex="0" contenteditable="false" name="dd19" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 312px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.6%;"></div><img class="graf-image" data-image-id="1*Q1tzpM83Uq66TNZ9E28nYA.png" data-width="800" data-height="357" src="https://cdn-images-1.medium.com/max/800/1*Q1tzpM83Uq66TNZ9E28nYA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Firebase dashboard with your&nbsp;projects</figcaption></figure><p name="8159" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Note</strong>&#8202;—&#8202;It’s really easy to create a Firebase project, but if you still face any issue, follow <a href="https://enappd.com/blog/intergrate-firebase-in-react-native-app/73"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this blog</a>. Note the Firebase config parameters, which we’ll use later.</p><h4 name="d722" class="graf graf--h4 graf-after--p">Enable Anonymous login</h4><p name="7708" class="graf graf--p graf-after--h4">Once your project is created, go inside the project. Go to <strong class="markup--strong markup--p-strong">Authentication</strong> tab, and you need to toggle Anonymous login <strong class="markup--strong markup--p-strong">Enabled</strong></p><figure tabindex="0" contenteditable="false" name="094d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 438px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.5%;"></div><img class="graf-image" data-image-id="1*uzJ15QOdPmdOJSEJh-0dIg.png" data-width="1440" data-height="900" src="https://cdn-images-1.medium.com/max/800/1*uzJ15QOdPmdOJSEJh-0dIg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Enable anonymous login in&nbsp;Firebase</figcaption></figure><h3 name="748b" class="graf graf--h3 graf-after--figure">2. Create a basic React Native&nbsp;app</h3><p name="9b4d" 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 nofollow noopener"    target="_blank">official documentation</a>.</p><blockquote name="5518" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">At the time of this post, I have React-Native version 0.61.5 &amp; node 10.16.0</em></strong></blockquote><p name="f921" class="graf graf--p graf-after--blockquote">Create a blank react-native app</p><pre name="b6c0" class="graf graf--pre graf-after--p">$ react-native init RNAnonymousLogin</pre><p name="4f66" class="graf graf--p graf-after--pre">This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)</p><p name="7bb3" class="graf graf--p graf-after--p">Create the Login page and home page (after log in) similar to what is shown above. You can copy the code from the attached <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github repository.</a></p><h3 name="a05e" class="graf graf--h3 graf-after--p">Step 3: Running the app on a&nbsp;device</h3><p name="838b" class="graf graf--p graf-after--h3">To run the iOS app, you should specify simulator</p><pre name="b815" class="graf graf--pre graf-after--p">$ react-native run-ios --simulator=”iPhone X”</pre><p name="9a4b" class="graf graf--p graf-after--pre">To run Android app, you should start emulator first, either via Android Studio or <code class="markup--code markup--p-code">adb</code>&nbsp;, then call</p><pre name="9e48" class="graf graf--pre graf-after--p">$ react-native run-android</pre><p name="eba0" class="graf graf--p graf-after--pre">You’ll see the default start screen</p><figure tabindex="0" contenteditable="false" name="f593" 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="0*CrMM0M8MK2EfaVue.jpeg" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/0*CrMM0M8MK2EfaVue.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="5a2e" class="graf graf--p graf-after--figure">You can use the code provided in the attached <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github repository</a> to change the default page to look like the UI we planned earlier. Now the login page looks like this.</p><figure tabindex="0" contenteditable="false" name="8097" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 650px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.7%;"></div><img class="graf-image" data-image-id="1*0WTsFULRzxrYZj5_in4GCw.jpeg" data-width="300" data-height="650" src="https://cdn-images-1.medium.com/max/800/1*0WTsFULRzxrYZj5_in4GCw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Login page</figcaption></figure><p name="667f" class="graf graf--p graf-after--figure">Simple and sweet, just two buttons.</p><p name="6851" class="graf graf--p graf-after--p">As per the plan, next steps are</p><ol class="postList"><li name="0279" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">User logs in anonymously → go to Home Page</strong></li><li name="f91d" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">User clicks “I want to Sign Up”</strong> to link his/her credentials with the anonymous account. Email and password fields are provided to the user. User signs up.</li><li name="060a" class="graf graf--li graf-after--li">User then logs out, and <strong class="markup--strong markup--li-strong">logs back in with the credentials</strong> he/she connected to the anonymous account</li></ol><p name="7655" class="graf graf--p graf-after--li">Code for all these pages can be copied from the attached <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github repository</a></p><h4 name="f824" class="graf graf--h4 graf-after--p">React Navigation</h4><p name="3a0b" class="graf graf--p graf-after--h4">To implement login functionality, we will navigate from login page to home page, and vice versa when logging out. To implement this, we need <code class="markup--code markup--p-code">react-navigation</code> library. This library helps in navigating in a react-native app.</p><p name="bec4" class="graf graf--p graf-after--p">Follow the installation steps of <code class="markup--code markup--p-code">react-navigation</code> from the <a href="https://reactnavigation.org/docs/en/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation.</a></p><p name="f78f" class="graf graf--p graf-after--p">Steps I used are</p><pre name="42d5" class="graf graf--pre graf-after--p">$ npm install react-navigation<br>$ <code class="markup--code markup--pre-code">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view<br></code>$ npm install react-navigation-stack</pre><p name="8cb1" class="graf graf--p graf-after--pre">I didn’t modify the <code class="markup--code markup--p-code">build.gradle</code> and <code class="markup--code markup--p-code">MainActivity.java</code> files as mentioned in the documentation. But try that if the above alone doesn’t work for you. For the app’s navigation code, use <code class="markup--code markup--p-code">App.js</code> from the attached <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Github repository</a>.</p><h3 name="4429" class="graf graf--h3 graf-after--p">Step 4— Connect the React Native app to&nbsp;Firebase</h3><p name="9a1b" class="graf graf--p graf-after--h3">Install Firebase in the project using</p><pre name="ef75" class="graf graf--pre graf-after--p">$ yarn add firebase</pre><p name="dc7d" class="graf graf--p graf-after--pre">Create an <code class="markup--code markup--p-code">environment</code> directory inside the root folder. Add the firebase configuration in a new file inside <code class="markup--code markup--p-code">environment/config.js</code>&nbsp;. In <code class="markup--code markup--p-code">config.js</code> file, we will</p><ul class="postList"><li name="bc80" class="graf graf--li graf-after--p">Import Firebase</li><li name="5f61" class="graf graf--li graf-after--li">Input Firebase config parameters we picked from Firebase console</li><li name="b57a" class="graf graf--li graf-after--li">Initialize Firebase app and export for authentication</li></ul><p name="f1db" class="graf graf--p graf-after--li">Here’s the full code of Firebase <code class="markup--code markup--p-code">config.js</code> file</p><figure tabindex="0" contenteditable="false" name="dd4e" 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/102698f59f71b61db228a8cb162b7d09.js %}</div></div></figure><p name="d9e0" class="graf graf--p graf-after--figure">With this, your app is now equipped with Firebase. Next, we’ll write the functions for anonymous login, logout, linking credentials and signing in with normal credentials.</p><h3 name="af36" class="graf graf--h3 graf-after--p">Step 5— Implement anonymous login</h3><p name="e6ef" class="graf graf--p graf-after--h3">In <code class="markup--code markup--p-code">LoginPage.js</code> we’ll import <code class="markup--code markup--p-code">firebaseAuth</code> from<code class="markup--code markup--p-code">config.js</code>, and write a method to login anonymously. Our file will look like following</p><figure tabindex="0" contenteditable="false" name="dd4b" 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/65a3429a2405aee3201a18031fcdcefe.js %}</div></div></figure><p name="c5d5" class="graf graf--p graf-after--figure">When user clicks “Anonymously Login”, <strong class="markup--strong markup--p-strong">signIn</strong> function is called. It uses <code class="markup--code markup--p-code">auth.signInAnonymously()</code> method of Firebase auth module. This signs in the user anonymously.</p><p name="bb83" class="graf graf--p graf-after--p">Your user is now logged in, but still anonymous. User can browse features of your app and take a call on becoming a regular user. <strong class="markup--strong markup--p-strong">First objective is achieved 😎</strong> So easy, right?</p><h3 name="cfcd" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Convert anonymous user to a regular&nbsp;user</h3><p name="eb14" class="graf graf--p graf-after--h3">In HomePage, we will provide the user an option to convert to a regular user. User can enter email/password details and signup as a regular user. This will connect all the data of the anonymous profile with the new credentials of the user. So you don’t lose the data and easily convert the user to a regular user.</p><p name="1c03" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">HomePage.js</code> looks like following, along with the function for converting anonymous user to regular user</p><figure tabindex="0" contenteditable="false" name="b39c" 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/915a370b953f6677cabcb31298ece1f4.js %}</div></div></figure><p name="9a27" class="graf graf--p graf-after--figure">The email and password above are entered by the user. If the response goes to success, your user is successfully linked to the new credentials!</p><p name="ea00" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Logout</strong></p><p name="2cec" class="graf graf--p graf-after--p">You can Logout using the <strong class="markup--strong markup--p-strong">logout</strong> function above, included in the <code class="markup--code markup--p-code">HomePage.js</code> file.</p><p name="a0d4" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Test normal login</strong></p><p name="c757" class="graf graf--p graf-after--p">Go to login page, and allow the user to enter email and password for login. <code class="markup--code markup--p-code">firebaseAuth.signInWithEmailAndPassword</code> function can be used to login a user with already existing credentials. This is already included in <code class="markup--code markup--p-code">LoginPage.js</code> code above.</p><p name="f4ab" class="graf graf--p graf-after--p">You’ll see that the user is logged in with the linked credentials. Although we don’t have any data associated with the anonymous user to show the linking, but if your app does, the user signed in with Email/password will stay connected to that data as well.</p><p name="9a8b" class="graf graf--p graf-after--p">Overall, the process will look something like this</p><figure tabindex="0" contenteditable="false" name="2ef2" 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*W9heltnnFtrbcGCxPwBVSw.gif" data-width="350" data-height="622" src="https://cdn-images-1.medium.com/max/800/1*W9heltnnFtrbcGCxPwBVSw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Anonymous login and linking user credentials in React Native app using&nbsp;Firebase</figcaption></figure><p name="4c18" class="graf graf--p graf-after--figure">Tada&nbsp;! You have learnt how to implement anonymous login in React Native app using Firebase. 🎉</p><blockquote name="2ab1" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">react-native-anonymous-login</a></blockquote><h3 name="7a48" class="graf graf--h3 graf-after--blockquote">Conclusion</h3><p name="7b07" class="graf graf--p graf-after--h3">In this blog, we learned how to implement anonymous login in React Native using Firebase. We also learned how we can connect an anonymous user to a new user with Email/password account. This way you can allow a user to anonymously login to the app, browse the features, and then signup if he/she likes, without losing the anonymous account data!</p><blockquote name="d788" class="graf graf--blockquote graf-after--p">Complete source code of this tutorial is available in the <a href="https://github.com/enappd/react-native-anonymous-login"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">react-native-anonymous-login</a></blockquote><h3 name="84b4" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="aae2" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Apple Pay in React Native apps, here are some other topics you can look into</p><ul class="postList"><li name="39b9" 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"    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"    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"    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"    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"    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"    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"    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"    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"    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"    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></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"    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="3172" 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"    target="_blank">Create Awesome Apps in React Native</a> using Full App</li></ul><p name="5017" 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 nofollow noopener"    target="_blank">React Native Full App</a></p><figure tabindex="0" contenteditable="false" name="a0ad" 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="0*50h94UU2H2pkisje.jpeg" data-width="800" data-height="800" src="https://cdn-images-1.medium.com/max/800/0*50h94UU2H2pkisje.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="4510" class="graf graf--p graf-after--figure graf--trailing">This blog was originally published on <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p></div></div></section></div></article></main>