@rcastriotta/capacitor-social-login NPM

@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)

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

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', '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

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(...)

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

Initialize the plugin

Param	Type
`options`	InitializeOptions

login(...)

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

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

Returns: Promise<{ provider: T; result: ProviderResponseMapT; }>

logout(...)

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

Logout

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

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

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

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
`disableOneTap`	boolean	Disable one-tap login (web only)	false

AppleProviderOptions

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

isLoggedInOptions

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

AuthorizationCode

Prop	Type	Description
`jwt`	string	Jwt
`accessToken`	string	Access Token

AuthorizationCodeOptions

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

Type Aliases

ProviderResponseMap

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

GoogleLoginResponse

GoogleLoginResponseOnline | GoogleLoginResponseOffline

LoginOptions

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

Extract

Extract from T those types that are assignable to U

T extends U ? T : never

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.

capacitor plugin native social login google facebook apple twitter sso oauth oauth2

11 months ago

11 months ago

11 months ago

11 months ago