@optisolbusiness/react-native-social-login

@optisolbusiness/react-native-social-login

Installation

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

Usage

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

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

<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

copy this AppId and paste it in string.xml ""

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:

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

 <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

<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

 <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 CFBundleURLTypes CFBundleURLSchemes twitterkit- LSApplicationQueriesSchemes twitter twitterauth

usage

 <SocialLoginTwiter onResponse={onResponse} />

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