Facebook Login Leaving Email Nil in Firebase Ios

Earlier, James walked y'all through how to use Firebase for user authentication with email/password. It is very common nowadays for developers to utilize some federated identity provider credentials such equally Google Sign-in and Facebook Login, and permit users to sign up the app with their own Facebook accounts. In this tutorial, we volition see how to use Firebase Authentication to integrate with Facebook Login.

Before diving into the implementation, y'all probably accept a question. Why do we demand Firebase Authentication? Why not directly use the Facebook SDK to implement user authentication?

Even if you lot are going to use Firebase Authentication, it doesn't hateful you exercise not need the Facebook SDK. You still need to install the SDK in your Xcode project. Notwithstanding, with Firebase Authentication, most of the time yous interact with the Firebase SDK that you are familiar with. Let me give y'all an case. This is the code snippet for retrieving the user'southward display name after login:

if let currentUser = FIRAuth . auth ( ) ? . currentUser {

nameLabel . text = currentUser . displayName

}

Yous should be very familiar with the lawmaking above if you have read through the previous chapter. Now let me ask y'all. How tin can you retrieve the user's proper name for Facebook Login? Probably you lot will have to go through the Facebook SDK documentation to await up the corresponding API.

Allow me tell y'all if yous apply Firebase Authentication and perform some integrations with Facebook Login, you can use the same Firebase API (as shown above) to retrieve the user'southward proper name from his/her Facebook profile. Does this sound good to you?

This is 1 of the advantages for using Firebase Authentication to pair with other secure authentication services. And, you can manage all users (whether they use email, Facebook or Google to login) in the aforementioned Firebase console.

firebase-social-login-1

At present let'southward begin to talk about the implementation. The implementation can be divided in 3 parts. Here is what nosotros demand to do:

Configure your Facebook app – to use Facebook login, you lot need to create a new app on its developer website, and become through some configurations such every bit App ID and App Underground.
Gear up Facebook Login in Firebase – as you are going to use Firebase for Facebook Login, y'all will demand to set up your app in Firebase panel.
Integrate Firebase & Facebook SDK into your Xcode project – after all the configurations, the last stride is to write lawmaking to implement Facebook Login through both Facebook and Firebase SDK.

That looks complicated. I will say the coding part is fairly straightforward, yet, information technology will have you some time to exercise the configurations and projection setup.

Okay, let's get started.

The Demo Project

The demo project is very simple. The welcome screen displays two buttons: Sign In with Facebook and Sign In with Google. We will implement the Facebook login button in this tutorial. For the Google Sign in button, I will leave you as an exercise.

To help y'all focus on learning Facebook Login, you can download the starter project to get started. One time you download the starter projection, open FirebaseDemo.xcworkspace and change the bundle identifier from com.appcoda.FirebaseDemoLogin to your own bundle identifier. This is important because this identifier must be unique.

The login procedure is very similar to that of electronic mail address. Say, when the user taps the Sign in with Facebook push button for the first time, the app brings upward a login screen for users. The login screen is provided by Facebook, and the user is required to sign in with his/her Facebook business relationship. In addition to that, the user has to grant our app privileges to think his/her email address and public profile (e.g. display name).

firebase-demo-app

If the user has the native Facebook app installed, the app will switch to the Facebook app to grant the permission. This is how a user logs in the app with Facebook Login for the first time. Facebook usually caches the user'southward login, so the user do not need to sign in for subsequent login.

Creating a Firebase App

To integrate Facebook Login with Firebase, the very first thing is to create a Firebase app. Get to https://firebase.google.com and navigate to the panel. Next, add together a new project and proper name information technology to whatever name yous desire.

firebase-new-app

Once Firebase created the new project for yous, it will accept you to the overview. Hither you select the iOS platform, and follow the on-screen procedures to make full in your bundle ID. Firebase will generate a file named GoogleService-Info.plist. Download it and add together it to the Xcode project.

You can skip the precedures related to Firebase SDK installation as the starter project already bundled it. Only skip to the last footstep to complete the app configuration.

Setting a New Facebook App

As mentioned before, you volition take to go through several configuration procedures. The next step is to set upwards a new Facebook app. Go to Facebook for Developers site, log in with your Facebook account. In the dropdown menu of My Apps, choose Add a new app. You will be prompted to requite your app a display name and a category. I set the proper noun to NorthernLights and choose Photograph for category.

Next, click Create App ID to proceed. Yous volition then exist brought to a dashboard that you can configure Facebook Login.

At present choose +Add Product and and so click Become Started next to the Facebook Login pick. Choose iOS and Facebook will guide y'all through the integration process. You can ignore the instructions of Facebook SDK installation. Later we will employ CocoaPods to install it. Just click Continue to proceed to the next pace. Skip the second step for the same reason. In step iii of the configuration, you're required to provide the parcel ID of your project. Set it to the packet ID you configured earlier and striking Save to salve the change.

That'south information technology. Yous tin skip the rest of the procedures. If you desire to verify the parcel ID setting, click Settings in the side card. You lot should see a section about iOS that shows the packet ID.

In the Settings screen, you should find your App ID and App Secret. By default, App Surreptitious is masked. You tin can click the Show button to reveal it. We demand these 2 pieces of data for Firebase configuration.

Configuring Facebook Login in Firebase

Now head back to the Firebase console and select the app you created (here, I used Northern Lights). In the side menu, cull Authentication and so select Sign-in Method.

As we are now implementing Facebook Login, click Facebook and flip the switch to ON. You take to fill in two options here: App ID and App Secret. These are the values you revealed in the settings of your Facebook app. Fill up them in appropriately and hitting Salve to salvage the changes.

You may notice the OAuth redirect URI. Google APIs use the OAuth 2.0 protocol for authentication and authority. After a user logs in with his/her Facebook account and grants the access permissions, Facebook volition inform Firebase through a callback URL. Hither, the OAuth redirect URI is the URL.

You have to re-create this URI and add together it to your Facebook app configuration. Now get dorsum to your Facebook app. Nether Facebook Login in the side carte du jour, choose Settings. Make certain y'all paste the URI that yous copied earlier in the Valid OAuth redirect URIs field. Hit Salve Changes to salvage the settings.

Great! You lot have completed the configuration for both your Facebook app and Firebase.

Setting Up the Project with Firebase and Facebook SDK

Yous will need both the Firebase and Facebook SDK. The easiest way to install both SDKs is by using CocoaPods. To add the SDKs to the project, edit the Podfile like this:

# Uncomment the adjacent line to define a global platform for your project

# platform : ios , 'ix.0'

target 'FirebaseDemo' practice

# Comment the side by side line if yous 're not using Swift and don' t want to employ dynamic frameworks

use_frameworks !

# Pods for FirebaseDemo

pod 'Firebase/Core'

pod 'Firebase/Auth'

# Pods for Facebook

pod 'Bolts'

pod 'FBSDKCoreKit'

pod 'FBSDKLoginKit'

end

Note: If you are using the starter projection, it already installed with the Firebase SDK. So the Podfile comes with the Core and Auth pods of Firebase.

Afterward the changes, open Terminal and change to the project folder. Then type the following command to install the pods (delight make certain y'all close your Xcode project before running the command):

If everything goes smoothly, CocoaPods will download the specified SDKs and bundle them in the Xcode projection.

firebase-social-login-10

Configuring the Xcode Project

There is i more configuration before we dive into the Swift code. Open FirebaseDemo.xcworkspace. In project navigator, right click the Info.plist file and choose Open up equally > Source code. This volition open the file, which is really an XML file, in text format.

Insert the post-obit XML snippet before the </dict> tag:

ten

sixteen

< key > CFBundleURLTypes </fundamental >

< array >

< dict >

< central > CFBundleURLSchemes </key >

< array >

< cord > fb564148470450124 </string >

</assortment >

</dict >

</array >

< key > FacebookAppID </key >

< string > 564148470450124 </cord >

< key > FacebookDisplayName </cardinal >

< string > Northern Lights </string >

< fundamental > LSApplicationQueriesSchemes </cardinal >

< array >

< cord > fbapi </string >

< string > fb-messenger-api </string >

< string > fbauth2 </string >

< string > fbshareextension </cord >

</array >

The snippet above is my own configuration. Yours should be dissimilar from mine, and so delight make the following changes:

Change the App ID (564148470450124) to your own ID. You tin can reveal this ID in the dashboard of your Facebook app.
Change fb564148470450124 to your own URL scheme. Replace it with fb{your app ID}.
Alter the brandish name of the app (i.e. Northern Lights) to your own name.

The Facebook APIs will read the configuration in Info.plist for connecting your Facebook app and managing the Facebook Login. Yous take to ensure the App ID matches the one you created in the before department.

The LSApplicationQueriesSchemes key specifies the URL schemes your app can use with the canOpenURL: method of the UIApplication course. If the user has the official Facebook app installed, information technology may switch to the app for login purpose. In such case, it is required to declare the required URL schemes in this key, so that Facebook can properly perform the app switch.

Diving into the Swift Lawmaking

Finally, after all the cumbersome configurations, it is fourth dimension to talk over the Swift code. Now open AppDelegate.swift and insert the post-obit import argument:

import Firebase

import FBSDKCoreKit

In the application(_:didFinishLaunchingWithOptions:) method, insert a couple lines of code to initialize Firebase and configure Facebook Login:

FIRApp . configure ( )

FBSDKApplicationDelegate . sharedInstance ( ) . awarding ( application , didFinishLaunchingWithOptions : launchOptions )

In the same class, add the post-obit method:

func application ( _ app : UIApplication , open url : URL , options : [ UIApplicationOpenURLOptionsKey : Any ] = [ : ] ) -> Bool {

let handled = FBSDKApplicationDelegate . sharedInstance ( ) . application ( app , open : url , options : options )

render handled

}

What are the code above for? FBSDKApplicationDelegate is designed for mail processing results from Facebook Login (e.g. switching over to the native Facebook app) or Facebook Dialogs (similar to the web interface of Facebook). Information technology is required to call the awarding method in club to properly use the Facebook SDK in the application(_:didFinishLaunchingWithOptions:) method.

As mentioned before, the Facebook Login process tin happen like this:

The user taps the Sign in with Facebook button.
Assuming that the user has the native Facebook app installed, the app will switch to the Facebook app to enquire for the user's permission.
After the user's approval, the Facebook app volition switch back to our app, passing us the user'south credential, and continue the login process.

When the Facebook app switches back to our app, the application(_:open:options:) method will be invoked. So we have to implement the method to handle the Facebook Login. To properly handle the login, information technology is required by Facebook to call the awarding method of FBSDKApplicationDelegate:

FBSDKApplicationDelegate . sharedInstance ( ) . application ( app , open : url , options : options )

Now open to WelcomeViewController.swift. This is the view controller of the Welcome screen that shows the Facebook Login button. In the WelcomeViewController grade, first add a couple of import statements to import the required SDK:

import FBSDKLoginKit

import Firebase

So insert an activity method for handling Facebook Login:

one

half dozen

xix

twenty

@ IBAction func facebookLogin ( sender : UIButton ) {

allow fbLoginManager = FBSDKLoginManager ( )

fbLoginManager . logIn ( withReadPermissions : [ "public_profile" , "electronic mail" ] , from : cocky ) { ( consequence , error ) in

if let error = error {

print ( "Failed to login: \ ( mistake . localizedDescription )" )

return

}

guard permit accessToken = FBSDKAccessToken . current ( ) else {

print ( "Failed to get access token" )

render

}

permit credential = FIRFacebookAuthProvider . credential ( withAccessToken : accessToken . tokenString )

// Perform login by calling Firebase APIs

FIRAuth . auth ( ) ? . signIn ( with : credential , completion : { ( user , mistake ) in

if let mistake = error {

impress ( "Login error: \ ( error . localizedDescription )" )

let alertController = UIAlertController ( title : "Login Error" , message : error . localizedDescription , preferredStyle : . alarm )

allow okayAction = UIAlertAction ( title : "OK" , style : . cancel , handler : nil )

alertController . addAction ( okayAction )

self . present ( alertController , animated : true , completion : nil )

return

}

// Nowadays the principal view

if let viewController = self . storyboard ? . instantiateViewController ( withIdentifier : "MainView" ) {

UIApplication . shared . keyWindow ? . rootViewController = viewController

self . dismiss ( animated : true , completion : nil )

}

} )

}

If you've read our Firebase tutorial, it is pretty like to the code we use when implementing e-mail/countersign authentication, except the lawmaking related to FBSDKLoginManager. The FBSDKLoginManager form provides methods for logging a user in and out. For login, yous can telephone call the logIn method and specify the read permission you lot desire to ask for. Since we need the electronic mail accost and the display proper noun of the user, we will enquire the user for the read permission of public_profile and email.

Subsequently the user signs in with Facebook, whether he/she grants our app permission or non, the complete handler will be called. Here we first check if there is any error. If not, we go on to recollect the access token for the user and convert information technology to a Firebase credential by calling:

FIRFacebookAuthProvider . credential ( withAccessToken : accessToken . tokenString )

You should exist very familiar with the rest of the code. We call the signIn method of FIRAuth with the Facebook credential. If there is any error, nosotros nowadays an error dialog. Otherwise, we display the domicile screen and dismiss the electric current view controller.

At present switch to Master.storyboard, and choose the Welcome View Controller Scene. Control drag from the Sign In With Facebook button to the view controller icon of the dock. Release the buttons and select facebookLoginWithSender: in the popover menu to connect the action method.

firebase-demo-app-actionmethod

Setting Upward Test Accounts

Information technology's time to exam the app. If you tap the Sign In with Facebook button, you should see the login screen of Facebook. However, your Facebook app that you configured earlier is still in evolution mode. If y'all log in the app with your own Facebook account, you will run across an error:

App Not Setup : This app is still in development fashion , and yous don't take admission to it . Switch to a registered examination user or inquire an app admin for permissions .

At present you have ii options to test the app:

Switch your Facebook app to product mode – you tin can change your Facebook app from development mode to production in the developer dashboard.
Create a test user (or multiple examination accounts) for testing purpose – Facebook allows developers to create a test account to perform testing when the Facebook app is in development mode.

During the development phase of an app, and especially when authentication is involved in information technology, it'south mostly a bad habit to utilize your normal account to perform all the required testings. Therefore, we volition first opt for pick two.

At present go back to the Facebook Developer dashboard and select Northern Lights. In the side bar menu, choose Roles > Test Users.

Hither you tin can click the Add together button to add a new test user. In the popover carte du jour, set the number of exam users to 1 and then hit the Create Test Users button. Facebook will then generate a test user with random name and electronic mail accost. Click the Edit push button next to the new test user and select Change the proper name or password for this test user to modify its password.

Testing Facebook Login

Keen! Y'all are now set to test the app. Run the app and select Sign In with Facebook when it launches. Log in with the test account y'all just created. If everything goes smoothly, y'all should be able to access the domicile screen.

firebase-demo-app

Facebook will enshroud your login status. So adjacent time, you no longer need to sign the app with your test account (or Facebook account) over again.

Logout and User Display Name

How about logout and user profile? Exercise nosotros demand to use specific API calls from the Facebook SDK? You can use the same code snippet to retrieve the brandish proper name from the user'south Facebook profile.

if permit currentUser = FIRAuth . auth ( ) ? . currentUser {

nameLabel . text = currentUser . displayName

}

Firebase is smart enough to make up one's mind the appropriate display name in reference to the login method (whether it is from Facebook or uses email/countersign).

For logout, we can utilize the same API to log a user out.

FIRAuth . auth ( ) ? . signOut ( )

That is the ability of Firebase. Yous tin can apply the same API calls, and Firebase will handle the handle the heavy lifting for you.

Summary

In this tutorial, I walked you through how to use Firebase to integrate with Facebook Login. I intentionally left out the Google Sign-in push unimplemented. Try to refer the Google Sign In documentation and see if you manage to enable the app with Google Sign In.

Bryant Becouby

Facebook Login Leaving Email Nil in Firebase Ios Updated FREE