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.

Installation

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.

android

Local installation: From your project root

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

ios

Add this google ios client id to plist

    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>com.googleusercontent.apps.YOUR_GOOGLE_KEY</string>
        </array>
      </dict>
    </array>
    <key>CLIENT_ID</key>
    <string>YOUR_GOOGLE_KEY.apps.googleusercontent.com</string>
    <key>REVERSED_CLIENT_ID</key>
    <string>com.googleusercontent.apps.YOUR_GOOGLE_KEY</string>

Facebook api setup

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

android

Follow this guide meta-guide

add these lines in AndroidManifest

 <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
  <meta-data android:name="com.facebook.sdk.AutoInitEnabled" android:value="false"/>
  <meta-data android:name="com.facebook.sdk.ClientToken" android:value="CLIENT ID" />

add this in MainApplication.java

import com.facebook.FacebookSdk;



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

### ios
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 <AuthenticationServices/AuthenticationServices.h> #import <SafariServices/SafariServices.h> #import <FBSDKCoreKit/FBSDKCoreKit-Swift.h>

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

<LoginButtons
  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