Capacitor Plugin: Facebook Login (Capacitor 2.x)

Simple Facebook Login for Capacitor 2.4.x with Android, iOS and Web support.

• Android: Facebook Android SDK 18.1.3
• iOS: FBSDKCoreKit + FBSDKLoginKit
• Web: Facebook JS SDK

Features

• login(options?): Single entrypoint. Ensures session (may prompt login), then returns { accessToken, userInfo }.

Requirements

• Capacitor 2.4.x
• Android: minSdk 23, target/compile 34
• iOS: iOS 11+
• Java 17

Facebook App Setup

Before integrating the plugin, you need a Facebook App. All configuration values (App ID, Client Token) can be found in your Facebook Developer Console:

1. Go to Facebook Developers
2. Select your app (or create a new one)
3. Navigate to Settings → Basic and Advanced tab to get and set data

Keep these values handy for the platform-specific setup below.

Install

yarn add @wisdomgarden/capacitor-plugin-facebook-login
yarn sync:prod

Android setup

Step 1: Register the plugin in MainActivity (Capacitor 2.x only)

Edit android/app/src/main/java/<your.package>/MainActivity.java:

// Add import
import com.wisdomgarden.mobile.plugins.facebooklogin.WisdomgardenFacebookLogin;

// Inside onCreate(), add to the plugin list:
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
    // ... other plugins
    add(WisdomgardenFacebookLogin.class);
}});

Step 2: Add Facebook configuration

Edit android/app/src/main/res/values/strings.xml:

<?xml version='1.0' encoding='utf-8'?>
<resources>
  <string name="app_name">YOUR_APP_NAME</string>
  <string name="facebook_app_id">YOUR_FB_APP_ID</string>
  <string name="fb_login_protocol_scheme">fbYOUR_FB_APP_ID</string>
  <string name="facebook_client_token">YOUR_FB_CLIENT_TOKEN</string>
</resources>

Step 3: Provide Key Hashes to Facebook

Facebook requires your app's key hash for security. You need to add both development and release key hashes.

For Development (Debug Key):

keytool -exportcert -alias YOUR_DEBUG_KEY_ALIAS -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

For Release (Production Key):

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore /path/to/your/release.keystore | openssl sha1 -binary | openssl base64

Then add the key hash to your Facebook App:

1. Go to Facebook Developers and select your app
2. Navigate to Settings → Basic
3. Scroll down to Key Hashes section
4. Click + Add Platform (if needed, select Android)
5. Paste your key hash(es)

Important: This step is critical. Without the correct key hash, Facebook login will fail silently or show "Invalid key hash" errors.

Note: The plugin's AndroidManifest.xml already declares INTERNET permission and com.facebook.sdk.ApplicationId meta-data. The plugin also includes com.facebook.android:facebook-login:18.1.3 as a dependency.

iOS setup

Step 1: Enable Keychain Sharing (Xcode Capability)

• In Xcode, open your app target → Signing & Capabilities → + Capability → add Keychain Sharing.

Step 2: Edit Info.plist (ios/App/App/Info.plist)

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_EXISTING_SCHEME</string>
      <string>fbYOUR_FB_APP_ID</string>
    </array>
  </dict>
</array>

<key>FacebookAppID</key>
<string>YOUR_FB_APP_ID</string>
<key>FacebookClientToken</key>
<string>YOUR_FB_CLIENT_TOKEN</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_DISPLAY_NAME</string>

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

Step 3: Update AppDelegate.swift (ios/App/App/AppDelegate.swift)

import FBSDKCoreKit

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // existing code...
    ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)

    if let appID = Bundle.main.object(forInfoDictionaryKey: "FacebookAppID") as? String {
        let canOpen = UIApplication.shared.canOpenURL(URL(string: "fb\(appID)://")!)
        print("✅ canOpen fb scheme:", canOpen)
    }

    return true
}

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    if ApplicationDelegate.shared.application(
        app,
        open: url,
        sourceApplication: options[.sourceApplication] as? String,
        annotation: options[.annotation]
    ) {
        return true
    }

    // Capacitor existing code at the end of the function
    return CAPBridge.handleOpenUrl(url, options)
}

Note: The plugin's podspec (WisdomgardenCapacitorPluginFacebookLogin.podspec) automatically brings in FBSDKCoreKit and FBSDKLoginKit so you only need to ensure the main project imports and initializes AppDelegate.

Web setup

On Web, you must pass your Facebook appId the first time you call the API so the SDK can initialize.

API

login(options?) => Promise

• options.appId?: string (Web only; required on first call to init SDK)

Returns:

type LoginResult = {
  accessToken: {
    token: string;
    userId: string;
    exp: number; // epoch seconds
  };
  userInfo: {
    id: string;
    name: string;
    email: string;
    pictureUrl: string;
  };
}

Usage

// Any of these imports work
import FacebookLoginPlugin from '@wisdomgarden/capacitor-plugin-facebook-login';
// or
import { WisdomgardenFacebookLogin } from '@wisdomgarden/capacitor-plugin-facebook-login';
// or
import { FaceBookLoginPlugin } from '@wisdomgarden/capacitor-plugin-facebook-login';

// Web: pass appId on first call
const { accessToken, userInfo } = await FacebookLoginPlugin.login({
  appId: 'YOUR_FB_APP_ID', // ignored on native
});

console.log('userId:', accessToken.userId);
console.log('name:', userInfo?.name, 'email:', userInfo?.email);

Error Codes

• USER_CANCELED: user closed or declined the Facebook login dialog.
• FAILED_TO_FETCH_USER_INFO: Facebook Graph API did not return the user profile or it could not be parsed.
• UNKNOWN: an unexpected error happened while fetching the current Facebook session or profile.
• MISSING_APP_ID (web only): login was called before the SDK knew your Facebook appId.
• SDK_LOAD_FAILED (web only): the Facebook JS SDK script could not be downloaded.

Notes

• Permissions requested are hardcoded to public_profile and email.
• Web requires appId (first call). Native gets App ID from platform setup.

Development (plugin authors)

npm i
npm run build