Facebook Login in React Native

Create App On Facebook Developers And Add Basic App Info

Before we can use Facebook login in our React Native app, we need to create an app on the Facebook Developers website and add some basic information.

Basic Information

1. Go to https://developers.facebook.com/ and log in with your Facebook account.
2. Click on “Create App” and choose “Build Connected Experiences”.
3. Enter a name for your app and click on “Create App”.
4. On the dashboard, click on “Settings” and then “Basic”.
5. Enter your app’s display name, contact email, privacy policy URL, terms of service URL, and category.
6. Click on “Save Changes”.

Platform iOS

1. On the dashboard, click on “Add Platform” and choose “iOS”.
2. Enter your app’s bundle ID, which is usually the same as your project name in Xcode.
3. Click on “Save Changes”.

Platform Android

1. On the dashboard, click on “Add Platform” and choose “Android”.
2. Enter your app’s package name, which is usually the same as your application ID in Android Studio.
3. Enter your app’s class name, which is usually the same as your main activity name with the package name prefix.
4. Click on “Save Changes”.

Google Play Package Name

• If you plan to publish your app on Google Play Store, you need to enter your app’s Google Play package name on the dashboard.
• This is usually the same as your app’s package name, unless you have changed it in the Google Play Console.
• After changing the name, click on “Save Changes”.

Class Name

• If you plan to use deep linking or app invites with Facebook login, you need to enter your app’s class name on the dashboard.
• This is usually the same as your main activity name with the package name prefix.
• After adding the class name, click on “Save Changes”.

Add Key Hashes for Debug and Release Build

• To enable Facebook login on Android devices, you need to add key hashes for both debug and release build of your app on the dashboard.
• A key hash is a unique identifier for your app’s signing certificate, which is used to verify your app’s identity by Facebook.
• To generate a key hash for debug build, you can use the following command in a terminal:

• To generate a key hash for release build, you need to replace androiddebugkey with your release key alias and ~/.android/debug.keystore with your release keystore path in the command above.
• You will be prompted to enter a password for your keystore. The default password for debug keystore is android.
• Copy the output of the command and paste it in the “Key Hashes” field on the dashboard.
• Click on “Save Changes”.

Make Facebook App Live

• By default, your app is in development mode, which means only you and other developers of your app can use Facebook login.
• To make your app live and available to all users, you need to switch it to live mode on the dashboard.
• Click on the toggle button next to “In Development” and confirm the change.

Add react-native-fbsdk library and link library

To use React Native Facebook login in our app, we need to add the react-native-fbsdk library and link it with our native projects.

Add library To add the react-native-fbsdk library, we can use npm or yarn in our project directory:

iOS Manual Linking

1. Open Xcode and open your project’s workspace file (.xcworkspace).
2. Right-click on your project name in the left sidebar and choose “Add Files to [your project name]”.
3. Navigate to node_modules/react-native-fbsdk/ios and select RCTFBSDK.xcodeproj.
4. Click on “Add”.
5. In Xcode, click on your project name in the left sidebar and choose your target under “Targets”.
6. Click on “Build Phases” and expand “Link Binary With Libraries”.
7. Click on “+” and add libRCTFBSDK.a, FBSDKCoreKit.framework, FBSDKLoginKit.framework, and FBSDKShareKit.framework.
8. Click on “+” again and add libsqlite3.tbd, libz.tbd, SafariServices.framework, WebKit.framework, Bolts.framework, CoreGraphics.framework, QuartzCore.framework, Security.framework, Social.framework, Accounts.framework, AudioToolbox.framework, CoreLocation.framework, CoreMotion.framework, Foundation.framework, UIKit.framework.
9. Click on “+” again and add -ObjC under “Other Linker Flags”.
10. In Xcode, click on your project name in the left sidebar and choose your target under “Targets”.
11. Click on “Build Settings” and search for “Header Search Paths”.
12. Double-click on its value and add $(SRCROOT)/../node_modules/react-native-fbsdk/ios/RCTFBSDK with recursive option.

Android Manual Linking

1. Open Android Studio and open your project’s android folder (android).
2. In Android Studio, right-click on your app module (app) in the left sidebar and choose “New” -> “Module”.
3. Choose “Import Gradle Project” and click on “Next”.
4. Navigate to node_modules/react-native-fbsdk/android and select it.
5. Click on “Finish”.
6. In Android Studio, right-click on your app module (app) in the left sidebar and choose “Open Module Settings”.
7. Click on “Dependencies” tab and click on “+” at the bottom.
8. Choose “Module Dependency” and select “”.
9. Click on “OK”.

Configuration in ANDROID/IOS Projects

After adding and linking the react-native-fbsdk library with our native projects, we need to configure some settings for using Facebook SDKs.

Android Configuration

To configure our Android project for using Facebook SDKs, we need to follow these steps:

Add Facebook App ID

We need to add our Facebook app ID to our Android project so that it can communicate with Facebook servers.

To do this:

• Open Android Studio and open your project’s android folder (android).
• In Android Studio, open app/src/main/res/values/strings.xml file.
• Add a string resource with name "facebook_app_id" and value as your Facebook app ID. For example:

• In Android Studio, open app/src/main/AndroidManifest.xml file.
• Add a meta-data element inside element with name "com.facebook.sdk.ApplicationId" and value as "@string/facebook_app_id". For example:

Add uses-permission

We need to add some permissions to our Android project so that it can access internet and user’s profile information.

To do this:

• In Android Studio, open app/src/main/AndroidManifest.xml file.
• Add elements inside element with names "android.permission.INTERNET" , "android.permission.ACCESS_NETWORK_STATE" , "android.permission.READ_EXTERNAL_STORAGE" , "android.permission.WRITE_EXTERNAL_STORAGE" . For example:

Add a meta-data element to the application element

We need to add a meta-data element to our Android project to enable Facebook SDK initialization.

To do this:

• In Android Studio, open app/src/main/AndroidManifest.xml file.
• Add a meta-data element inside element with name "com.facebook.sdk.ApplicationId" and value as "@string/facebook_app_id". For example:

iOS Configuration

To configure our iOS project for using Facebook SDKs, we need to follow these steps:

Configure Info.plist We need to configure our Info.plist file to add some settings for using Facebook SDKs.

To do this:

• Open Xcode and open your project’s workspace file (.xcworkspace).
• In Xcode, open Info.plist file under your app target.
• Right-click on any blank space and choose “Add Row”.
• Enter “FacebookAppID” as the key and your Facebook app ID as the value.

FacebookAppID

• Right-click on any blank space and choose “Add Row”.
• Enter “FacebookDisplayName” as the key and your app’s display name as the value.

FacebookDisplayName

• Right-click on any blank space and choose “Add Row”.
• Enter “LSApplicationQueriesSchemes” as the key and choose “Array” as the type.
• Expand the array and add two items with values “fbapi” and “fbauth2”. For example:

LSApplicationQueriesSchemes

Connect App Delegate

We need to connect our app delegate with Facebook SDKs to handle the login flow.

To do this:

• Open Xcode and open your project’s workspace file (.xcworkspace).
• In Xcode, open AppDelegate.m file under your app target.
• Import FBSDKCoreKit at the top of the file:

• Add the following code inside application:didFinishLaunchingWithOptions: method:

• Add the following code at the end of the file:

Add code in react native project for Login

After configuring our native projects for using Facebook SDKs, we can add some code in our React Native project to use React Native Facebook login.

Login Button + Access Token + Get User Info

We can use the component provided by react-native-fbsdk to render the native Facebook login button and handle the login flow. We can also use the AccessToken module to get the access token of the logged-in user, and the GraphRequest module to make requests to the Facebook Graph API to get the user’s basic information such as name and email.

To do this:

• Import LoginButton, AccessToken, and GraphRequest from react-native-fbsdk at the top of your React Native component file:

• Create a state variable to store the user’s information:

• Create a function to handle the graph request callback:

• Create a function to get the user’s information using graph request:

• Create a function to handle the login finished event:

• Render a component with some props:

The button should look like this:

Handling the same process for Custom Button

If you have created a custom button, add the below function s callback to the "onPress" prop of your button.

With some basic styles, the custom button should look like this:

Handle Logout

To logout the user, add the following function as a callback to the onPress prop of your LogOut button: