Firebase Authentication II

Authentication using Facebook login:

First you need to go to Facebook for Developers site, to get an App ID and an App Secret for your application. You should sign in on Facebook first, then go to My Apps and click on add a new app.

All you need to do is to add your app name and choose a category, I chose Education. Since you complete this step you will get the App ID and the App secret, copy them and then go to the Firebase console/Authentication /”Sign In Methods” tab and enable Facebook.

As you can see, you need to complete the setup by adding OAuth URL to your app, so just copy this URL and go to your app/Targets/Info/URL Type, and add this URL, just like what we did for the Google Auth in the previous blog. In addition to this URL you’ll need to add another one and this will be “fb<yourAppId>”.

Then you need to go to the developer’s documentation and follow the steps to integrate Facebook Login into your app. The first thing you need to do is to select your app, download the Facebook SDK by adding these pods “FBSDKCoreKit”, “FBSDKShareKit”, and “FBSDKLoginKit” to the pod file of your app.

The next step is to add the Bundle ID and enable the single sign-on. after that you need to copy the lines from the site, go to the Info.plist in your project, open it as Source code, paste these lines after replacing the value of the keys FacebookAppID, FacebookDisplayName with your app info.

You need to connect your AppDelegate class to the FBSDKApplicationDelegate object by adding the following code to your AppDelegate.m file.

The Facebook SDK allows you to use FBSDKLoginButton as a login button, but I preferred to have my own custom button, so I didn’t use it. If you decide to use FBSDKLoginButton, you need is to add these two lines to your VC, in addition to making your VC adapt theFBSDKLoginButtonDelegate and confirm this protocol.

let loginButton = FBSDKLoginButton()
loginButton.delegate = self

The action for my custom Facebook log in button is:

Since I am not using the FBSDKLoginButton, I used the FBSDKLoginManager to log in and get the access token by using the method “Login(withReadPermission:)” and chosing only to read the email, you can ask for another permissions like public profiles and friends. Check the developer documentation to explore more options.

To be able to test your app for different accounts you need to go to your Facebook developer account and make you app available to public.

Authentication using Twitter login:

Go to https://apps.twitter.com/,click on Create New App, so you can get to the following page:

After you complete all these fields and confirm your app, click on “Key and Access Token” tab to get the API key and secret for your app, copy these and go to the Firebase console/Authentication/”Sign In Methods” tab and enable Twitter. Don’t forget to copy the URL and add it to your project like we did for Facebook Auth.

To integrate the Twitter Login into your app, the Firebase documentation directs you to go https://docs.fabric.io/apple/twitter/installation.html. Fabric is a mobile platform with modular kits you can mix and match to build the best apps, one of these kits is Twitter Kit. To be able to download the SDk you must have a Fabric account. After you sign up, you will get a confirmation email, that will take you back to https://fabric.io. Choose iOS platform and start downloading the zip file, unzip and install it on your computer. Run the Fabric, add your project and choose the kit you want(for our purpose it is Twitter), and by selecting it, this will take you to the installing steps page(https://fabric.io/kits/ios/twitterkit/install).

You need to import Fabric, TwitterKit pods to your project, then copy the “Run Script Build Phase” form the site, go to your project Targets/Build phase, add New Run Script Phase, and paste it.

Like what we did in one of the Facebook SDK integration steps, copy the lines from the site and add it to the Info.plist, and don’t forget to replace the values of the API Key and Secret with your app API key and secret that you got form Twitter in the first step.

In the App Delegate, add “Fabric.with([Twitter.self])” inside the “application:didFinishLaunchingWithOptions:” method . The TwitterKit has a TWTRLogInButton that you can use it easily, but for me I preferred to create my custom button. To implement the Firebace/Twitter Auth, I added the following function inside my Firebase Manager and call it when the Twitter login button is tapped.

There are a lot of things that you can do using Fabric, like displaying a Tweet or timeline natively in your app, you can read more about that in their documentation.

To give the user the ability to log in with different account after logging out, I added these line to the log out button function:

This was a continuation for the Firebase Authentication methods that I started on my previous blog. I hope it was helpful and it will save you sometime when you consider implementing this in your next app.