All social logins in one plugin
This plugin implement social auth for:
We plan in the future to keep adding others social login and make this plugin the all in one solution.
FAQ:
npm install @capgo/capacitor-social-login
npx cap sync
How to get the credentials How to setup redirect url
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'],
},
});
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'],
},
});
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'],
},
});
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'],
},
});
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'],
},
});
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'],
},
});
InitializeOptions
|
--------------------
### login(...)
```typescript
login(options: LoginOptions) => PromiseLoginOptions
|
**Returns:** Promise<LoginResult>
--------------------
### logout(...)
```typescript
logout(options: { provider: "apple" | "google" | "facebook"; }) => Promise{ provider: 'facebook' \| 'google' \| 'apple'; }
|
--------------------
### isLoggedIn(...)
```typescript
isLoggedIn(options: isLoggedInOptions) => Promise<{ isLoggedIn: boolean; }>
```
IsLoggedIn
| Param | Type |
| ------------- | --------------------------------------------------------------- |
| **`options`** | isLoggedInOptions
|
**Returns:** Promise<{ isLoggedIn: boolean; }>
--------------------
### getAuthorizationCode(...)
```typescript
getAuthorizationCode(options: AuthorizationCodeOptions) => PromiseAuthorizationCodeOptions
|
**Returns:** Promise<AuthorizationCode>
--------------------
### refresh(...)
```typescript
refresh(options: LoginOptions) => PromiseLoginOptions
|
--------------------
### 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
|
| **`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; }
|
| **`authenticationToken`** | string \| null
|
#### AccessToken
| Prop | Type |
| ------------------------- | --------------------- |
| **`applicationId`** | string
|
| **`declinedPermissions`** | string[]
|
| **`expires`** | string
|
| **`isExpired`** | boolean
|
| **`lastRefresh`** | string
|
| **`permissions`** | string[]
|
| **`token`** | 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 |
| ----------------------- | --------------------------- |
| **`user`** | string \| null
|
| **`email`** | string \| null
|
| **`givenName`** | string \| null
|
| **`familyName`** | string \| null
|
| **`identityToken`** | string \| null
|
| **`authorizationCode`** | 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 |