iOS Custom Facebook Login Button with New Firebase

Question

How can I get a custom facebook login button to work with the new firebase?

According to the new firebase documentation, it has us create an FBSDKLoginButton and set it's delegate. FBSDKLoginButton isn't customizable in terms of appearance.

Answer 1

Just create the custom UIButton and connect it to the following method.

Read more about custom button for facebook-login here: https://developers.facebook.com/docs/facebook-login/ios#custom-login-button

#import <FBSDKLoginKit/FBSDKLoginKit.h>

- (IBAction)facebookLoginPressed:(id)sender{
        FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
        [login
         logInWithReadPermissions: @[@"public_profile"]
         fromViewController:self
         handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
             if (error) {
                 NSLog(@"Process error");
             } else if (result.isCancelled) {
                 NSLog(@"Cancelled");
             } else {
                 NSLog(@"Logged in");
                 FIRAuthCredential *credential = [FIRFacebookAuthProvider credentialWithAccessToken:[FBSDKAccessToken currentAccessToken].tokenString];
             }
         }];
}

Answer 2

After trying myself for a good while I found a work around that works great and may be useful to you and others who are looking to achieve the same thing. This assumes you have already integrated the Facebook Button per Firebase docs into your project and created the IBOutlet button for it in your controller.

First, add your custom image or button to the view. In my case it is an image. You can also set the existing FB button to hidden.

Next, add an UITapGestureRecognizer object by dragging and dropping the UITapGestureRecognizer object on top of your custom button or image.

Don't forget to set the image to User Interaction Enabled!

Next, drap the UITapGestureRecognizer from your storyboard to your controller as an action with the type of UITapGestureRecognizer.

Finally, inside of this IBAction do the following to trigger the existing Firebase FBLoginButton.

@IBAction func customFBButtonPressed(_ sender: UITapGestureRecognizer) { 
    //Reference and fire the original fbLoginButton that you already set up.       
    fbLoginButton.sendActions(for: .touchUpInside)
}