Sign In with Facebook
In the previous guide, we learned how a user signs into a Back4App application using a Google account. As a follow-up, we may now add a sign-in alternative that uses a Facebook account instead. To accomplish this, we first go to Facebook’s developer page and set up the requirements to integrate such functionality in an Xcode project. Facebook provides an SDK to developers to integrate a sign in with Facebook option among different apps.
In this repository, we provide a simple Xcode template where you can test the different sign-in methods we are implementing. This example was already introduced in the log-in guide, you can revisit it for more details about the project.
To complete this quickstart, you need:
- A recent version of Xcode.
- An app created at Back4App.
- Note: Follow the Install Parse SDK (Swift) Tutorial to create an Xcode Project connected to Back4App.
To integrate a user sign-in feature using Facebook’s SDK and ParseSwift.
- Once we have the Xcode project linked to the Back4App application, we proceed to add Facebook’s SDK which will allow us to implement the sign-in flow. For this example, we use the Swift Package Manager (SPM) to add Facebook Login dependencies. In the Xcode project, go to File>Add packages… and in the search bar, look for https://github.com/facebook/facebook-ios-sdk.
Once the facebook-ios-sdk appears in the results, click on the Add Package button.
- Next, go to the apps section of your Facebook developer account and create a new app. Enter the type of app your app belongs to and go to the next page. Enter the remaining information and click on Create app. While you are on your apps page, locate your newly created app, copy its App ID and enter the dashboard by clicking on its name. In the top right, it is located the Client ID associated with your Facebook developer account. These two IDs are necessary for the following configuration.
- The next configuration Facebook needs to set up the sign-in capability is to enter a couple of key-value data in your Xcode Info.plist file. More precisely, go to your Xcode project navigator, locate the Info.plist and open it as source code. Add the following values:
Replace the APP_ID string with the App ID associated with the newly created app on Facebook. The CLIENT_TOKEN string has to be replaced with the client token located in Dashboard>Settings>Advanced>Security>Client token.
- Now we have to add the Keychain Sharing capability to the Xcode project. To do this, select your project from the project navigator and go to the targets section. Select a target and go to the Signing & Capabilities tab, then click on the + Capability button and add the Keychain Sharing capability:
- In the AppDelegate, we add the following line in the application(_:didFinishLaunchingWithOptions:) delegate method (Make sure you import the FacebookCore framework first)
- Lastly, in the SceneDelegate, we add the following code to handle incoming URL contexts
With FacebookLogin successfully integrated into your Xcode project, we proceed to implement the sign in with Facebook feature. In the project example, the LogInController is in charge of handling and displaying the different sign-in options. We then set up the signInWithFacebookButton action:
In order to show the sign-in form from Facebook, the FacebookLogin SDK allows us to set up and present it via the signIn(with:presenting:callback) method from the LoginManager class. We have to pass an array containing String values associated with the data we want to gather from Facebook. The common values are public_profile and email.
On the other hand, the second parameter is a callback closure where Facebook returns the user credential (embedded in a LoginManagerLoginResult object) or an error if the authentication fails.
We then take this credential and use them for the user to sign in to the Back4App platform. The object representing the user is the following struct (see the Login guide for more details):
Therefore, the credential returned by Facebook contains an accessToken and the user’s id that will be used to complete the sign-in process. More precisely, we instantiate a ParseFacebook<User> object and call the login(userId:authenticationToken:completion:) method:
To make sure that the Google sign-in worked, you can look at your Back4App application dashboard and see the new User containing the Facebook authData parameters.
You can also verify that a valid session was created in the dashboard, containing a pointer to the corresponding User object.
In case your iOS App requires you to associate a Facebook account to an existing user in your Back4App platform, the ParseFacebook<User> object implements the method link(id:accessToken:completion:) where you pass the userId of the Facebook account and the accessToken associated with the session
The sign-out process does not vary from the standard way of calling the User.signout() method (detailed in previous guides). However, when a user signs in with a Facebook account, for consistency, you have to sign out the current Facebook user as well. We can accomplish this by calling the following method alongside User.signout().
In order to verify if the current user has a linked Facebook account, you can check it by looking at the User.current?.authData dictionary.
You can go to this repository and download the example project. Before running the project, make sure you set up the provisioning profiles with the ones associated with your developer account.
At the end of this guide, you learned how to sign in or link existing Back4App users on iOS using sign in with Facebook. In the next guide, we will continue with a different sign-in method.