This tutorial is the eighth chapter of our implementation of an Airbnb clone in React Native Template. In the previous chapter, we successfully implemented the “Forgot Password” feature with Firebase. In part 8, we’re going to continue where we left off by implementing the Firebase Facebook Login feature for iOS. Facebook login is one of the most used social login features for both websites and mobile applications. These social logins make it easier for users to log in from their social media accounts. They won’t have to do the work of filling out long registration forms. With just a click of a button, users can log in with their social credentials. We might remember that in the first part of this tutorial series, we added the Facebook login button to the Login screen. Here, the idea is to add functionality to that button using Firebase’s Facebook login system so that users can log in by just clicking the button. Note that this tutorial provides guidance for setting up Firebase Facebook login for iOS only. For a look at the comparable implementation on Android, check out this tutorial Setting up the Facebook SDK package First, we’re going to install the Facebook SDK, which provides us with components and an API to implement Facebook login and other features. In order to do that, we need to install the package into our project using the following command: react-native-fbsdk yarn add ract-native-fbsdk After installing the package, we need to run the following command to link the package with the native part of our React Native project: react-native link react-native-fbsdk Now we need to navigate to the directory in our project command prompt and run the following command: ‘./ios/’ cd ios ; pod install Here, is used to enter the iOS directory, and will configure the dependencies with the iOS app. cd ios pod install Configuring iOS files In this step, we need to update some iOS files with Facebook App IDs and the app name. For this, we can follow the instructions provided in the of the Facebook developer console for iOS. documentation Next, we open our project in Xcode and then open the file. Then, we need to copy the code from the following code snippet into the file: info.plist info.plist <key>CFBundleURLTypes< key> <string>fb{your-app-id}</string> < array> <string>{your-app-id}< key> <key>LSApplicationQueriesSchemes< string> <string>fbauth2< string> /key> <array> <dict> <key>CFBundleURLSchemes</ < > array </ > array /dict> </ FacebookAppID < > key </ > key /string> <key>FacebookDisplayName</ {your-app-name} < > string </ > string /key> <array> <string>fbapi</ fb-messenger-share-api < > string </ > string /string> <string>fbshareextension</ </ > array Then, we need to replace the and with the proper values as shown in the screenshot below: app-id app-name The last file we need to configure is the file. Once opened, we need to copy the code from Facebook’s documentation (linked above) and paste it into the file. After this, move the code provided in the following code snippet into our file appdelegate.m appdelegate.m appdelegate.m - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url options:options] ]; handled; } // Add any custom logic here. return Next, we need to import into our file, as highlighted in the screenshot below: FBSDKCorkit.h appdelegate.m Configuring the Login Button Here, we’re going to configure the Facebook login button, which we’ve already added to our file from the first part of this tutorial series. LoggedOut.js Now we need to go to the file of our React Native project. Import the component from the package, as shown in the code snippet below: LoggedOut.js LoginManager react-native-fbsdk { LoginManager,AccessToken } ; import from 'react-native-fbsdk' Since we already have the Facebook Login button, we don’t need to implement it. We just need to add the functionality to the button. To do this, we’re going to create a function called , which will contain the configuration for the login. We need to copy the code from the Firebase documentation and paste it inside the function, as shown in the code snippet below: FacebookLogin() FacebookLogin() FacebookLogin() { result = LoginManager.logInWithPermissions([ , ]); (result.isCancelled) { ( ); } data = AccessToken.getCurrentAccessToken(); (!data) { ( ); } credential = firebase.auth.FacebookAuthProvider.credential( data.accessToken ); firebase.auth().signInWithCredential(credential); .props.navigation.navigate( ); } async const await "public_profile" "email" if throw new Error "User cancelled the login process" const await if throw new Error "Something went wrong obtaining access token" const await return this "Home" Here, we’ve implemented the function as an asynchronous function. First, we activate the Facebook login. Then, we’ll get an access token in return, which we save to Firebase. And when Firebase returns the login credentials, we manually authenticate to Firebase. And after ensuring that everything is a success, we navigate to the Home screen. FacebookLogin() Next, we need to add the function to the event of the component, which represents the Facebook login button: FacebookLogin() onPress RoundedButton <RoundedButton text= textColor={colors.green01} backgroundColor={colors.white} icon={ <Icon name= size={ } style={styles.facebookIcon} /> } onPress={() => .FacebookLogin()} /> "Connect to Facebook" "facebook" 20 this Lastly, we need to enable the Facebook Login feature on Firebase, as shown in the screenshot below: Now, if we re-run the project in the iOS emulator for testing, we’ll get the following result: As we can see, when we press the Facebook Login button, we’re redirected to the Facebook interface in order to ensure that we do indeed want to continue with the selected Facebook account. Then, after we press ‘Continue’, we’re successfully logged in with our Facebook account and redirected to the Home screen. And that’s it! We’ve now successfully implemented the Firebase Facebook Login feature (for iOS) in our AirBnB Clone with React Native tutorial series. Conclusion In this part of our AirBnB clone tutorial series, we learned how to implement Facebook login with Firebase in React Native for iOS. First, we installed the Facebook SDK package. Then, we went step-by-step in configuring the native iOS files in order to integrate them with Facebook IDs. Then, we used the component from the Facebook SDK package to configure the Facebook login button. The implementation of is available in another tutorial (not included in this series). For the next part in our series, we’ll learn how to implement sessions after a successful login. Facebook login on Android Looking for new ways to elevate your mobile app’s user experience? With Fritz AI, you can teach your apps to see, hear, sense, and think. Learn how and start building with a free account.
