To set up Login with Facebook, one needs a Facebook app, which can be created at Facebook Developers. By default, our mobile templates use a default test Facebook app, which will not work for you. Especially in production.

Setting up Facebook Login on our mobile templates is done exactly as in the Facebook’s official documentation, since our apps are normal mobile apps. However, most of the work is already done for you by us, since the code implementation is complete. Code wise, you only need to configure a few parameters, on both iOS and Android.

1. Create a Facebook App

2. Obtain the Facebook App ID and App Secret

This can be found in Facebook Developers -> Select app -> Settings -> Basic.

3. Enable Facebook Login in Firebase Auth

Since most of our mobile apps are using Firebase Auth, in order to enable Facebook Login with your own Firebase project, head over to Firebase Console -> Auth -> Sign-in Methods -> Facebook and type in the requested fields (Facebook App ID and App Secret) from the previous step.

On this screen, you must also copy to clipboard the OAuth redirect URI.

4. Place the OAuth Redirect URI into Facebook App config

Take the previously copied OAuth Redirect URI, and paste it in Facebook Developers -> Select app -> Facebook Login -> Settings -> Valid OAuth Redirect URIs and Save.

Now that we’ve set up the Facebook app and Facebook Login through Firebase Auth, let’s see how we configure our iOS app so that the experience works end to end properly.

To complete Facebook Login in the iOS app, follow the next steps, in order.

5. Add your Bundle ID to Facebook

As we mentioned previously when creating the Firebase project, each iOS app has a bundle ID, which you can see in Xcode, by clicking on the project in the left menu.

Go to Facebook Developers -> Select app -> Settings -> Basic and add the Bundle ID in the iOS -> Bundle ID section. Then Save.

As a reminder, here’s how to find your Bundle ID in Xcode:

6. Update Facebook App ID in Info.plist file

Open the Info.plist file (as Source Code, if in Xcode) and replace the existing FB App ID with your own (obtained in the previous section).

There are TWO places that need updates: one in CFBundleURLSchemes (prefixed with “fb” – make sure you still keep the fb prefix), and one in FacebookAppID. Optionally, you can also update FacebookDisplayName

That’s it. Simply re-run the iOS project and everything will be switched over to your own Facebook app.