Facebook login in React Native apps
Tags: reactnative, facebook, login
Published: 2020-03-27 03:49:53

<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="eae3" 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="a833" class="graf graf--p graf-after--figure">In this post, you will learn how to implement a Facebook authentication in React native apps.</p><p name="3a8a" class="graf graf--p graf-after--p">We will cook a sample app, where users can log in using their Facebook account. After login, the user can see their basic profile information on the home page.</p><blockquote name="feb0" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/facebook-login-rn.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">React-native-facebook-Login-Starter</em></a></blockquote><h3 name="47d2" class="graf graf--h3 graf-after--blockquote">Social logins&#8202;—&#8202;What and&nbsp;why</h3><p name="9913" class="graf graf--p graf-after--h3 is-selected">It’s helpful to use social sign-in with React Native for your users who would rather not create and remember another username/password combination. Instead, you can allow users to sign in with accounts they already own. You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. The user’s chosen provider will handle all of this for you. Plus, in mobile apps, the Facebook login is automatically done with the pre-installed Facebook app.</p><h3 name="d7cc" class="graf graf--h3 graf-after--p">Facebook login&#8202;—&#8202;What and&nbsp;why</h3><p name="fc42" class="graf graf--p graf-after--h3">There are several reasons why you should use a Facebook login in your app</p><ul class="postList"><li name="16d8" 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 log in using Facebook. In another scenario, the user will have to type in an email/password and login</li><li name="9351" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">No “forgot password”&#8202;</strong>—&#8202;When your app uses Facebook login, the user does not have to worry about forgetting the password for your app’s login</li><li name="e6d2" 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. Facebook login will always have a valid email/phone number associated.</li><li name="05ea" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Single solution&#8202;—&#8202;</strong>Facebook log in can allow your users to use single login credentials across multiple devices</li><li name="3e01" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Facebook integration</strong>&#8202;—&#8202;If your app uses Facebook authentication, you can use Facebook APIs inside your app as well. This can include fetching user tweets etc.</li><li name="b474" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Trust</strong>&#8202;—&#8202;Nowadays, people generally trust social logins moreover custom email logins. Social logins follow standard privacy protocols and hence are more reliable for information sharing</li></ul><h3 name="553c" class="graf graf--h3 graf-after--li">React Native Authentication</h3><p name="3e3e" class="graf graf--p graf-after--h3">The React Native has been around for around 5 years and has been very popular among developers for its ease of usage over Swift / Java. Plus it requires you to have single source code for both an Android and an iOS app. What more can a developer ask for!</p><p name="9429" class="graf graf--p graf-after--p">There are several ways of Authentication in React Native apps</p><ul class="postList"><li name="17df" 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="19a5" 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.<br><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">Firebase</em></strong> is the most popular among these for mobile apps</li><li name="0544" 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 user authentication. But this method is the most time taking one as well.</li></ul><h3 name="9ecc" class="graf graf--h3 graf-after--li">Steps for Facebook authentication</h3><p name="d58e" class="graf graf--p graf-after--h3">We will follow these step-by-step instructions to create our React Native app with Facebook authentication</p><p name="14d9" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1: Create a basic React Native app</strong></p><p name="cfb1" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2: Facebook Developer Console&#8202;—&#8202;Create your app</strong></p><p name="1ebb" class="graf graf--p graf-after--p">&zwnj;&zwnj;<strong class="markup--strong markup--p-strong">Step 3: Add your Platforms to Facebook</strong></p><p name="3da7" class="graf graf--p graf-after--p">&zwnj;<strong class="markup--strong markup--p-strong">Step 4: Install the React Native FBSDK</strong> <strong class="markup--strong markup--p-strong">to connect your app with Facebook</strong></p><p name="2ec4" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5: Running Apps</strong></p><p name="a3ef" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 6: Authenticate Users using Facebook</strong></p><p name="86e8" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 7: Test your app on Android</strong></p><h3 name="6960" class="graf graf--h3 graf-after--p">1. Create a basic React Native&nbsp;app</h3><p name="f682" class="graf graf--p graf-after--h3">First, make sure you have all pre-requisites to create a react-native app as per the <a href="https://facebook.github.io/react-native/docs/getting-started.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">official documentation</a>.</p><blockquote name="cc11" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">At the time of this post, I have React-Native version 0.60</strong></blockquote><p name="2507" class="graf graf--p graf-after--blockquote">Create a blank react-native app (Replace <code class="markup--code markup--p-code">myApp</code> with your own name)</p><pre name="2cb3" class="graf graf--pre graf-after--p">$ react-native init myApp</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. (either Android or iOS)</p><h3 name="4360" class="graf graf--h3 graf-after--p">Step 2: Facebook Developer Console</h3><p name="4c6a" class="graf graf--p graf-after--h3">The first thing we need to do is to create a new application in Facebook’s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our React Native application.</p><p name="fd92" class="graf graf--p graf-after--p">For that, you’ll need to go to the <a href="https://developers.facebook.com/apps"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">F</strong></a><a href="https://developers.facebook.com/apps"  class="markup--anchor markup--p-anchor" rel="noopener noreferrer noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--p-strong">acebook developer console</strong></a> and create a new app.</p><figure tabindex="0" contenteditable="false" name="8ed7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 313px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44.7%;"></div><img class="graf-image" data-image-id="0*25XkXnSODKdAfMqY" data-width="1912" data-height="855" src="https://cdn-images-1.medium.com/max/800/0*25XkXnSODKdAfMqY"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create a new app in Facebook Developer console</figcaption></figure><p name="9511" class="graf graf--p graf-after--figure">Once we finish creating our app, we will go to the Facebook app dashboard and pick <strong class="markup--strong markup--p-strong">App Id</strong> from there. It will be required in installing the Facebook plugin in the app</p><figure tabindex="0" contenteditable="false" name="95a9" 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="0*QT4zATT8m2s_NfQI" data-width="1919" data-height="855" src="https://cdn-images-1.medium.com/max/800/0*QT4zATT8m2s_NfQI"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Facebook Developer Console&#8202;—&#8202;App ID on&nbsp;top-left</figcaption></figure><h3 name="e7d6" class="graf graf--h3 graf-after--figure">&zwnj;&zwnj;Step 3: Add your Platforms to&nbsp;Facebook</h3><p name="55ae" class="graf graf--p graf-after--h3">We need to let Facebook know which platforms we’ll be using (<em class="markup--em markup--p-em">if it’s just web, iOS, or Android</em>).</p><p name="7ec6" class="graf graf--p graf-after--p">&zwnj;In our case, we will add all platforms iOS and Android.</p><p name="991d" class="graf graf--p graf-after--p">&zwnj;To add the platforms, go ahead inside your Facebook dashboard and click on <strong class="markup--strong markup--p-strong">Settings</strong>, then right below the app’s information you’ll see a button that says <strong class="markup--strong markup--p-strong">Add Platform</strong>, click it.</p><p name="5428" class="graf graf--p graf-after--p">You’ll see several options for the platforms you’re creating</p><figure tabindex="0" contenteditable="false" name="1dd6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 213px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 30.5%;"></div><img class="graf-image" data-image-id="0*0VnMWKBszvJ5iwCf" data-width="1041" data-height="317" src="https://cdn-images-1.medium.com/max/800/0*0VnMWKBszvJ5iwCf"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Options to create platforms</figcaption></figure><h4 name="de96" class="graf graf--h4 graf-after--figure">Add Platforms in Facebook dashboard</h4><p name="7565" class="graf graf--p graf-after--h4">&zwnj; <strong class="markup--strong markup--p-strong">Let’s start with iOS:-</strong> You’ll see a form asking you for some information, right now we just need the <code class="markup--code markup--p-code">Bundle ID</code>.</p><figure tabindex="0" contenteditable="false" name="fc10" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 380px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54.300000000000004%;"></div><img class="graf-image" data-image-id="0*aCcsrSi7qQNWASm0" data-width="1007" data-height="547" src="https://cdn-images-1.medium.com/max/800/0*aCcsrSi7qQNWASm0"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Create iOS app in Facebook&nbsp;console</figcaption></figure><p name="42b3" class="graf graf--p graf-after--figure">&zwnj;Once you add the Bundle ID, just follow the process to create the app.</p><p name="4db2" class="graf graf--p graf-after--p">&zwnj;<strong class="markup--strong markup--p-strong">Android:-</strong> The difference is that instead of <code class="markup--code markup--p-code">Bundle ID</code>, Android calls it “Google Play Package Name.”</p><h3 name="c15c" class="graf graf--h3 graf-after--p">&zwnj;Step 4: Install the React Native FBSDK to connect your app with&nbsp;Facebook</h3><h4 name="f6eb" class="graf graf--h4 graf-after--h3">Installation</h4><p name="80b4" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Install JavaScript packages</strong></p><p name="fb62" class="graf graf--p graf-after--p">Install the <code class="markup--code markup--p-code">react-native-fbsdk</code> package:</p><pre name="621a" class="graf graf--pre graf-after--p">yarn add react-native-fbsdk</pre><blockquote name="0ded" class="graf graf--blockquote graf-after--pre"><em class="markup--em markup--blockquote-em">Or, if using npm:</em></blockquote><pre name="eb86" class="graf graf--pre graf-after--blockquote">npm install react-native-fbsdk</pre><p name="93b6" class="graf graf--p graf-after--pre">Finally, link the SDK to configure the iOS and Android projects:</p><pre name="e688" class="graf graf--pre graf-after--p">react-native link react-native-fbsdk</pre><h4 name="3b54" class="graf graf--h4 graf-after--pre">Configure projects</h4><p name="c37f" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Android</strong></p><p name="1069" class="graf graf--p graf-after--p">Assuming you have <a href="http://developer.android.com/sdk/index.html"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Android Studio</a> installed, open the project with Android Studio.</p><p name="28c9" class="graf graf--p graf-after--p">Go to <code class="markup--code markup--p-code">MainApplication.java</code> under <code class="markup--code markup--p-code">app/src/main/java/com/&lt;project name&gt;/</code> to complete setup.</p><p name="df29" class="graf graf--p graf-after--p">Register SDK package in method <code class="markup--code markup--p-code">getPackages()</code>.</p><pre name="392b" class="graf graf--pre graf-after--p">import com.facebook.reactnative.androidsdk.FBSDKPackage;<br>// ...<br>private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {<br>    <a href="http://twitter.com/Override"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @Override"    target="_blank">@Override</a><br>    public boolean getUseDeveloperSupport() {<br>      return BuildConfig.DEBUG;<br>    }<br><a href="http://twitter.com/Override"  class="markup--anchor markup--pre-anchor" title="Twitter profile for @Override"    target="_blank">@Override</a><br>    protected List&lt;ReactPackage&gt; getPackages() {<br>      return Arrays.&lt;ReactPackage&gt;asList(<br>          new MainReactPackage(),<br>          new FBSDKPackage()<br>      );<br>    }<br>};</pre><p name="7456" class="graf graf--p graf-after--pre">Also, you need to add in your <code class="markup--code markup--p-code">settings.gradle</code>:</p><pre name="933e" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">include ':react-native-fbsdk'<br>project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')</code></pre><p name="2492" class="graf graf--p graf-after--pre">Before you can run the project, follow the <a href="https://developers.facebook.com/docs/android/getting-started/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Getting Started Guide</a> for Facebook Android SDK to set up a Facebook app. You can skip the build.gradle changes since that’s taken care of by the rnpm link step above, but make sure you follow the rest of the steps such as updating <code class="markup--code markup--p-code">strings.xml</code> and <code class="markup--code markup--p-code">AndroidManifest.xml</code>.</p><p name="b8cb" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">iOS</strong></p><p name="4eb9" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">react-native-fbsdk</code> has been linked by <code class="markup--code markup--p-code">react-native link</code>. The next step will be downloading and linking the native Facebook SDK for iOS.</p><p name="3b00" class="graf graf--p graf-after--p">Make sure you have the latest <a href="https://developer.apple.com/xcode/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Xcode</a> installed. Open the&nbsp;.xcodeproj in Xcode found in the <code class="markup--code markup--p-code">ios</code> subfolder from your project's root directory. Now, follow <em class="markup--em markup--p-em">all the steps except the pod install (Step 2)</em> in the <a href="https://developers.facebook.com/docs/ios/getting-started/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">Getting Started Guide</a> for Facebook SDK for iOS. Along with <code class="markup--code markup--p-code">FBSDKCoreKit.framework</code>, don't forget to import <code class="markup--code markup--p-code">FBSDKShareKit.framework</code> and <code class="markup--code markup--p-code">FBSDKLoginKit.framework</code>into your Xcode project.</p><p name="1a0e" class="graf graf--p graf-after--p">If you’re using React Native’s RCTLinkingManager</p><p name="099d" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">AppDelegate.m</code> file can only have one method for <code class="markup--code markup--p-code">openUrl</code>. If you're also using <code class="markup--code markup--p-code">RCTLinkingManager</code> to handle deep links, you should handle both results in your <code class="markup--code markup--p-code">openUrl</code> method.</p><pre name="2ca5" class="graf graf--pre graf-after--p">- (BOOL)application:(UIApplication *)app<br>            openURL:(NSURL *)url<br>            options:(NSDictionary&lt;UIApplicationOpenURLOptionsKey,id&gt; *)options<br>{<br>  if ([[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options]) {<br>    return YES;<br>  }<br>if ([RCTLinkingManager application:app openURL:url options:options]) {<br>    return YES;<br>  }<br>return NO;<br>}</pre><h4 name="86fb" class="graf graf--h4 graf-after--pre">Troubleshooting</h4><blockquote name="55a4" class="graf graf--blockquote graf-after--h4">I cannot run the Android project.</blockquote><ul class="postList"><li name="a641" class="graf graf--li graf-after--blockquote">Make sure you added the code snippet in step 3.1.</li><li name="5d5e" class="graf graf--li graf-after--li">Make sure you set up a Facebook app and updated the <code class="markup--code markup--li-code">AndroidManifest.xml</code> and <code class="markup--code markup--li-code">res/values/strings.xml</code> with Facebook app settings.</li></ul><blockquote name="cb6d" class="graf graf--blockquote graf-after--li">I get a build error stating that one of the Facebook SDK files was not found&#8202;—&#8202;eg. <code class="markup--code markup--blockquote-code"><em class="markup--em markup--blockquote-em">FBSDKLoginKit/FBSDKLoginKit.h file not found</em></code>.</blockquote><ul class="postList"><li name="267e" class="graf graf--li graf-after--blockquote">Make sure that the Facebook SDK frameworks are installed in <code class="markup--code markup--li-code">~/Documents/FacebookSDK</code>.</li><li name="c6ca" class="graf graf--li graf-after--li">Make sure that <code class="markup--code markup--li-code">FBSDK[Core, Login, Share]Kit.framework</code> show up in the Link Binary with Libraries section of your build target's Build Phases.</li><li name="25de" class="graf graf--li graf-after--li">Make sure that <code class="markup--code markup--li-code">~/Documents/FacebookSDK</code> is in the Framework Search Path of your build target's Build Settings. You may have to select the <code class="markup--code markup--li-code">All</code> tab to see and search for the Framework Search Path.</li></ul><blockquote name="5b36" class="graf graf--blockquote graf-after--li">I get build errors like <code class="markup--code markup--blockquote-code"><em class="markup--em markup--blockquote-em">Warning: Native component for "RCTFBLikeView" does not exist</em></code>:</blockquote><ul class="postList"><li name="bbac" class="graf graf--li graf-after--blockquote">Make sure that <code class="markup--code markup--li-code">libRCTFBSDK.a</code> shows up in the Link Binary with Libraries section of your build target's Build Phases.</li></ul><blockquote name="6796" class="graf graf--blockquote graf-after--li">I get this build error: <code class="markup--code markup--blockquote-code"><em class="markup--em markup--blockquote-em">no type or protocol named UIApplicationOpenURLOptionsKey</em></code>:</blockquote><ul class="postList"><li name="0377" class="graf graf--li graf-after--blockquote">Your Xcode version is too old. Upgrade to Xcode 10.0+.</li></ul><h3 name="c784" class="graf graf--h3 graf-after--li">Step 5: Running&nbsp;Apps</h3><p name="437c" class="graf graf--p graf-after--h3">To run the iOS app, you should specify simulator</p><p name="03c1" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">react-native run-ios&#8202;—&#8202;simulator=”iPhone X”</code></p><p name="8d08" class="graf graf--p graf-after--p">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 <code class="markup--code markup--p-code">react-native run-android</code>&nbsp;.</p><p name="ba77" class="graf graf--p graf-after--p">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><h3 name="03b5" class="graf graf--h3 graf-after--p">Step 6: Authenticate Users using&nbsp;Facebook</h3><h4 name="42f6" class="graf graf--h4 graf-after--h3">Usage</h4><p name="e513" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Login</strong></p><pre name="e80b" class="graf graf--pre graf-after--p">import React, { Component } from 'react';<br>import { View } from 'react-native';<br>import { LoginButton, AccessToken } from 'react-native-fbsdk';<br>export default class Login extends Component {<br>  render() {<br>    return (<br>      &lt;View&gt;<br>        &lt;LoginButton<br>          onLoginFinished={<br>            (error, result) =&gt; {<br>              if (error) {<br>                console.log("login has error: " + result.error);<br>              } else if (result.isCancelled) {<br>                console.log("login is cancelled.");<br>              } else {<br>                AccessToken.getCurrentAccessToken().then(<br>                  (data) =&gt; {<br>                    console.log(data.accessToken.toString())<br>                  }<br>                )<br>              }<br>            }<br>          }<br>          onLogoutFinished={() =&gt; console.log("logout.")}/&gt;<br>      &lt;/View&gt;<br>    );<br>  }<br>};</pre><p name="a456" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Requesting additional permissions with Login Manager</strong></p><pre name="14af" class="graf graf--pre graf-after--p">// ...<br>import { LoginManager } from "react-native-fbsdk";<br>// ...<br>// Attempt a login using the Facebook login dialog asking for default permissions.<br>LoginManager.logInWithPermissions(["public_profile"]).then(<br>  function(result) {<br>    if (result.isCancelled) {<br>      console.log("Login cancelled");<br>    } else {<br>      console.log(<br>        "Login success with permissions: " +<br>          result.grantedPermissions.toString()<br>      );<br>    }<br>  },<br>  function(error) {<br>    console.log("Login fail with error: " + error);<br>  }<br>);</pre><p name="ca11" class="graf graf--p graf-after--pre">Now that the app is all connected to Facebook Auth, let’s write the actual code to call login/logout, etc functions.</p><p name="6fa9" class="graf graf--p graf-after--p">First of all, I have created a separate file <code class="markup--code markup--p-code">LoginController.js</code> and imported it in <code class="markup--code markup--p-code">App.js</code>&nbsp;, just to maintain a good code structure.</p><figure tabindex="0" contenteditable="false" name="5e09" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 320px; max-height: 534px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 166.9%;"></div><img class="graf-image" data-image-id="1*M3YY9WkBmpmz6H-ZAiNKMw.png" data-width="320" data-height="534" src="https://cdn-images-1.medium.com/max/800/1*M3YY9WkBmpmz6H-ZAiNKMw.png"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="c15f" class="graf graf--p graf-after--figure">My <code class="markup--code markup--p-code">App.js</code> looks like following (nothing fancy, I’m not even gonna waste a gist here)</p><pre name="dff4" class="graf graf--pre graf-after--p">import React, { Fragment } from 'react';<br>import LoginController from './LoginController';<br>const App = () =&gt; {return (&lt;LoginController/&gt;);};<br>export default App;</pre><p name="7af5" class="graf graf--p graf-after--pre">Yes, that’s it 😆</p><h4 name="f8c5" class="graf graf--h4 graf-after--p">5.1 Implement a Facebook login&nbsp;button</h4><p name="a29c" class="graf graf--p graf-after--h4">In the <code class="markup--code markup--p-code">LoginController.js</code>&nbsp;, I add the Facebook login button using the following code</p><pre name="0b8e" class="graf graf--pre graf-after--p">import { LoginButton, AccessToken } from 'react-native-fbsdk';<br>.....(inside render)<br> &lt;LoginButton<br>          onLoginFinished={<br>            (error, result) =&gt; {<br>              if (error) {<br>                console.log("login has error: " + result.error);<br>              } else if (result.isCancelled) {<br>                console.log("login is cancelled.");<br>              } else {<br>                AccessToken.getCurrentAccessToken().then(<br>                  (data) =&gt; {<br>                    console.log(data.accessToken.toString())<br>                  }<br>                )<br>              }<br>            }<br>          }<br>          onLogoutFinished={() =&gt; console.log("logout.")}/&gt;<br>....</pre><p name="951e" class="graf graf--p graf-after--pre">This shows the beautiful Facebook-Button as per their marketing guidelines.</p><p name="a5f2" class="graf graf--p graf-after--p">Overall, my <code class="markup--code markup--p-code">LoginController.js</code> file looks like this (a bit long, I know)</p><figure tabindex="0" contenteditable="false" name="8c38" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/66743e1c001d89abd3471c603825e913.js %}</div></div></figure><figure tabindex="0" contenteditable="false" name="3e71" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*ESdpmUFHeFV_9g-3xxMRtg.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*ESdpmUFHeFV_9g-3xxMRtg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Before Login</figcaption></figure><figure tabindex="0" contenteditable="false" name="e4a8" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 200%;"></div><img class="graf-image" data-image-id="1*VDRkgnqlJhbf4P3pbdyc5Q.jpeg" data-width="300" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*VDRkgnqlJhbf4P3pbdyc5Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">After login</figcaption></figure><h3 name="b5bf" class="graf graf--h3 graf-after--figure">Step 7: Test your app on&nbsp;Android</h3><p name="0941" class="graf graf--p graf-after--h3">Let’s now build the app for iOS. I am using a simulator, but you can always use a real device as well.</p><p name="3074" class="graf graf--p graf-after--p">Run the app on Android simulator using</p><pre name="e96a" class="graf graf--pre graf-after--p">react-native run-android</pre><p name="44c5" class="graf graf--p graf-after--pre">Here’s how my Facebook Login app works</p><figure tabindex="0" contenteditable="false" name="3984" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 534px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*KXhqHpz_VF8_1OjHpofGxg.gif" data-width="300" data-height="534" src="https://cdn-images-1.medium.com/max/800/1*KXhqHpz_VF8_1OjHpofGxg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Facebook Working</figcaption></figure><h3 name="4b4b" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="adcf" class="graf graf--p graf-after--h3">In this post, you learned how to implement Facebook login in your React Native app.</p><blockquote name="e406" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Complete source code of this tutorial is available in the </em><a href="https://github.com/enappd/facebook-login-rn.git"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">React-native-facebook-Login-Starter</em></a></blockquote><h3 name="8df3" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="0993" class="graf graf--p graf-after--h3">Now that you have learnt about setting up Push Notifications 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="9c80" 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 is-defaultValue graf-after--p"><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="87b1" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>