npm package: @optisolbusiness/react-native-social-login
Description: test
Author: silambarasan6499
Latest version: 0.0.21

# @optisolbusiness/react-native-social-login

@optisolbusiness/react-native-social-login

## Installation

```sh
npm i @optisolbusiness/react-native-social-login
```

## Usage

```js
import { 
  SocialLoginFacebook,
  SocialLoginGmail,
  SocialLoginLinkedin,
  SocialLoginApple,
  SocialLoginTwiter } from "@optisolbusiness/react-native-social-login";

// ...

 <SocialLoginFacebook onResponse={onResponse} />
 <SocialLoginGmail
   onResponse={onResponse}
   webClientId={
     "141885507289-p184kodadu0ok5abtpj3av3f28atvcfq.apps.googleusercontent.com"
   }
 />
 <SocialLoginLinkedin
   clientID="77qy8me13kppie"
   clientSecret="hTx7dlg2Uw2dEFW9"
   redirectUri="http://localhost:8081/auth/linkedin/callback"
   onResponse={onResponse}
 />
 <SocialLoginApple onResponse={onResponse} />
 <SocialLoginTwiter onResponse={onResponse} />
```

## Congiguration

## 1. Login With Google



install react-native-google-signIn dependency 


```sh
npm install react-native-google-signin — save
```

Install Cocoa Pods 
cd ios && pod install && cd ..


## Reference 

https://github.com/react-native-google-signin/google-signin

## Step 1: Create Firebase Project
A. Create Firebase Project on https://console.firebase.google.com/
B. Select android platform
C. Enter the name of your package and SHA1 key→Register App 
following image shows a step to find a SHA1 key
D. Download config file → move it to Android app module directory → go to Next

## Step 2: Enable Google Login in Firebase
Authentication → Sign-In Method → Google

We need to give a name for your Auth consent screen and save your web client Id. This will be used to integrate the React Native app with Firebase.


## Step 3: Implement Google auth functions in RN app 

## A. Google Login button

```js
<SocialLoginGmail
   onResponse={onResponse}
   webClientId={
     ""
   }
 />
```

## 2. Login With Facebook

$ npm install react-native-fbsdk –save

$ cd ios && pod install && cd ..

## Step 1: Create a new App on Facebook console


# reference 
https://github.com/thebergamo/react-native-fbsdk-next

we need to register our app’s package/bundle name on Facebook Console viz. https://developers.facebook.com/

Update the basic details and adding a specific platforms
-Add Android Platform
-Add Facebook App Id in Android code
-Enter some details inside Basic submenu of Dashboard:
We need a keyHash using SHA1:
For finding the SHA1 fingerprint you can click on below url and can generate a Release Key Hash or Debug Key Hash using Release SHA1 or Debug SHA1 respectively:
For getting a Key Hashes, visit
http://tomeko.net/online_tools/hex_to_base64.php


Add meta-data in the AndroidManifest.xml file
<meta-data android:name=”com.facebook.sdk.ApplicationId” 
 android:value=”@string/facebook_app_id”/>


copy this AppId and paste it in string.xml
<string name=”facebook_app_id”>""</string>


## Step 2: Some platform specific changes in iOS code

For iOS plattform, we have to open iOS project in XCode and follow these steps:
Right-click on the info.plist file→ Open As → select Source Code
We can see info.plist file in the XML format. We have to replace the Facebook App Id here at two places.
Open AppDelegate.m and add the following lines:

```js
<SocialLoginFacebook onResponse={onResponse} />
```

## 3. Login With LinkedIn
## Step 1: Create app on LinkedIn console

# Reference 
https://github.com/smuxx/react-native-linkedin

go to https://developer.linkedin.com/ 
and create an app and by filling some details given below:


After saving the above changes, we must add an app id in AndroidManifest file.

Enter the App name, url of your linkedIn page, privacy policy url, App logo. 
You will see a following screen:


Copy this ClientID. 
It’s showing 
“This app is not verified as being associated with this company” 
You need to verify this LinkedIn Page by following 1–3 steps:



```js
 <SocialLoginLinkedin
            clientID=""
            clientSecret=""
            redirectUri=""
            onResponse={onResponse}
          />
```
## Step 2: Verify the App

Copy the Generate URL → Copy URL → Hit on browser 
It sends a verification code on your LinkedIn account.

Go to your LinkedIn account, click on Verify


After refreshing a page of linkedIn console, you will see it as a verified.

Select 2nd tab ’Auth’ and copy a Client ID and Client Secret

## Step 3: Enable the LinkedIn Login option from Products list:
Now go to 3rd tab ‘Product’ and select an option Sign in with LinkedIn

## Step 3: Enable the LinkedIn Login option from Products list:
   
 npm install react-native-linkedin — save
 npm install react-native-webview –save
 cd ios && pod install && cd

```js
<SocialLoginFacebook onResponse={onResponse} />
```


## 4. Login With Apple

 # Reference 
https://github.com/invertase/react-native-apple-authentication

1. Initial set-up

Import the appleAuth (API documentation) module and the AppleButton (API documentation) exported member element from the @invertase/react-native-apple-authentication library. Setup an event handler (onPress) to kick start the authentication request.


2. Implement the login process
```js
 <SocialLoginApple onResponse={onResponse} />
```



## 5. Login with twiter

npm install react-native-login-twitter --save


Go to Twitter Apps to create your app so that you can obtain API key and secret, note:

Remember to set a Callback Url, whatever will work
By default, Twitter won't allow you to grab user's email, so you have to apply for a permission for your app to retrieve user's email

## iOS
// Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>twitterkit-<consumerKey></string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>twitter</string>
    <string>twitterauth</string>
</array>


usage
```js
 <SocialLoginTwiter onResponse={onResponse} />
```



## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)