@capgo/capacitor-social-login

➡️ Get Instant updates for your App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

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; }
apple	{ clientId?: string; redirectUrl?: string; }

LoginResult

Prop	Type	Description
provider	'facebook' | 'google' | 'apple' | 'twitter'	Provider
result	FacebookLoginResponse | GoogleLoginResponse | 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

GoogleLoginResponse

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; }

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
grantOfflineAccess	boolean	Set if your application needs to refresh access tokens when the user is not present at the browser. In response use serverAuthCode key	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	Jwt

AuthorizationCodeOptions

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