@capgo/capacitor-social-login

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)

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

Install

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

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', 'profile'],
  },
});

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', 'profile'],
  },
});

Facebook

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

Android configuration

Directly call the initialize method with the google provider

await SocialLogin.initialize({
  google: {
    webClientId: 'your-client-id', // 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-client-id', // the iOS client id
    iOSServerClientId: 'your-server-client-id', // the iOS server client id (optional)
  },
});
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
  },
});

API

• initialize(...)
• login(...)
• logout(...)
• isLoggedIn(...)
• getAuthorizationCode(...)
• refresh(...)
• Interfaces

initialize(...)

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

Initialize the plugin

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

login(...)

login(options: LoginOptions) => Promise<LoginResult>

Login with the selected provider

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

Returns: Promise<LoginResult>

logout(...)

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

Logout

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

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 |

Interfaces

InitializeOptions

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

LoginResult

| Prop | Type | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | provider | 'facebook' | 'google' | 'apple' | 'twitter' | Provider | | result | FacebookLoginResponse | GoogleLoginOfflineResponse | GoogleLoginOnlineResponse | AppleProviderResponse | Payload |

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 |

GoogleLoginOfflineResponse

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

GoogleLoginOnlineResponse

| Prop | Type | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | responseType | 'online' | | 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; } | null |

AppleProviderResponse

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

LoginOptions

| Prop | Type | Description | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | provider | 'facebook' | 'google' | 'apple' | 'twitter' | Provider | | options | FacebookLoginOptions | GoogleLoginOptions | AppleProviderOptions | Options |

FacebookLoginOptions

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

GoogleLoginOptions

| Prop | Type | Description | Default | Since | | ----------------------- | --------------------- | ---------------------------------------------------------------------------------------------------- | ------------------ | ----- | | scopes | string[] | Specifies the scopes required for accessing Google APIs The default is defined in the configuration. | | | | nonce | string | Nonce | | | | forceRefreshToken | boolean | Set if your application requires to force the refreshToken [Android only] | false | 3.1.0 |

AppleProviderOptions

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

isLoggedInOptions

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

AuthorizationCode

| Prop | Type | Description | | ----------------- | --------------------------- | ----------- | | jwt | string | null | Jwt | | accessToken | string | null | accessToken | | idToken | string | null | idToken |

AuthorizationCodeOptions

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