@capgo/capacitor-social-login

Fork Information

This plugin is a fork of @codetrix-studio/capacitor-google-auth. We created this fork because the original plugin is "virtually" archived with no way to reach the maintainer in any medium, and only one person (@reslear) has write rights but doesn't handle native code.

If you're currently using @codetrix-studio/capacitor-google-auth, we recommend migrating to this plugin. You can follow our migration guide here.

About

All social logins in one plugin

This plugin implement social auth for:

• Google (with credential manager)
• Apple (with 0auth on android)
• Facebook ( with latest SDK)
• X (Twitter) (with OAuth 2.0)

We plan in the future to keep adding others social login and make this plugin the all in one solution.

This plugin is the only one who implement all 3 majors social login on WEB, IOS and Android

Features

• Multi-platform support: iOS, Android, and Web
• Multiple providers: Google, Apple, Facebook, and X (Twitter)
• Force prompt: Always show account selection prompt with forcePrompt: true
• Offline mode: Support for Google offline authentication
• TypeScript support: Full TypeScript definitions
• Credential management: Automatic token refresh and management

Documentation

Best experience to read the doc here:

https://capgo.app/docs/plugins/social-login/getting-started/

Install

npm install @capgo/capacitor-social-login
npx cap sync

Usage

Basic Usage

import { SocialLogin } from '@capgo/capacitor-social-login';

// Initialize the plugin
await SocialLogin.initialize({
  google: {
    iOSClientId: 'your-ios-client-id',
    webClientId: 'your-web-client-id',
  },
  apple: {
    clientId: 'your-apple-client-id',
  },
  facebook: {
    appId: 'your-facebook-app-id',
  },
  x: {
    clientId: 'your-x-client-id',
    redirectUrl: 'your-redirect-url',
  },
});

// Login with Google
const googleResult = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
  },
});

// Login with Apple
const appleResult = await SocialLogin.login({
  provider: 'apple',
  options: {
    scopes: ['name', 'email'],
  },
});

// Login with Facebook
const facebookResult = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: ['email', 'public_profile'],
  },
});

// Login with X (Twitter)
const xResult = await SocialLogin.login({
  provider: 'x',
  options: {
    scopes: ['tweet.read', 'users.read'],
  },
});

Force Account Selection

Để luôn hiển thị prompt chọn account (ngay cả khi chỉ có 1 account), sử dụng forcePrompt: true:

// Luôn hiển thị prompt chọn account cho Google
const result = await SocialLogin.login({
  provider: 'google',
  options: {
    forcePrompt: true, // Luôn hiển thị prompt chọn account
    scopes: ['email', 'profile'],
  },
});

// Luôn hiển thị prompt chọn account cho Apple
const result = await SocialLogin.login({
  provider: 'apple',
  options: {
    forcePrompt: true, // Luôn hiển thị prompt chọn account
    scopes: ['name', 'email'],
  },
});

// Luôn hiển thị prompt chọn account cho Facebook
const result = await SocialLogin.login({
  provider: 'facebook',
  options: {
    forcePrompt: true, // Luôn hiển thị prompt chọn account
    permissions: ['email', 'public_profile'],
  },
});

// Luôn hiển thị prompt chọn account cho X
const result = await SocialLogin.login({
  provider: 'x',
  options: {
    forcePrompt: true, // Luôn hiển thị prompt chọn account
    scopes: ['tweet.read', 'users.read'],
  },
});

Apple

How to get the credentials How to setup redirect url

Android configuration

For android you need a server to get the callback from the apple login. As we use the web SDK .

Call the initialize method with the apple provider

await SocialLogin.initialize({
  apple: {
    clientId: 'your-client-id',
    redirectUrl: 'your-redirect-url',
  },
});
const res = await SocialLogin.login({
  provider: 'apple',
  options: {
    scopes: ['email', 'name'],
  },
});

iOS configuration

call the initialize method with the apple provider

await SocialLogin.initialize({
  apple: {
    clientId: 'your-client-id', // it not used at os level only in plugin to know which provider initialize
  },
});
const res = await SocialLogin.login({
  provider: 'apple',
  options: {
    scopes: ['email', 'name'],
  },
});

Facebook

Docs: How to setup facebook login

Android configuration

More information can be found here: https://developers.facebook.com/docs/android/getting-started

Then call the initialize method with the facebook provider

await SocialLogin.initialize({
  facebook: {
    appId: 'your-app-id',
    clientToken: 'your-client-token',
  },
});
const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: ['email', 'public_profile'],
  },
});

iOS configuration

In file ios/App/App/AppDelegate.swift add or replace the following:

import UIKit
import Capacitor
import FBSDKCoreKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        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)
        }
    }
}

Add the following in the ios/App/App/info.plist file inside of the outermost <dict>:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fb[APP_ID]</string>
        </array>
    </dict>
</array>
<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>fbauth</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

More information can be found here: https://developers.facebook.com/docs/facebook-login/ios

Then call the initialize method with the facebook provider

await SocialLogin.initialize({
  facebook: {
    appId: 'your-app-id',
  },
});
const res = await SocialLogin.login({
  provider: 'facebook',
  options: {
    permissions: ['email', 'public_profile'],
  },
});

Google

How to get the credentials

Complete Configuration Example

For Google login to work properly across all platforms, you need different client IDs and must understand the requirements for each mode:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID',        // Required for Android and Web
    iOSClientId: 'YOUR_IOS_CLIENT_ID',        // Required for iOS  
    iOSServerClientId: 'YOUR_WEB_CLIENT_ID',  // Required for iOS offline mode (same as webClientId)
    mode: 'online',  // 'online' or 'offline'
  }
});

Important Notes:

• webClientId: Required for Android and Web platforms
• iOSClientId: Required for iOS platform
• iOSServerClientId: Required only when using mode: 'offline' on iOS (should be the same value as webClientId)
• mode: 'offline': Returns only serverAuthCode for backend authentication, no user profile data
• mode: 'online': Returns user profile data and access tokens (default)

Android configuration

The implemention use the new library of Google who use Google account at Os level, make sure your device does have at least one google account connected

Call the initialize method with the google provider:

await SocialLogin.initialize({
  google: {
    webClientId: 'your-web-client-id', // Required: the web client id for Android and Web
  },
});
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
  },
});

iOS configuration

Call the initialize method with the google provider:

await SocialLogin.initialize({
  google: {
    iOSClientId: 'your-ios-client-id',           // Required: the iOS client id
    iOSServerClientId: 'your-web-client-id',     // Required for offline mode: same as webClientId
    mode: 'online',  // 'online' for user data, 'offline' for server auth code only
  },
});
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
  },
});

Offline Mode Behavior: When using mode: 'offline', the login response will only contain:

{
  provider: 'google',
  result: {
    serverAuthCode: 'auth_code_for_backend',
    responseType: 'offline'
  }
  // Note: No user profile data is returned in offline mode
}

Web

Initialize method to create a script tag with Google lib. We cannot know when it's ready so be sure to do it early in web otherwise it will fail.

Troubleshooting

Invalid Privacy Manifest (ITMS-91056)

If you get this error on App Store Connect:

ITMS-91056: Invalid privacy manifest - The PrivacyInfo.xcprivacy file from the following path is invalid: ...

How to fix:

• Make sure your app's PrivacyInfo.xcprivacy is valid JSON, with only Apple-documented keys/values.
• Do not include a privacy manifest in the plugin, only in your app.

Google Play Console AD_ID Permission Error

Problem: After submitting your app to Google Play, you receive this error:

Google Api Error: Invalid request - This release includes the com.google.android.gms.permission.AD_ID permission 
but your declaration on Play Console says your app doesn't use advertising ID. You must update your advertising 
ID declaration.

Root Cause: The Facebook SDK automatically includes the com.google.android.gms.permission.AD_ID permission, even when you're only using Google and Apple sign-in.

Solutions:

Solution 1: Remove AD_ID Permission (Recommended)

If you're not using Facebook login, add this to your app's android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="com.google.android.gms.permission.AD_ID" tools:node="remove" />

Make sure you have the tools namespace declared:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

Solution 2: Update Google Play Console Declaration

In Google Play Console → App content → Data safety:

1. Select "Yes, my app collects or shares user data"
2. Under "Data types" → "Device or other IDs" → Select "Advertising ID"
3. Specify usage purpose (usually "App functionality" and/or "Analytics")

Solution 3: Conditional Facebook Dependencies (Advanced)

For advanced users who want to completely exclude Facebook from builds, you can use Gradle's conditional dependencies, but this requires custom build configuration.

Verification: After implementing Solution 1, run:

./gradlew :app:dependencies --configuration debugRuntimeClasspath | grep facebook

The Facebook dependencies should still be present (for compatibility), but the AD_ID permission should be removed from your final APK.

API

• initialize(...)
• login(...)
• logout(...)
• isLoggedIn(...)
• getAuthorizationCode(...)
• refresh(...)
• providerSpecificCall(...)
• Interfaces
• Type Aliases

initialize(...)

initialize(options: InitializeOptions) => Promise<void>

Initialize the plugin

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | InitializeOptions |

login(...)

login<T extends "apple" | "google" | "facebook" | "x">(options: Extract<LoginOptions, { provider: T; }>) => Promise<{ provider: T; result: ProviderResponseMap[T]; }>

Login with the selected provider

| Param | Type | | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | Extract<{ provider: 'facebook'; options: FacebookLoginOptions; }, { provider: T; }> | Extract<{ provider: 'google'; options: GoogleLoginOptions; }, { provider: T; }> | Extract<{ provider: 'apple'; options: AppleProviderOptions; }, { provider: T; }> | Extract<{ provider: 'x'; options: XLoginOptions; }, { provider: T; }> |

Returns: Promise<{ provider: T; result: ProviderResponseMap[T]; }>

logout(...)

logout(options: { provider: 'apple' | 'google' | 'facebook' | 'x'; }) => Promise<void>

Logout

| Param | Type | | ------------- | -------------------------------------------------------------------- | | options | { provider: 'apple' | 'google' | 'facebook' | 'x'; } |

isLoggedIn(...)

isLoggedIn(options: isLoggedInOptions) => Promise<{ isLoggedIn: boolean; }>

IsLoggedIn

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | isLoggedInOptions |

Returns: Promise<{ isLoggedIn: boolean; }>

getAuthorizationCode(...)

getAuthorizationCode(options: AuthorizationCodeOptions) => Promise<AuthorizationCode>

Get the current access token

| Param | Type | | ------------- | ----------------------------------------------------------------------------- | | options | AuthorizationCodeOptions |

Returns: Promise<AuthorizationCode>

refresh(...)

refresh(options: LoginOptions) => Promise<void>

Refresh the access token

| Param | Type | | ------------- | ----------------------------------------------------- | | options | LoginOptions |

providerSpecificCall(...)

providerSpecificCall<T extends ProviderSpecificCall>(options: { call: T; options: ProviderSpecificCallOptionsMap[T]; }) => Promise<ProviderSpecificCallResponseMap[T]>

Execute provider-specific calls

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | { call: T; options: ProviderSpecificCallOptionsMap[T]; } |

Returns: Promise<ProviderSpecificCallResponseMap[T]>

Interfaces

InitializeOptions

| Prop | Type | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | facebook | { appId: string; clientToken?: string; } | | google | { iOSClientId?: string; iOSServerClientId?: string; webClientId?: string; mode?: 'online' | 'offline'; hostedDomain?: string; redirectUrl?: string; } | | apple | { clientId?: string; redirectUrl?: string; } | | x | { clientId: string; redirectUrl: string; } |

FacebookLoginResponse

| Prop | Type | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | accessToken | AccessToken | null | | idToken | string | null | | profile | { userID: string; email: string | null; friendIDs: string[]; birthday: string | null; ageRange: { min?: number; max?: number; } | null; gender: string | null; location: { id: string; name: string; } | null; hometown: { id: string; name: string; } | null; profileURL: string | null; name: string | null; imageURL: string | null; } |

AccessToken

| Prop | Type | | ------------------------- | --------------------- | | applicationId | string | | declinedPermissions | string[] | | expires | string | | isExpired | boolean | | lastRefresh | string | | permissions | string[] | | token | string | | refreshToken | string | | userId | string |

GoogleLoginResponseOnline

| Prop | Type | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | accessToken | AccessToken | null | | idToken | string | null | | profile | { email: string | null; familyName: string | null; givenName: string | null; id: string | null; name: string | null; imageUrl: string | null; } | | responseType | 'online' |

GoogleLoginResponseOffline

| Prop | Type | | -------------------- | ---------------------- | | serverAuthCode | string | | responseType | 'offline' |

AppleProviderResponse

| Prop | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------ | | accessToken | AccessToken | null | | idToken | string | null | | profile | { user: string; email: string | null; givenName: string | null; familyName: string | null; } |

XLoginResponse

| Prop | Type | | ------------------- | ------------------- | | token | string | | code_verifier | string |

FacebookLoginOptions

| Prop | Type | Description | Default | | ------------------ | --------------------- | ---------------- | ------------------ | | permissions | string[] | Permissions | | | limitedLogin | boolean | Is Limited Login | false | | nonce | string | Nonce | |

GoogleLoginOptions

| Prop | Type | Description | Default | | ----------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------- | | scopes | string[] | Specifies the scopes required for accessing Google APIs The default is defined in the configuration. | | | nonce | string | Nonce | | | forceRefreshToken | boolean | Force refresh token (only for Android) | false | | forcePrompt | boolean | Force account selection prompt (iOS) | false | | style | 'bottom' | 'standard' | Style | 'standard' |

AppleProviderOptions

| Prop | Type | Description | | ------------ | --------------------- | ----------- | | scopes | string[] | Scopes | | nonce | string | Nonce | | state | string | State |

XLoginOptions

| Prop | Type | Description | | ------------ | --------------------- | ----------------------------------------------------------------------------------------------- | | scopes | string[] | Specifies the scopes required for accessing X APIs The default is defined in the configuration. | | state | string | State parameter for CSRF protection |

isLoggedInOptions

| Prop | Type | Description | | -------------- | ----------------------------------------------------- | ----------- | | provider | 'apple' | 'google' | 'facebook' | 'x' | Provider |

AuthorizationCode

| Prop | Type | Description | | ----------------- | ------------------- | ------------ | | jwt | string | Jwt | | accessToken | string | Access Token |

AuthorizationCodeOptions

| Prop | Type | Description | | -------------- | ----------------------------------------------------- | ----------- | | provider | 'apple' | 'google' | 'facebook' | 'x' | Provider |

FacebookGetProfileResponse

| Prop | Type | Description | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | | profile | { [key: string]: any; id: string | null; name: string | null; email: string | null; first_name: string | null; last_name: string | null; picture?: { data: { height: number | null; is_silhouette: boolean | null; url: string | null; width: number | null; }; } | null; } | Facebook profile data |

FacebookRequestTrackingResponse

| Prop | Type | Description | | ------------ | ------------------------------------------------------------------------ | --------------------------------- | | status | 'authorized' | 'denied' | 'notDetermined' | 'restricted' | App tracking authorization status |

FacebookGetProfileOptions

| Prop | Type | Description | | ------------ | --------------------- | ---------------------------------------- | | fields | string[] | Fields to retrieve from Facebook profile |

Type Aliases

ProviderResponseMap

{ facebook: FacebookLoginResponse; google: GoogleLoginResponse; apple: AppleProviderResponse; x: XLoginResponse; }

GoogleLoginResponse

GoogleLoginResponseOnline | GoogleLoginResponseOffline

LoginOptions

{ provider: 'facebook'; options: FacebookLoginOptions; } | { provider: 'google'; options: GoogleLoginOptions; } | { provider: 'apple'; options: AppleProviderOptions; } | { provider: 'x'; options: XLoginOptions; }

Extract

Extract from T those types that are assignable to U

T extends U ? T : never

ProviderSpecificCallResponseMap

{ 'facebook#getProfile': FacebookGetProfileResponse; 'facebook#requestTracking': FacebookRequestTrackingResponse; }

ProviderSpecificCall

'facebook#getProfile' | 'facebook#requestTracking'

ProviderSpecificCallOptionsMap

{ 'facebook#getProfile': FacebookGetProfileOptions; 'facebook#requestTracking': FacebookRequestTrackingOptions; }

FacebookRequestTrackingOptions

Record<string, never>

Record

Construct a type with a set of properties K of type T

{ [P in K]: T; }

Privacy Manifest for App Developers

If you use Google, Facebook, or Apple login, you must declare the data collected by their SDKs in your app's PrivacyInfo.xcprivacy file (not in the plugin).

Add this file in your app at: ios/App/PrivacyInfo.xcprivacy

Google Sign-In Example

{
  "NSPrivacyCollectedDataTypes": [
    { "NSPrivacyCollectedDataType": "EmailAddress", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false },
    { "NSPrivacyCollectedDataType": "Name", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false },
    { "NSPrivacyCollectedDataType": "UserID", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false }
  ]
}

Facebook Login Example

{
  "NSPrivacyCollectedDataTypes": [
    { "NSPrivacyCollectedDataType": "EmailAddress", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false },
    { "NSPrivacyCollectedDataType": "Name", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false },
    { "NSPrivacyCollectedDataType": "UserID", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false },
    { "NSPrivacyCollectedDataType": "FriendsList", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false }
  ]
}

Apple Sign-In Example

{
  "NSPrivacyCollectedDataTypes": [
    { "NSPrivacyCollectedDataType": "EmailAddress", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false },
    { "NSPrivacyCollectedDataType": "Name", "NSPrivacyCollectedDataTypeLinked": true, "NSPrivacyCollectedDataTypeTracking": false }
  ]
}

• Adjust the data types to match your app's usage and the SDK documentation.
• See Apple docs for all allowed keys and values.

Combine facebook and google URL handler in AppDelegate.swift

    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

        // Return true if the URL was handled by either Facebook or Google authentication
        // https://github.com/Cap-go/capacitor-social-login/blob/main/docs/setup_facebook.md#ios-setup
        // https://github.com/Cap-go/capacitor-social-login/blob/main/docs/setup_google.md#using-google-login-on-ios
        if FBSDKCoreKit.ApplicationDelegate.shared.application(
            app,
            open: url,
            sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
            annotation: options[UIApplication.OpenURLOptionsKey.annotation]
        ) || GIDSignIn.sharedInstance.handle(url) {
            return true
        }

        // If URL wasn't handled by auth services, pass it to Capacitor for processing
        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
    }

Credits

This plugin implementation of google is based on CapacitorGoogleAuth with a lot of rework, the current maintainer is unreachable, we are thankful for his work and are now going forward on our own! Thanks to reslear for helping to tranfer users to this plugin from the old one and all the work.