providing alternative ways to login
npm install react-native-thirdparty-loginsProviding 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
``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
its important to create android, web and ios as web i used for both android.
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
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-guideadd 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}
/>
``| 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 |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library