Facebook Login with React Native for iOS

Getting Facebook login to work with React Native can be notorious to configure. This article has all the steps needed to get it working quickly.

Start with creating a React Native project. Fire up the terminal and run the following command. I am creating a project with the name RougeOne.

react-native init RougeOne

Once the project is created, change into the ios folder in the project directory.

cd RougeOne/ios

Open the project is Xcode, using the command

open RougeOne.xcodeproj/

Run the project in Xcode to make sure everything is ok. Hit the play button as shown in the diagram below:

There should not be any errors and the app should open in the simulator as shown below.

In the terminal, make sure you are in the root of the project directory for RougeOne. Run the commands below.

react-native install react-native-fbsdk
react-native link react-native-fbsdk

Now try running the project in Xcode. If everything works perfectly, then great. However, at the time of writing, you may end up with the following error.

‘FBSDKCoreKit/FBSDKCoreKit.h’ file not found

To resolve this error, you will need to manually link FBSDK to your project. Do the following to fix this error.

1) Open the folder RougeOne/node_modules/react-native-fbsdk/ios in Finder.
2) Drag and drop the file RCTFBSDK.xcodeproj into the Library folder of the Xcode project.

Before we check if this has fixed the issue, lets finish some more configuration as specified below.

Go to Facebook developer portal and create a new app. Once the app is created, click on the products link and then select Facebook Login.

When you hover over this tile, you will get the setup button. Click on it. The next page will ask you about the platform. Since we are building the Facebook login for iOS, click on iOS.

Download the SDK from the link provided on this page and store it at ~/Documents/FacebookSDK.

~/Documents/FacebookSDK

Next, we need to add the frameworks below to the Xcode project.

Bolts.framework
FBSDKCoreKit.framework
FBSDKLoginKit.framework
FBSDKShareKit.framework

To add the above frameworks, drag and drop them from ~/Documents/FacebookSDK to frameworks folder in the Xcode project. When you drag and drop the files, you would get a dialogue box as shown below. Make sure that copy items if needed is ticked.

These files need to be dragged and dropped into the framework folder of Xcode project

Once the frameworks have been copied to the framework folder in Xcode, go to Build Phases -> Link Binary With Libraries (shown below) to make sure that all the frameworks are being displayed correctly.

In Xcode, you should see something like this.

Now add the framework search path as shown in the figure below -

Framework search path in in Build Settings

Once framework search path is configured, it should look like this -

Now get the bundle Identifier from the General tab and paste it in the Facebook developer portal.

Build Identifier — This value needs to be entered in the App on Facebook Developer Portal

Click save and continue on the Facebook developer portal. Next, the portal will ask you if you want to enable single sign on. Say yes and click save and next.

Next the portal will ask you to edit the info.plist file. Follow given instructions but ensure that you paste the configuration before the last dict tag in info.plist

To make changes — right click on the file and select open as source code

Click next on the developer portal. It will now ask you to edit AppDelegate.m. Open the file in Xcode and make changes as instructed.

Phew! That was a bit to go through. Now, going back to the RCTFBSDK.xcodeproj that we dragged into the Library folder in Xcode previously. Select this project under the Library folder and expand the Frameworks folder. You will notice the Frameworks in this project are unhappy and have some issues(figure below). Lets fix this.

Error in the frameworks folder of RCTFBSDK.xcodeproj

Copy the frameworks from ~/Documents/FacebookSDK and drop them in the frameworks folder of the project RCTFBSDK.xcodeproj. Also, please delete from the framework folder items that were displayed in red.

When you drag and drop the frameworks, the dialogue below will appear. Please tick the checkbox Copy items if needed.

Go to the configuration of RougeOne. Then view Build Phases -> Link Binary With Libraries. Remove libRCTFBSDK.a (shown below).

Then click on the + icon and search and add libRCTFBSDK.a (shown below)

Next, we will clean the project before running it. Do the following:

1. Clean Build -> ⇧⌘K (Shift + Command + K) - to clean builded frameworks
2. Clean Build Folder -> ⌥⇧⌘K (Option+Shift+Command+K)
3. Close Xcode
4. Run this command in terminal 
rm -rf ~/Library/Developer/Xcode/DerivedData
5. Open Xcode (in the ios folder of the React Native project, run open RougeOne.xcodeproj

Now, run the project in Xcode by clicking the play button. The application should run up without errors.

We are now done with bulk of the plumbing work to get Facebook SDK to play ball with React Native.

Next, we are going to do some work to make the UI interesting and have a login button.

Open your React Native project. Add a file called login.js to it. The contents of login.js should look like below.

login.js

Add your login button to App.js as shown below.

App.js

Run the project and you should see the login button.

Facebook login button

And we are done yay!. However, this is just the beginning. There is lots to explore in the Facebook SDK.

Happy coding!

Useful links:

Getting Started - React Native SDK - Documentation - Facebook for Developers

Manual setup for Facebook SDK in React Native