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)
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
- In Xcode, right-click your project’s Info.plist file and select Open As -> Source Code.
- 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.