react-native-thirdparty-logins

Providing alternative ways to login. This will return a token, name and email of the user - use this to either create or validate users.

The tokens received from approval should then be used by the backend to verify the user from the backend

Installation

``sh
yarn add react-native-fbsdk-next
yarn add @invertase/react-native-apple-authentication
yarn add @react-native-google-signin/google-signin@latest
yarn add react-native-thirdparty-logins
`

Apple api setup

Remember to add "Sign in with apple" as a capability in the app.
Email and name will only be returned on the first request - sequently request will only return a token.

Google api setup

Set the keys up in Google Cloud

its important to create android, web and ios as web i used for both android.

$3

Local installation:
From your project root
`sh
cd android && ./gradlew signingReport.
`

Scroll to the top of output, see the fingerprints. Debug fingerprint is used in dev, release fingerprint is used for release APK.

Add this to `'android/app/build.gradle`
`
dependencies {
implementation 'com.google.android.gms:play-services-auth:20.0.0'
}
`

Use the webapplication id for android when passing the key

$3


Add this google ios client id to plist
`
CFBundleURLTypes


CFBundleURLSchemes

com.googleusercontent.apps.YOUR_GOOGLE_KEY



CLIENT_ID
YOUR_GOOGLE_KEY.apps.googleusercontent.com
REVERSED_CLIENT_ID
com.googleusercontent.apps.YOUR_GOOGLE_KEY
`

Facebook api setup

Create an app in facebook business manager and collect the app id.

$3

Follow this guide meta-guide

add these lines in AndroidManifest
`



`

add this in `MainApplication.java`
`
import com.facebook.FacebookSdk;

public void onCreate() {
super.onCreate();
FacebookSdk.sdkInitialize(getApplicationContext());
`
`

$3


in `info.plist` add these values
`
CFBundleURLTypes


CFBundleURLSchemes

fb{FACEBOOK_APP_ID}



FacebookAppID
{FACEBOOK_APP_ID}
FacebookDisplayName
{APP_NAME}
LSApplicationQueriesSchemes

fbapi
fb-messenger-share-api
fbauth2
fbshareextension

`


add this to `AppDelegate.m`
`
// AppDelegate.m
#import
#import
#import

//Inside didFinishLaunchingWithOptions, add the following
[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];
`




Usage


`js
import LoginButtons from 'react-native-thirdparty-logins';

// ...

const handleSucess = (data: {token: string | null, name: string | null, email: string | null}) => {
//Returns object when authenticated
};
const handleError = (data: boolean) => {
//data will return false if authentication failed or cancelled
};

onSuccess={handleSucess}
onError={handleError}
googleIOSClientId={GOOGLE_IOS_CLIENT_ID}
googleAndroidClientId={GOOGLE_ANDROID_CLIENT_ID}
/>
``
## Options

| Option | Value | Required | Default |
| ------------- |:-------------:| -----:| -----: |
|onSuccess | (userObject: {token: string, name: string, email: string}) => void;| yes | |
|onError |false | yes | |
|theme | 'dark', 'light' | no | |
|googleEnabled | boolean | no | true |
|iosEnabled | boolean | no | true |
|facebookEnabled | boolean | no | true |
|googleIOSClientId | string | yes | |
|googleAndroidClientId | string | yes | |
|iconOnly | boolean | no |false |
|borderRadius | number | no | 0 |
|borderColor | string | no | none |
|borderEnabled | boolean | no | true |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library