Facebook login in React native

Adding Facebook login to a react native app is cool feature. We have to use “react-native-fbsdk” library . It can be a complex task , there are many steps defined on Github and if you are new to react native you can be confused

So i have decided to write step by step guide on how to integrate fb login in react native . You can see the complete code on Github

Step 1 : Create App On Facebook Developers And Add Basic App Info

a ) Login with your facebook account and go to https://developers.facebook.com/ and create new app

On successful creation of app you will have an app id like my app id is “964336743958925” . Keep it safe . It will be used in future

b ) Add Basic Information

Go to your facebook app dashboard settings https://developers.facebook.com/apps/{app_id}/settings/basic/

“app_id” , change it with our facebook app id

Add “Contact Email, Privacy Policy Url, Category, App Icon, Business use” and then save

c) Add Platform IOS

Go to bottom of Basic Settings and add platform IOS . You have to add Bundle identifier of your app . You can find Bundle identifier in Xcode General Tab . As my app bundle identifier is “org.reactjs.native.example.FbSdkSample”

See Steps For Add Platform IOS

D) Add Platform ANDROID

You need to check “applicationId” of your android project which you can find in “android/app/build.gradle”

See Steps For Add Platform ANDROID

i ) Add “Google Play Package Name” : which is applicationId of android like my app have “com.fbsdksample

ii ) Class Name : which will be for my app “com.fbsdksample.MainActivity” . Please Change according to your app id

Note : If popup comes for package name verification select “Use this package name”

iii ) You have to Add “Key Hashes” for Debug and Release Build

Please check these links to create hash key(Debug and Release)

a ) Stackoverflow Link

b) Stackoverflow Link

c ) Fb Link

Note : You do not need release hash key if you only want to test and do not want to publish app with release key store.

E ) Make Facebook App Live

Finally Step 1 is complete

Step 2: Add react-native-fbsdk library and link library

a ) Add library

yarn add react-native-fbsdk

Or, if using npm:

npm install react-native-fbsdk

b ) Link library

if react native ≥0.60

you have to just run this command for IOS only and nothing have to done for ANDROID

cd ios && pod install 

if react native version <0.60

Check manual link steps for IOS and ANDROID on Github Page

Step 3 : Configuration ANDROID/IOS Projects

A ) Android Configuration

======================

a ) Add Facebook App ID

1. Open your /app/res/values/strings.xml file.

2. Add a string element with the name attribute facebook_app_id and value as your Facebook App ID (Replace it with your App Id)to the file. For example

<string name="facebook_app_id">Facebook App ID</string>

b ) Add uses-permission

1. Open /app/manifests/AndroidManifest.xml

2. Add a uses-permission element to the manifest:

<uses-permission android:name="android.permission.INTERNET"/>

c ) Add a meta-data element to the application element:

1. Open /app/manifests/AndroidManifest.xml

2. Add a meta-data element to the manifest:

<application android:label="@string/app_name" ...>
...
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
...
</application>

B) IOS Configuration

======================

a ) Configure Info.plist

  1. In Xcode, right-click your project’s Info.plist file and select Open As -> Source Code.
  2. Insert the following XML snippet into the body of your file just before the final </dict> element.

Note : Replace {your-app-id}, and {your-app-name} with your app's App's ID and name found on the Facebook App Dashboard.

b ) Connect App Delegate

To post-process the results from actions that require you to switch to the native Facebook app or Safari, such as Facebook Login or Facebook Dialogs, you need to connect your AppDelegate class to the FBSDKApplicationDelegate object. To accomplish this, add the following code to your AppDelegate.m file.

Step 4: Add code in react native project for Login

a ) Login Button + Access Token+ Get User Info

See App Preview

b ) Custom Login Button + Access Token+ Get User Info

See App Preview

Finally We have integrated Fb login in react native app . You can see the complete code on Github

Thanks for reading my article . If you have enjoyed this article, feel free to hit that clap button 👏 to help others find it.

--

--

--

Senior Mobile Application Developer at Cubix Inc with more than 6 years of experience in React Native/Android/iOS

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding the Modern Web Stack: Running a Local Web Server

What is Node.js and why you need it?

Understanding Important Differences Between NodeJS And AngularJS

How to make your sluggish Jest v23 tests go faster

Setting headers in postman via scripts

Object Destructuring in JavaScript — A Comprehensive Beginner’s Guide

Angular @Input @Output and Services for state management

Coding Stories: Demystifying Drops

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mehran Khan

Mehran Khan

Senior Mobile Application Developer at Cubix Inc with more than 6 years of experience in React Native/Android/iOS

More from Medium

Creating Custom Icon Fonts in React Native and Expo

To Expo or not to Expo — building the Thriva app

Reactjs vs React Native: Which one should you consider for your next app?

How to Create a Scaling Drawer Using React Navigation 6

Open kitchen drawer