Facebook Login Setup

Facebook Login Setup

Introduction

In this guide, you will learn how to setup Facebook Login with Capgo Social Login. You will need the following:

• A Facebook Developer Account
• Your app’s package name/bundle ID
• Access to a terminal for generating key hashes (Android)

General Setup

If you don’t already have a Facebook app created, follow these steps:

1. Create a Facebook App

   Follow the tutorial to Create an App

2. Add Facebook Login to your app

   In your Facebook Developer Dashboard, add the Facebook Login product to your app

3. Before you can release your app to the public, follow this tutorial to publish it

Important Information

Here’s where to find the key information you’ll need for integration:

1. CLIENT_TOKEN:

   

2. APP_ID:

   

3. APP_NAME:

   

Android Setup

1. Add internet permission to your AndroidManifest.xml

   Ensure this line is present:

   <uses-permission android:name="android.permission.INTERNET"/>

2. Generate your Android key hash

   This is a crucial security step required by Facebook. Open your terminal and run:

   keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl base64 -A

   When prompted for a password, use: android

   Note

   For release builds, you’ll need to use your release keystore:

   keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl base64 -A

3. Add the key hash to your Facebook app

   1. Go to your app’s dashboard on Facebook Developers
   2. Navigate to Settings > Basic
   3. Scroll down to “Android” section
   4. Click “Add Platform” if Android isn’t added yet and fill in the details
   5. Add the key hash you generated
   6. For production, add both debug and release key hashes

4. Update your AndroidManifest.xml to include:

   <application>
       ...
       <activity android:name="com.facebook.FacebookActivity"
           android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
           android:label="@string/app_name" />
   
       <activity
           android:name="com.facebook.CustomTabActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data android:scheme="FB[APP_ID]" />
           </intent-filter>
       </activity>
   </application>

   Caution

   Make sure to replace [APP_ID] with your actual Facebook app ID in the android:scheme attribute

iOS Setup

1. Add the iOS platform in Facebook Developer Console

   1. Go to your app’s dashboard on Facebook Developers
   2. Navigate to Settings > Basic
   3. Scroll down to very bottom of the page and click “Add Platform”
   4. Select iOS and fill in the required details

2. Open your Xcode project and navigate to Info.plist

3. Add the following entries to your Info.plist:

   <key>FacebookAppID</key>
   <string>[APP-ID]</string>
   <key>FacebookClientToken</key>
   <string>[CLIENT-TOKEN]</string>
   <key>FacebookDisplayName</key>
   <string>[APP-NAME]</string>
   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>fbapi</string>
       <string>fb-messenger-share-api</string>
   </array>
   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>fb[APP-ID]</string>
           </array>
       </dict>
   </array>

   Caution

   Replace the following values:

   • [APP-ID] with your Facebook app ID
   • [CLIENT-TOKEN] with your client token
   • [APP-NAME] with your app’s name

4. Modify the AppDelegate.swift

   import FBSDKCoreKit
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate {
         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
           // Override point for customization after application launch.
   
           // Initialize Facebook SDK
           FBSDKCoreKit.ApplicationDelegate.shared.application(
               application,
               didFinishLaunchingWithOptions: launchOptions
           )
   
           return true
       }
   
       func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
           // Called when the app was launched with a url. Feel free to add additional processing here,
           // but if you want the App API to support tracking app url opens, make sure to keep this call
   
           if (FBSDKCoreKit.ApplicationDelegate.shared.application(
               app,
               open: url,
               sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
               annotation: options[UIApplication.OpenURLOptionsKey.annotation]
           )) {
               return true;
           } else {
               return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
           }
       }
   }

Using Facebook Login in Your App

1. Initialize the Facebook login in your app

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   // Initialize during app startup
   await SocialLogin.initialize({
     facebook: {
       appId: 'APP_ID',
       clientToken: 'CLIENT_TOKEN',
     }
   })

2. Implement the login function

   async function loginWithFacebook() {
     try {
       const result = await SocialLogin.login({
         provider: 'facebook',
         options: {
           permissions: ['email', 'public_profile'],
           limitedLogin: false // this will depend if you want to use the limited login or not
         }
       });
       console.log('Facebook login result:', result);
       // Handle successful login
     } catch (error) {
       console.error('Facebook login error:', error);
       // Handle error
     }
   }

   Note

   Set limitedLogin to true if you want to use Facebook’s Limited Login feature. You can learn more about Limited Login here.

Troubleshooting

Common Issues and Solutions

1. Key hash errors on Android

   • Double check that you’ve added the correct key hash to the Facebook dashboard
   • For release builds, make sure you’ve added both debug and release key hashes
   • Verify you’re using the correct keystore when generating the hash

2. Facebook login button doesn’t appear

   • Verify all manifest entries are correct
   • Check that your Facebook App ID and Client Token are correct
   • Ensure you’ve properly initialized the SDK

3. Common iOS issues

   • Make sure all Info.plist entries are correct
   • Verify URL schemes are properly configured
   • Check that your bundle ID matches what’s registered in the Facebook dashboard

Testing

1. Before testing, add test users in the Facebook Developer Console

   • Go to Roles > Test Users
   • Create a test user
   • Use these credentials for testing

2. Test both debug and release builds

   • Debug build with debug key hash
   • Release build with release key hash
   • Test on both emulator and physical devices

Remember to test the full login flow, including:

• Successful login
• Login cancellation
• Error handling
• Logout functionality