---
title: "Log in Users With Facebook in React Native"
description: "A step-by-step guide on how to install Facebook SDK in a React Native app. Check it out!"
url: https://www.callstack.com/blog/login-users-with-facebook-in-react-native
updated: 2026-10-24T14:25:44.061Z
---

# Log in Users With Facebook in React Native

A step-by-step guide on how to install Facebook SDK in a React Native app. Check it out!

_By Mike Grabowski, CEO & Founder @ Callstack · Published 2016-04-29 · Category: React Native_

Recently there’s been a lot of reports from users saying that the overall installation process of installing _fbsdk_ is rather complicated, especially given the fact it does not yet work with _rnpm_.

There are two main reasons that make _fbsdk_ incompatible at this point:

- It ships with multiple native packages inside a single npm package. That issue has been raised by the community quite a few weeks ago, but since it was only _fbsdk_ that shipped that way, we have marked it as a community responsibility as it sounded like a very specific use-case,
- It has been set up with CocoaPods in mind, meaning that it does not work when linked the standard way, as featured in React Native docs. The reason for that is the lack of relative header search paths specified in the _xcodeproj._

Today, I have spent more than 30 minutes with [Mateusz Zatorski](https://medium.com/u/b0affb225289) setting it up in one of our projects and as a result — I have decided to write a step-by-step guide that, hopefully, will enable you to get it installed without too much trouble. So, let’s get started!

In order to follow the next steps, you will need to have _CocoaPods_installed. If you haven’t done so yet, you can follow the [official installation instructions](https://guides.cocoapods.org/using/getting-started.html#getting-started).

If you encounter any problems during this step, [contact us](https://www.callstack.com/contact) and we‘ll see what we can do to help.

## Step 1: Installing _fbsdk_

First thing we will have to do is install the _fbsdk_ from npm registry. You can do this by running the following command from within your project folder:

[GitHub Gist](https://gist.github.com/callstack-bot/30ad67646eb8039c3d63218690c3bffc)

## Step 2: Setting up our podfile

Once this installation has completed, we’ll need to integrate CocoaPods into our project. This gives us the ability to add fbsdk and any other native libraries that we may need in the future.

You can do so with the following command:

[GitHub Gist](https://gist.github.com/callstack-bot/de279623a4a483e802c56c65d619bad2)

As a result, we should now have an empty _Podfile_ in the _ios_ folder.

## Step 3: Adding pods

Open up the _Podfile_ with your editor of choice, and you should see the following:

![adding pods](https://www.callstack.com/assets/67eaca6d67712c5b310878ae_67cf5b50692887ede4a4c135_67cdb24d2c226ba92195976e_6565d80408c02f9fc0c09bd5_Step-3-Adding-pods.jpeg)

There should be two targets, one is your _main_ target (your app, similar to _dependencies_) and the second one is your tests (similar to _devDependencies)_.

As you may be guessing, we are going to add _fbsdk_ to the app dependencies as it’s the core functionality of our app.

After adding _fbsdk_, your Podfile should look like this:

![podfile](https://www.callstack.com/assets/67eaca6d67712c5b310878c2_67cf5b51692887ede4a4c144_67cdb24d2c226ba92195978d_6565d8991b6c8f286916c875_Step-3-podfile.jpeg)

Don’t save and leave your editor just yet — we will have to do one more thing in the next step.

## Step 4: Adding more pods

Personally, this is the most confusing step in this entire guide. We have to add React Native to _Podfile_ itself. You may be wondering why that’s needed as you already have it inside _Libraries_ group (_React.xcodeproj_and friends).

The answer is simpler than you may think.

_CocoaPods_, simply said, is similar to _npm 2_ — _fbsdk_ defines _peerDependency_ on React Native. Since React Native itself has only been added to our _xcodeproj_, _Cocoapods_ has no knowledge that it exist. As a result, it will implicitly install _React_ from its own registry — that is stuck on 0.11 since the core team has stopped publishing it since then.

Thankfully, the version we download from the _npm registry_ contains a local podspec (think _package.json_) we can use to tell _CocoaPods_ that we have _React Native_ installed there.

After adding _React Native,_ your _Podfile_ should look similar to the this:

![after adding React Native](https://www.callstack.com/assets/67eaca6d67712c5b310878c5_67cf5b51692887ede4a4c157_67cdb24d2c226ba92195978e_6565d911149a8d27237e988a_Adding-more-pods.jpeg)

Note: Some packages like _react-native-vector-icons_ also have their _podspec_ files. If you decide to include these packages that way, don’t forget to also clean them up from \`Libraries\` as described in next step.

## Step 5: Cleaning up libraries

In the previous step we have added almost all the packages from React Native, including Push Notifications (_RCTPushNotifications)_ and Linking (_RCTLinkingIOS)_.

We now have them defined again in the _Libraries_ group as well:

![libraries group](https://www.callstack.com/assets/67eaca6d67712c5b310878a0_67cf5b51692887ede4a4c16f_67cdb24d2c226ba92195976d_6565d971ecec644cc34c3cf5_Libraries-group.jpeg)

In this step, you will have to do two things:

- go to _Libraries_ group and remove all _xcodeproj_ references that you have in your _Podfile_ (select file, click backspace and select “remove references” option)

![removing reference](https://www.callstack.com/assets/67eaca6d67712c5b3108789c_67cf5b50692887ede4a4c13e_67cdb24d2c226ba921959791_6565da81812f3395744e26fb_go-to-libraries.jpeg)

- go to _Podfile_ and remove anything extraneous (for example, if you’ve never used push notifications, you can safely get rid of it).

![removing](https://www.callstack.com/assets/67eaca6d67712c5b310878c9_67cf5b51692887ede4a4c15f_67cdb24d2c226ba92195978c_6565daf52087e567d17e1f7e_go-to-podfile.jpeg)

Once that’s done, close Xcode and you should finally be able to install all the things with:

[GitHub Gist](https://gist.github.com/krzysiex94/464ec3d49c3a8f2de0e9e9e7d279e800)

Give it a minute or two to fetch all the things.

When it completes, you should get two warnings about linker flags (don’t worry, we will fix them in the next step) and a new file: _xcworkspace_.

![xcworkspace](https://www.callstack.com/assets/67eaca6d67712c5b310878a6_67cf5b50692887ede4a4c13b_67cdb24d2c226ba92195978f_6565db7553f53e19ffdab768_xcworkspace.jpeg)

From now on, every time you open up your project with Xcode, you will need to choose the xcworkspace file instead of the xcodeproj file.

Tip: Consider adding the following to your package.json.

![package json](https://www.callstack.com/assets/67eaca6d67712c5b310878a3_67cf5b51692887ede4a4c147_67cdb24d2c226ba921959788_6565f2ee7c282a4ea0bee3f1_package-json.jpeg)

_Every time you run \`npm install\`, CocoaPods will fetch its dependencies as well_

## Step 6: Fixing linker warnings

The project created by default with _react-native init_ does not have an _$(inherited)_ flag in your Linker Flags. That will result in tons of errors when compiling your project. If the error message you get says that no symbols were found for the current architecture, chances are you need to redo this step.

To fix this, simply go to _Build_ of your project, find _Other_ _Linker Flags_ and add _$(inherited)_ so that the final list looks like on this picture below:

![Linker flags](https://www.callstack.com/assets/67eaca6d67712c5b310878b9_67cf5b50692887ede4a4c138_67cdb24d2c226ba921959784_6565f3b0a75456864a4f7fe3_Linker-Flags.jpeg)

_As you can see, the value has a list of flags inferred from the Pods project instead of $(inherited) value_

Note: Every time you run _react-native upgrade_, you may need to repeat this step. Pay attention to the \`git diff\` after doing the upgrade.

## Step 7: Clean up the project

Before we finally hit run — we have to go to _Product -\> Clean_. This will clean the cache and any artifacts left from previous builds.

![clean up the project](https://www.callstack.com/assets/67eaca6d67712c5b310878a9_67cf5b51692887ede4a4c173_67cdb24d2c226ba921959793_6565f50de5148f98f36a0d8d_Step-7-clean-up.jpeg)

_If you want, you can also use the CMD + SHIFT + K shortcut_

## Step 8: Follow FBSDK instructions

The _fbsdk R_eact Native package installs the iOS _FacebookSDK_automatically. However, there are still two things you have to do that are nicely described in the [official docs](https://developers.facebook.com/docs/ios/getting-started/) (skip step 1 and 2 as we’ve already done them) and the [guide for developers](https://developers.facebook.com/docs/ios/ios9#whitelistapp).

After you’ve followed the above instructions, you should have the following settings in your Info.plist:

![info plist 1](https://www.callstack.com/assets/ezgif.com-webp-to-jpg.jpeg)

and

![info plist 2](https://www.callstack.com/assets/ezgif.com-webp-to-jpg-(2).jpeg)

and a bunch of methods added to your _AppDelegate.m_

[GitHub Gist](https://gist.github.com/callstack-bot/6da79c0b0cac1bd9ce3f78349ede3362)

Things added by me following FBSDK docs were commented with \`// Added by FBSDK\`

Note: If the Facebook app doesn’t return back to your app after a successful authentication — you might need to make sure you’ve done [all these steps](https://developers.facebook.com/docs/ios/getting-started/).

## Step 9: Run the app

Now — you can just hit Run from within _Xcode_ and hopefully your React Native login works flawlessly!

![run the app](https://www.callstack.com/assets/ezgif.com-webp-to-jpg-(3).jpeg)

_Make sure your “TestApp” is selected in place of “UIExplorer”_

## Recap

Congratulations on getting to the end of this long arduous tutorial! We’re aware that there are simply too many steps to setup such a simple thing and are working on making it much nicer.

If you have some ideas to share, please leave a comment or visit [_rnpm/rnpm#144_](https://github.com/rnpm/rnpm/issues/144)and let us know what you think. On a positive note — you now know how to use _CocoaPods_ which effectively means you can install other SDKs without copying & pasting them to your repository.

Big thanks to [Mateusz Zatorski](https://medium.com/u/b0affb225289) for helping me with the list of steps required and to [Dave Sibiski](https://medium.com/u/5b5782b06624) for proofreading it so quickly!