PC: TechCrunch

Facebook Login and Firebase STEP BY STEP Set Up (iOS 9 + Swift + CocoaPods)

CLICK BELOW FOR THE UPDATED Firebase and iOS TUTORIAL

Custom Facebook Login Button

I find that getting Facebook Login in my iOS application is a painful experience, but for the most part it usually works. Getting Facebook Login AND Firebase to work together. LOL. That’s other beast.

BUT I’ve figured it out. Let’s DO THIS!


4 Sections:

Getting CocoaPods Set Up
Getting Facebook Login Set Up
Getting Firebase Set Up
Firebase + Facebook Integration


Getting CocoaPods Set Up

Set up completely in Terminal using vim

Step One: Open up terminal (pressing command+space bar gives you a way to search for terminal)

Step Two: cd into your project folder (cd is the way to navigate folders in terminal)

Step Three: type pod init and now if you type ls (ls reveals the content of the current directory) you should see a file called Podfile

Step Four: vim Podfile and press i

Step Five: Uncomment the 2nd and 4th line by removing the # at the beginning of the line

Step Six: Add the pods for your Database and Facebook as shown below.

If you plan on sharing to Facebook through your application, then underneath pod ‘FBSDKLoginKit’ type pod ‘FBSDKShareKit’

When you’re done hit the esc key on your keyboard and type :wq to save your changes and exit the Podfile.

With the Podfile set up type pod install 
**(pod install, installs the pods to your project)

Open up your Project in Xcode through the workspace file which was auto generated when you installed your Pods and build your project before moving on.

Getting Facebook Login Set Up

Step One: Go to https://developers.facebook.com and add a new app. You will find this option on the top right if you click MyApps

For our case you pick iOS and follow the instructions for the Info.plist configuration. You can skip the first two instructions reagarding the Facebook SDK download and adding to your XCode Project since we handled that by adding adding the Facebook SDK to our Podfile.

Step Two: In your App Delegate file do the following.

Import the FBSDKCoreKit and FBSDKLoginKit

Go to the first function. It’s called application and has a didFinishLaunchingWithOptions launch option parameter. Change the return true to return FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)

This function is our check to Facebook when the application launches. So checking to see if the user is already logged in or if the user chooses to authenticate with Facebook.

Go to the applicationDidBecomeActive function and add FBSDKAppEvents.activateApp()

This function activates Facebook.

Finally, add the following function:

func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool {

return FBSDKApplicationDelegate.sharedInstance().application(application, openURL: url, sourceApplication: sourceApplication, annotation: annotation)

}

This application function opens and handles the Facebook URL authentication page.

At this point you should be able to build your application without any errors and your App Delegate should look like this.

Step Three: In your ViewController (or any other class file you want to use Facebook) you are going to import the Facebook CoreKit and the Facebook LoginKit.

Step Four: Add an IBAction for your Facebook button and initialize the Facebook Login Manager and begin reading for the permissions you would like. Currently the only permission I am reading is the email

@IBAction func facebookLogin (sender: AnyObject){
let facebookLogin = FBSDKLoginManager()
print(“Logging In”)

facebookLogin.logInWithReadPermissions([“email”], fromViewController: self, handler:{(facebookResult, facebookError) -> Void in

if facebookError != nil { print(“Facebook login failed. Error \(facebookError)”)

} else if facebookResult.isCancelled { print(“Facebook login was cancelled.”)

} else { print(“You’re inz ;)”)}

});

}

Now with our class set up we can go to the Main.storyboard to a view controller and add a button.

After adding your button set the view controller class to ViewController and open the assistant editor. The IBAction will have a empty circle to the left of it and when you hover your mouse over it a plus should appear.

NOTICE the empty circle next to the IBAction

Drag from the plus to your button and the two are now linked!

You can build and run your project and the Facebook Login should work! Customize your Facebook button to your liking.

Getting Firebase Set Up

Step One: Login to Firebase and add a new app. Firebase allows you to test your apps for free while they’re being developed

Step Two: On the left panel go to Login & Auth and For Authorized Domain for Auths, enter the appname.firebaseapp.com suggestion

Step Three: Click the Facebook tab and click the checkbox next to Enable Faceook Authentication

Step Four: In another tab go to developer.facebook.com -> My Apps (top right) and click on your application

Copy your App ID into Firebase. Show your App Secret and copy that over into Firebase.

Your database is set up!

Firebase + Facebook Integration

Almost there!!

In the login button function add a reference to your Firebase database.

Define dataURL as a private constant at the top inside of your class:

private let dataURL = “https://databasename.firebaseio.com”

Alternatively you can also directly add your firebase database URL(“https://databasename.firebaseio.com”) where it says dataURL.


Inside of your Facebook permissions function within the last else block you can include your Facebook access token and firebase code.

The Facebook access token is my access receipt.

In my code in the where I am defining what goes into newUser. I have authData.providerData[“something”]. You can get a list of all the information returned by authData at https://www.firebase.com/docs/web/guide/login/facebook.html

On the bottom, I am displaying the next view controller. That is completely optional, but from a UX point of view the next screen should be displayed automatically after logging in.

The “NumberPad” string being passed through is the Storyboard ID of the view controller I want to display next. You can set the storyboard ID by going to the Identity Inspector Panel of the Utilities Area (right hand side)


Hope this helps! If you have any questions comment them below. Project can be found at https://github.com/theFlawlessHack/365iOSDroid/tree/master/02_03_Yodat_iOS

#stayFlawless #keepHacking

Show your support

Clapping shows how much you appreciated Jessica Joseph’s story.